chatbot-widget-creator
Über
Diese Fähigkeit erzeugt ein produktionsreifes Chatbot-Widget im ChatGPT-Stil mit integrierten Lösungen für häufige Frontend-Probleme. Sie bietet Schutz vor unendlichen Neuaufrufen, "Ask AI"-Funktionalität für Textauswahl und integrierte Unterstützung für Streaming-SSE- und RAG-Backends. Nutzen Sie sie, um schnell eine überwachte, leistungsfähige Chat-Oberfläche in Ihrer Webanwendung zu implementieren.
Schnellinstallation
Claude Code
Empfohlennpx 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-creatorKopieren Sie diesen Befehl und fügen Sie ihn in Claude Code ein, um diese Fähigkeit zu installieren
GitHub Repository
Verwandte Skills
chatbot-widget-creator
AndereDiese Fähigkeit erstellt ein produktionsreifes ChatGPT-artiges Chatbot-Widget für die Frontend-Integration. Sie umfasst kritische Funktionen wie unendlichen Re-Render-Schutz, "Ask AI"-Funktionalität bei Textauswahl und sofortige Integration mit RAG-Backends und SSE-Streaming. Nutzen Sie sie, um schnell eine erprobte, überwachte Chat-Oberfläche bereitzustellen.
gemini-frontend-assistant
AndereDiese Fähigkeit nutzt die Gemini CLI, um Frontend-UI-Code aus Textbeschreibungen oder Bildern zu generieren. Sie ist spezialisiert auf die Erstellung von React-Komponenten mit Tailwind CSS und eignet sich ideal zum Konvertieren von Screenshots oder Designkonzepten in funktionierenden Code. Entwickler sollten sie für Rapid Prototyping, Styling-Unterstützung und Code-Refactoring-Aufgaben einsetzen.
typescript-docs
AndereDiese Fähigkeit erstellt umfassende TypeScript-Dokumentation unter Verwendung von JSDoc und TypeDoc für verschiedene Zielgruppen. Sie generiert API-Dokumentation, Architektur-Entscheidungsprotokolle (ADRs) und frameworkspezifische Beispiele für NestJS, Express, React, Angular und Vue. Nutzen Sie sie, um Module zu dokumentieren, API-Dokumentation zu erstellen oder geschichtete Dokumentationsmuster aufzubauen.
react-patterns
AndereDiese Fähigkeit bietet fachkundige Anleitung zu den neuesten Patterns von React 19, einschließlich Server Components, Actions und Hooks wie `useOptimistic`. Nutzen Sie sie für Komponentenarchitektur, State-Management und Performance-Optimierung beim Entwickeln moderner React-Anwendungen. Sie unterstützt proaktiv bei der Implementierung von Concurrent Features, Suspense und der TypeScript-Entwicklung.