MCP HubMCP Hub
Volver a habilidades

chatbot-widget-creator

mattnigh
Actualizado 20 days ago
12 vistas
22
1
22
Ver en GitHub
Otroaitesting

Acerca de

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.

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/chatbot-widget-creator

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__chatbot-widget-creator__SKILL.md
0

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

gemini-frontend-assistant

Otro

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.

Ver habilidad

typescript-docs

Otro

Esta habilidad genera documentación integral de TypeScript utilizando JSDoc y TypeDoc para múltiples audiencias. Crea documentación de API, registros de decisiones arquitectónicas (ADRs) y ejemplos específicos para frameworks como NestJS, Express, React, Angular y Vue. Úsala para documentar módulos, generar documentación de API o establecer patrones de documentación por capas.

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