In den eigenen Worten des Skills
Erstellt produktionsreife Benutzeroberflächen, die barrierefrei, performant und visuell ausgefeilt sind. Das Skill konzentriert sich darauf, eine UI zu schaffen, die wirkt, als sei sie von einem designbewussten Engineer in einem Top-Unternehmen gebaut worden – nicht so, als sei sie von einer KI generiert. Es erzwingt echte Einhaltung des Design-Systems, korrekte WCAG 2.1 AA-Barrierefreiheit, durchdachte Interaktionsmuster und vermeidet generische KI-Ästhetik-Klischees.
Das Skill deckt Komponentenarchitektur mit Colocation, Komposition statt Konfiguration, State-Management von lokalem useState bis zu globalen Stores, responsives Mobile-First-Design mit Tests an bestimmten Breakpoints, Tastaturnavigation, ARIA-Labels, Fokus-Management, aussagekräftige Leer- und Fehlerzustände, Skeleton-Loading und optimistische Updates für gefühlte Geschwindigkeit ab.
Was er erzeugt
- Skeleton-Loading-Zustände mit aria-busy und aria-label für Inhalte, die geladen werden
- Aussagekräftige Leer- und Fehlerzustände mit role="status", beschreibendem Text, Icons und umsetzbaren nächsten Schritten
So funktioniert es
- 01Komponentendateien Colocaten
Platzieren Sie die Komponentenimplementierung, Tests, Stories, Custom Hooks und Types zusammen in einem einzigen Ordner, der nach der Komponente benannt ist.
- 02Komponenten Komponieren, Nicht Konfigurieren
Bauen Sie komponierbare Komponenten-APIs mit verschachtelten Children statt prop-schweren Konfigurationsobjekten.
- 03Datenabruf von Präsentation Trennen
Erstellen Sie Container-Komponenten, die Datenladen, Fehler und Leerzustände behandeln, und übergeben Sie dann bereinigte Daten an Präsentationskomponenten.
- 04State-Management nach Geltungsbereich Wählen
Verwenden Sie useState für komponentenspezifischen UI-Zustand, gelifteten Zustand für 2-3 Geschwister-Komponenten, Context für Theme/Auth/Locale, URL-Zustand für Filter und Pagination, Server-State-Bibliotheken für Remote-Daten und globale Stores für komplexen geteilten Client-Zustand.
- 05Design-System-Tokens Befolgen
Verwenden Sie semantische Farb-Tokens wie text-primary und bg-surface statt roher Hex-Werte, pflegen Sie eine konsistente Abstandsskala in 0,25rem-Schritten und respektieren Sie die Typenhierarchie.
- 06WCAG 2.1 AA-Barrierefreiheit Umsetzen
Machen Sie jedes interaktive Element per Tastatur zugänglich, fügen Sie ARIA-Labels zu unbeschrifteten Steuerelementen hinzu, verwalten Sie den Fokus bei Inhaltsänderungen, stellen Sie einen Kontrast von 4,5:1 für normalen Text sicher und bieten Sie aussagekräftige Leer- und Fehlerzustände.