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.

design-taste-frontend-v1 ist die ursprüngliche Taste-Skill für anspruchsvolle Frontend-Arbeit und wird zur exakten Rückwärtskompatibilität beibehalten. Sie hilft dabei, React-/Next.js-orientierten UI-Code mit klareren Designentscheidungen, Dependency-Prüfungen und praktischen Leitplanken zu erzeugen. Verwenden Sie diese design-taste-frontend-v1 Skill, wenn Sie das ältere Verhalten statt des experimentellen v2-Rewrites benötigen.

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.