gemini-frontend-assistant

mattnigh

Actualizado 5 days ago

9 vistas

Otroreactaidesign

Acerca de

Esta habilidad utiliza la CLI de Gemini para generar código de interfaz de usuario frontend a partir de descripciones de texto o imágenes. Se especializa en crear componentes de React con Tailwind CSS, lo que la hace ideal para convertir capturas de pantalla o conceptos de diseño en código funcional. Los desarrolladores deben usarla para prototipado rápido, asistencia en estilos y tareas de refactorización de código.

Instalación rápida

Claude Code

Recomendado

Principal

npx skills add mattnigh/skills_collection -a claude-code

Comando PluginAlternativo

/plugin add https://github.com/mattnigh/skills_collection

Git CloneAlternativo

git clone https://github.com/mattnigh/skills_collection.git ~/.claude/skills/gemini-frontend-assistant

Copia y pega este comando en Claude Code para instalar esta habilidad

Repositorio GitHub

mattnigh/skills_collection

Ruta: collection/MrOwaisAbdullah__ai-humanoid-robotics__claude__skills__gemini-frontend-assistant__SKILL.md

Habilidades relacionadas

chatbot-widget-creator

Otro

Esta habilidad crea un widget de chatbot estilo ChatGPT listo para producción, diseñado para integración frontend. Incluye características críticas como protección contra re-renderizados infinitos, funcionalidad de "Preguntar a la IA" en selecciones de texto, e integración preparada con backends RAG y transmisión SSE. Úselo para implementar rápidamente una interfaz de chat probada en combate y monitoreada.

Ver habilidad

chatbot-widget-creator

Otro

Esta habilidad genera un widget de chatbot estilo ChatGPT listo para producción, con soluciones integradas para problemas comunes del frontend. Ofrece protección contra renderizados infinitos, funcionalidad de "Preguntar a la IA" en selecciones de texto, y soporte integrado para backends de transmisión SSE y RAG. Úsala para implementar rápidamente una interfaz de chat monitoreada y de alto rendimiento en tu aplicación web.

Ver habilidad

react-patterns

Otro

Esta habilidad proporciona orientación experta sobre los últimos patrones de React 19, incluyendo Componentes del Servidor, Acciones y hooks como `useOptimistic`. Úsala para la arquitectura de componentes, gestión del estado y optimización del rendimiento al construir aplicaciones modernas con React. Asiste de manera proactiva en la implementación de características concurrentes, Suspense y desarrollo con TypeScript.

Ver habilidad

typescript-docs

Otro

Esta habilidad genera documentación exhaustiva en TypeScript utilizando JSDoc y TypeDoc para referencias de API, registros de decisiones arquitectónicas (ADRs) y ejemplos específicos de frameworks. Úsala para documentar módulos automáticamente, crear documentación multicapa para diferentes audiencias o configurar documentación para proyectos que utilicen NestJS, Express, React, Angular o Vue.

Ver habilidad