vercel-react-best-practices
Über
Diese Fähigkeit bietet Vercels Leistungsoptimierungsrichtlinien für React und Next.js mit 57 priorisierten Regeln in 8 Kategorien. Nutzen Sie sie beim Schreiben, Überprüfen oder Refaktorisieren von Code, um Leistungsprobleme wie Neu-Renderings, Bundle-Größe und Datenabrufmuster zu adressieren. Sie deckt wichtige Optimierungsbereiche ab, einschließlich Server-/Client-Komponenten, Suspense und React Hooks.
Schnellinstallation
Claude Code
Empfohlennpx skills add TechNickAI/ai-coding-config -a claude-code/plugin add https://github.com/TechNickAI/ai-coding-configgit clone https://github.com/TechNickAI/ai-coding-config.git ~/.claude/skills/vercel-react-best-practicesKopieren 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.
chatbot-widget-creator
AndereDiese 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.
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.