React

repo-scan ist ein stackübergreifender Source-Audit-Skill, der Dateien klassifiziert, eingebettete Drittanbieter-Bibliotheken erkennt und dabei hilft zu beurteilen, was Kernbestand, Duplikat oder Ballast ist. Er ist nützlich für repo-scan für Code Review, Legacy-Migrationen und Refactoring-Planung. Siehe im Skill die Hinweise zu repo-scan-Installation und repo-scan-Nutzung.

remotion-video-creation ist eine Remotion-fokussierte Skill für React-Videoarbeit. Sie hilft, Renderfehler zu reduzieren – mit 29 Regeln zu Animationen, Assets, Audio, Untertiteln, Charts, Compositions und Übergängen. Geeignet für Video-Editing-Workflows, Vorlagen-Erklärvideos, Social Clips und datengetriebene Motion Graphics.

frontend-patterns ist eine praxisnahe Skill für die Frontend-Entwicklung mit React und Next.js und hilft dir dabei, wartbare Muster für Komponenten, State, Formulare, Routing, Barrierefreiheit und Performance auszuwählen. Nutze den frontend-patterns-Leitfaden, wenn du klare Umsetzungsanleitungen und eine fundierte Musterwahl brauchst – nicht nur allgemeine Best Practices.

Die click-path-audit Skill hilft dabei, UI-Handler durch jeden Zustandswechsel nachzuverfolgen, um Sequenzfehler, Konflikte im gemeinsamen Zustand und Abweichungen vom Endzustand nach Refactorings oder im Code Review zu erkennen.

Nutze den shadcn-Skill, um den Projektkontext zu prüfen, die passenden CLI-Befehle auszuführen, Komponenten zu installieren und UI anhand dokumentierter Muster für base vs radix, Formulare, Theming und Registries zusammenzustellen.

frontend-design verwandelt vage UI-Ideen in markante, produktionsreife Interfaces mit echtem Frontend-Code, klarer Designrichtung und weniger generischem AI-Look.

Die fullstack-developer Skill ist ein wiederverwendbares Prompt-Paket für moderne JavaScript- und TypeScript-Web-App-Arbeit rund um React, Next.js, Node.js, APIs, Datenbanken, Auth und Deployment. Sie eignet sich besonders für Planung und Umsetzung über mehrere Schichten hinweg und setzt auf eine einzelne `SKILL.md`, die Umfang und Workflow definiert, statt Scripts oder Vorlagen mitzuliefern.

Das prototype-Skill hilft dir dabei, Wegwerfcode zu bauen, der eine konkrete Frage beantwortet, bevor du dich auf eine echte Implementierung festlegst. Nutze es, um Logik, Zustandsübergänge, Datenstruktur oder die UI-Richtung mit einem lauffähigen Prototypen zu testen, der den Konventionen des Host-Repos entspricht. Ideal ist es, wenn du einen schnellen Prototypen-Guide brauchst, nicht eine fertige Funktion.

ui-ux-pro-max ist eine umfassende KI-Unterstützung für UI/UX-Design. Die Skill bietet strukturierte Empfehlungen zu Layouts, Stilen, Farbsystemen, Typografie und UX-Regeln für Web- und Mobile-Projekte. Ideal für Entwickler und Teams, die praxisnahe Designentscheidungen für React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter und HTML/CSS treffen möchten. Perfekt zum Planen, Überprüfen und Optimieren von UIs mit kuratiertem Designwissen.

ckm:ui-styling unterstützt Sie beim Erstellen barrierefreier, produktionsreifer Benutzeroberflächen mit shadcn/ui, Tailwind CSS und Canvas-basiertem Design. Optimal für React-Projekte, die strukturierte, responsive Layouts, zugängliche Komponenten, Dark Mode und konsistente Designsysteme benötigen. Nutzen Sie ckm:ui-styling für UI-Design, Theming und schnelles Prototyping mit praxisnahen, stack-spezifischen Tipps.

design-system-patterns unterstützt Teams dabei, skalierbare UI-Grundlagen mit Token-Struktur, Theming-Architektur und wiederverwendbaren Component-API-Patterns für Design-Systeme und Komponentenbibliotheken zu entwickeln.

Die interaction-design Skill unterstützt Teams dabei, zielgerichtete UI-Motion, Mikrointeraktionen, Übergänge, Ladezustände und Feedback-Muster zu gestalten und umzusetzen – mit praxisnahen, React-orientierten Referenzen und konkreten Anwendungshinweisen.

Die Skill web-component-design unterstützt Teams beim Entwurf wiederverwendbarer UI-Komponenten für React, Vue und Svelte – mit starken API-Mustern, Hinweisen zur Barrierefreiheit und Referenzen zu Styling-Abwägungen für Designsysteme.

react-state-management ist ein praxisnaher Skill zur Auswahl und Nutzung von React-State-Tools wie Redux Toolkit, Zustand, Jotai, React Query, SWR und RTK Query – abgestimmt auf State-Typ, App-Größe und Migrationsanforderungen.

nextjs-app-router-patterns unterstützt Entwickler bei der Planung von Next.js-14+-App-Router-Architekturen, einschließlich Server Components, Streaming, Caching, Route Handlers und Server Actions für Full-Stack-Entwicklung und Migrationen vom Pages Router.

react-native-architecture unterstützt bei der Planung produktiver React Native- und Expo-Apps mit Routing, klaren State-Grenzen, nativen Modulen, Offline-First-Flows sowie den Abwägungen zwischen Expo und Bare.

react-modernization ist ein migrationsorientiertes Skill für das Upgrade von React-16/17-Apps auf 18+, die Umstellung von Klassenkomponenten auf Hooks, die Aktualisierung der Root-APIs und die Planung schrittweiser Refactorings mit codemod-orientierter Anleitung.

vercel-react-native-skills ist ein React-Native- und Expo-Skill für performanceorientierte Frontend-Entwicklung. Nutze ihn, um Listen-Rendering, Animationen, Navigation, UI-Patterns, State Management und das Setup nativer Module zu verbessern. Er bietet praxisnahe Regeln, Installationshinweise und Nutzungsmuster, um Mobile-App-Engpässe mit weniger Rätselraten zu lösen.

vercel-composition-patterns ist eine React-Composition-Skill für Frontend-Entwicklung, die dabei hilft, ein Übermaß an Boolean-Props durch Compound Components, explizite Varianten, hochgezogenen State und React-19-sichere APIs zu ersetzen. Nutze sie, um die Component-Architektur zu prüfen, wiederverwendbare UI-APIs zu verbessern und das passende Composition-Pattern für skalierbaren Frontend-Code auszuwählen.

vercel-react-best-practices ist ein Vercel-Engineering-Skill, der KI-Agenten mit priorisierten Regeln zu Waterfalls, Bundle-Größe und Rendering hilft, React- und Next.js-Performance zu optimieren.

overdrive ist ein GitHub-Skill für anspruchsvolle UI-Design-Arbeit mit Fokus auf Kontext, proposal-first Planung und außergewöhnliche Interaktionsqualität. Nutze ihn, um overdrive für cineastische Übergänge, responsive Interfaces und wirkungsstarke Produkterlebnisse zu installieren und einzusetzen.

Der optimize Skill analysiert und behebt UI-Performance-Probleme bei Ladezeiten, Rendering, Animationen, Bildern und Bundle-Größe. Nutze ihn, wenn du einen strukturierten optimize-Leitfaden zur Performance-Optimierung brauchst, der mit Messungen beginnt und langsame, ruckelige oder hakelige Web-Erlebnisse systematisch untersucht.

Die source-driven-development Skill verankert frameworkspezifische Entwicklung in offiziellen Dokumentationen und hilft dabei, Patterns vor der Implementierung zu verifizieren. Sie eignet sich besonders für den Einsatz von source-driven-development in React, Vue, Next.js, Svelte, Angular und ähnlichen Stacks, wenn Korrektheit, belastbare Quellen und versionssensible Entscheidungen wichtig sind.

Die performance-optimization Skill hilft dir, zuerst zu messen, den eigentlichen Engpass zu finden, ihn zu beheben und die Ergebnisse zu überprüfen. Nutze sie, wenn Leistungsanforderungen bestehen, du eine Regression vermutest oder Core Web Vitals, Ladezeiten oder Interaktionslatenz verbessert werden müssen.