Frontend

ui-demo hilft dir, hochwertige Demo-Videos von Web-Apps mit Playwright, sichtbarer Mausbewegung und natürlichem Timing aufzunehmen. Nutze die ui-demo Skill für Walkthroughs, Onboarding-Clips, Feature-Touren und tutorialartige Aufnahmen. Folge dem Workflow aus discover, rehearse und record für zuverlässige Ergebnisse, besonders bei Prototypen und schnell veränderlichen UIs.

nuxt4-patterns ist ein Nuxt-4-Skill für Hydration-Sicherheit, Route Rules, Lazy Loading und SSR-sicheres Data Fetching. Verwende den nuxt4-patterns Skill, um bessere Frontend-Entscheidungen zu treffen, Mismatches zu reduzieren und für jede Seite oder Komponente das passende Pattern anzuwenden.

Das nextjs-turbopack Skill hilft dir, Turbopack in Next.js 16+ für schnellere lokale Entwicklung, HMR und Entscheidungen rund um den Bundler einzusetzen. Nutze es als praxisnahen nextjs-turbopack Leitfaden für Installation, Nutzung und die Frage, wann du in Frontend-Development-Workflows wieder zu webpack wechseln solltest.

healthcare-emr-patterns ist ein praxisorientiertes Skill für das EMR/EHR-Design im Gesundheitswesen. Es behandelt Patientenkontakt-Workflows, klinische Dokumentation, Medikationsprüfungen, das Hervorheben von Laborwerten, Audit-Trails, CDSS-Integration und barrierefreie medizinische Datenerfassung für sicherere Arbeitsabläufe im klinischen Alltag.

gan-style-harness ist ein Generator-Evaluator-Skill für Agent Orchestration, der beim Aufbau vollständiger Apps mit strengerer Kritik, besseren Iterationen und weniger Schwachstellen hilft. Verwenden Sie ihn, wenn Sie den gan-style-harness-Skill für frontendlastige, Full-Stack- oder produktionsorientierte Arbeit benötigen, bei der Review-Qualität wichtiger ist als Geschwindigkeit.

frontend-slides hilft dir, animationsreiche HTML-Präsentationen von Grund auf zu erstellen oder PowerPoint-Dateien zu konvertieren. Nutze die frontend-slides-Skill für Talks, Pitch-Decks, Workshops, interne Demos und frontend-slides for UI Design, wenn du visuelle Exploration, Browser-Ausgabe ohne Abhängigkeiten und Folien willst, die genau in einen Viewport passen.

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.

Nutze frontend-design, um markante Frontend-Oberflächen in Produktionsqualität mit einer klaren visuellen Haltung zu gestalten. Diese Skill ist für Landingpages, Dashboards, App-Shells und Komponenten gedacht, bei denen Hierarchie, Typografie, Bewegung und Feinschliff genauso wichtig sind wie die Implementierung. Enthalten sind Installations- und Nutzungshinweise für designorientierte UI-Arbeit.

dart-flutter-patterns ist ein praxisnahes Dart- und Flutter-Skill für die Frontend-Entwicklung und deckt Null Safety, immutable Zustände, asynchrone Komposition, Widget-Struktur, State Management, GoRouter-Navigation, Dio-Netzwerkzugriffe, Tests und Clean Architecture ab. Nutze den dart-flutter-patterns-Guide, um produktionsreife Patterns für neue Features und Refactorings auszuwählen.

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.

Die bun-runtime-Skill hilft dir bei der Entscheidung, ob Bun für neue JavaScript- oder TypeScript-Projekte, die Migration von Node, Skripte, Tests und Vercel-Setups die richtige Wahl ist. Sie behandelt die Nutzung von bun-runtime, Installationshinweise, die Abwägung Bun vs Node sowie praktische Workflows für Frontend- und Full-Stack-Entwicklung.

browser-qa ist ein Browser-QA-Skill für visuelle Tests nach dem Deployment, Interaktionsprüfungen, responsive Screenshots und Accessibility-Reviews mit Browser-Automatisierung. Er hilft Frontend-Entwicklern und QA-Teams, Staging- oder Preview-Seiten mit einem wiederholbaren browser-qa-Guide zu verifizieren, statt mit einem generischen Prompt.

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.

webapp-testing ist eine Skill zum Testen lokaler Webapps mit Python Playwright. Sie unterstützt Agents dabei, Server mit `scripts/with_server.py` zu starten, die gerenderte UI zu prüfen, Selektoren zu finden, Screenshots und Console-Logs zu erfassen und Frontend-Verhalten in einem Reconnaissance-first-Workflow zu validieren.

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 benchmark-Skill hilft dabei, Performance-Regressionen in Web- und App-Workflows zu erkennen. Nutze es, um eine Baseline festzulegen, Vorher-Nachher-Änderungen zu vergleichen und zu prüfen, ob ein PR Seiten langsamer, schwerer oder weniger stabil gemacht hat. Es ist ein praxisnaher Benchmark-Leitfaden für Performance-Optimierung, Core Web Vitals, Lighthouse-Checks, Bundle-Größe und Ladezeit-Trends.

migrate-to-shoehorn hilft dir dabei, `as`-Typecasts in TypeScript-Tests durch @total-typescript/shoehorn zu ersetzen, um sicherere partielle Test-Fixtures zu nutzen. Verwende diese migrate-to-shoehorn-Skill, wenn du Cast-lastige Testdaten bereinigen, dem migrate-to-shoehorn-Guide folgen oder migrate-to-shoehorn für Testautomatisierung standardisieren möchtest.

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.

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.

Nutze ckm:slides, um grobe Ideen in strategische HTML-Slide-Decks zu verwandeln – mit Slide-Strategien, Copywriting-Formeln, Layout-Patterns und einer Chart.js-fähigen Vorlage.

ckm:design-system unterstützt dich beim Aufbau dreistufiger Tokens, Component Specs, CSS-Variablen, Tailwind-Mappings und markenkonsistenter Slides auf Basis einer klaren Token-Architektur.

Die Skill accessibility-compliance unterstützt Teams dabei, Web- oder Mobile-UIs zu prüfen und zu verbessern – mit praxisnahen Empfehlungen zu WCAG 2.2, ARIA, Tastaturbedienung, Screenreadern und mobiler Barrierefreiheit. Besonders geeignet für UX-Audits, Component-Fixes und direkt umsetzbare Handlungsempfehlungen.

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.