chatbot-widget-creator
À propos
Cette compétence génère un widget de chatbot de type ChatGPT prêt pour la production, avec des solutions intégrées pour les problèmes frontend courants. Elle offre une protection contre les re-rendus infinis, une fonctionnalité de sélection de texte "Demander à l'IA", et une prise en charge intégrée des backends SSE en streaming et RAG. Utilisez-la pour implémenter rapidement une interface de chat surveillée et performante dans votre application web.
Installation rapide
Claude Code
Recommandénpx skills add mattnigh/skills_collection -a claude-code/plugin add https://github.com/mattnigh/skills_collectiongit clone https://github.com/mattnigh/skills_collection.git ~/.claude/skills/chatbot-widget-creatorCopiez et collez cette commande dans Claude Code pour installer cette compétence
Dépôt GitHub
Frequently asked questions
What is the chatbot-widget-creator skill?
chatbot-widget-creator is a Claude Skill by mattnigh. Skills package instructions and resources that Claude loads on demand, so Claude can perform chatbot-widget-creator-related tasks without extra prompting.
How do I install chatbot-widget-creator?
Use the install commands on this page: add chatbot-widget-creator to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does chatbot-widget-creator belong to?
chatbot-widget-creator is in the frontend category, tagged ai and testing.
Is chatbot-widget-creator free to use?
Yes. chatbot-widget-creator is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
Compétences associées
Cette compétence crée un widget de chatbot de type ChatGPT, prêt pour la production, destiné à l'intégration frontend. Elle inclut des fonctionnalités essentielles telles que la protection contre les re-rendus infinis, la fonctionnalité "Demander à l'IA" par sélection de texte, et une intégration prête à l'emploi avec des backends RAG et le streaming SSE. Utilisez-la pour déployer rapidement une interface de chat éprouvée en conditions réelles et surveillée.
Cette compétence utilise l'interface en ligne de commande Gemini pour générer du code d'interface utilisateur frontend à partir de descriptions textuelles ou d'images. Elle se spécialise dans la création de composants React avec Tailwind CSS, ce qui la rend idéale pour convertir des captures d'écran ou des concepts de design en code fonctionnel. Les développeurs devraient l'utiliser pour le prototypage rapide, l'assistance au style et les tâches de refactorisation de code.
Cette compétence génère une documentation TypeScript complète en utilisant JSDoc et TypeDoc pour divers publics. Elle crée une documentation d'API, des enregistrements de décisions architecturales (ADR), ainsi que des exemples spécifiques aux frameworks NestJS, Express, React, Angular et Vue. Utilisez-la pour documenter des modules, générer des documentations d'API ou établir des modèles de documentation en couches.
Cette compétence offre des conseils d'expert sur les dernières pratiques de React 19, incluant les Composants Serveur, les Actions et les hooks comme `useOptimistic`. Utilisez-la pour l'architecture des composants, la gestion d'état et l'optimisation des performances lors du développement d'applications React modernes. Elle assiste activement dans la mise en œuvre des fonctionnalités concurrentes, de Suspense et du développement avec TypeScript.
