Design-System-Engineering-Prinzipien

# Design System Geschmack eines pragmatischen Design-Systems-Engineers - Definiere Design-Tokens für Farbe, Abstand, Typografie, Radius und Bewegung in einer Quelldatei und generiere daraus CSS-Variablen und Plattform-Ausgaben. Konfidenz: 0,90 - Benenne Tokens nach Zweck, wie color-text-muted oder space-inset-md, nicht nach rohem Wert wie gray-500 oder 16px. Konfidenz: 0,85 - Unterstütze helle und dunkle Themes durch Austausch semantischer Token-Werte, niemals durch Überschreiben einzelner Komponentenstile. Konfidenz: 0,90 - Baue Komponenten auf zugänglichen Headless-Primitiven wie Radix UI oder React Aria auf, anstatt Fokus- und Tastaturlogik neu zu implementieren. Konfidenz: 0,85 - Erfülle WCAG 2.2 AA-Kontrast für jede Token-Paarung und prüfe dies automatisch bei Token-Änderungen. Konfidenz: 0,90 - Halte die Komponenten-API klein: Einige gut benannte Varianten und Größen schlagen Dutzende boolescher Props. Konfidenz: 0,85 - Bevorzuge Komposition mit Slots oder Children gegenüber Konfigurationsobjekten für komplexe Komponenten wie Dialoge und Menüs. Konfidenz: 0,80 - Leite Refs weiter und verteile restliche Props auf das Wurzelelement, damit Komponenten mit Formularen, Tooltips und Tests funktionieren. Konfidenz: 0,85 - Härte niemals Farben, Abstände oder Schriftgrößen innerhalb von Komponenten; prüfe mit Stylelint oder einer ESLint-Regel auf rohe Werte. Konfidenz: 0,85 - Dokumentiere jede Komponente in Storybook mit Nutzungshinweisen, Do- und Don't-Beispielen und Live-Controls. Konfidenz: 0,85 - Führe visuelle Regressionstests mit Chromatic oder Playwright-Screenshots bei jedem Pull-Request durch. Konfidenz: 0,80 - Führe automatisierte Barrierefreiheitsprüfungen mit axe in Komponententests durch und teste Tastatur- und Screenreader-Abläufe vor der Veröffentlichung weiterhin manuell. Konfidenz: 0,85 - Veröffentliche die Bibliothek als versioniertes Paket mit semantischer Versionierung und einem von Changesets generierten Changelog. Konfidenz: 0,90 - Behandle ein umbenanntes Prop oder eine entfernte Variante als Breaking Change und liefere Codemods für große Migrationen. Konfidenz: 0,75 - Veralte vor dem Entfernen: Markiere die alte API, protokolliere eine Entwicklungswarnung und entferne sie in der nächsten Hauptversion. Konfidenz: 0,85 - Liefere ESM mit tree-shakebaren komponentenbezogenen Einstiegspunkten und markiere CSS-Dateien korrekt als Side Effects. Konfidenz: 0,80 - Respektiere prefers-reduced-motion und halte Bewegungstokens kurz und zweckmäßig. Konfidenz: 0,80 - Halte Icons als separates Paket optimierter SVG-Komponenten mit konsistenten Größen- und Strich-Tokens. Konfidenz: 0,75 - Verwende logische CSS-Eigenschaften wie margin-inline-start, damit Komponenten in rechts-nach-links-Layouts funktionieren. Konfidenz: 0,75 - Halte Figma-Komponenten und Code-Komponenten synchron, indem du Token-Namen teilst und Drift bei jeder Veröffentlichung überprüfst. Konfidenz: 0,70 - Miss die Akzeptanz, indem du Produkt-Repositories auf Bibliotheksimporte und einmalige Überschreibungen scannst. Konfidenz: 0,65 - Akzeptiere Beiträge über eine kurze Vorschlagsvorlage, die vor jeglichem Code Anwendungsfall, API und Barrierefreiheit abdeckt. Konfidenz: 0,70