tailwind-design-system
Tailwind-Designsysteme erstellen
Designsysteme driften oft ohne klare Tokens und Patterns auseinander. Diese Skill bietet Tailwind-Strukturen zur Standardisierung von Komponenten, Themes und responsiven Layouts in deiner Codebasis.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "tailwind-design-system". Set up a Tailwind design system with tokens and a button pattern
Erwartetes Ergebnis:
- Semantische Farb-Tokens und Radius-Variablen für Light- und Dark-Themes definiert
- CVA-Button mit Varianten, Größen und Focus-Ring-Verhalten skizziert
- Accessibility-Notes für Tastaturnavigation und Error-States inkludiert
Verwendung von "tailwind-design-system". Create a dark mode implementation for a React app
Erwartetes Ergebnis:
- ThemeProvider mit CSS-Variablen und localStorage bereitgestellt
- Theme-Toggle-Komponente mit Icon-Wechsel gezeigt
- System-Preference-Detection mit matchMedia inkludiert
Verwendung von "tailwind-design-system". Build accessible form components with error states
Erwartetes Ergebnis:
- Input-Komponente mit aria-invalid und Error-Messaging erstellt
- Label-Komponente mit proper htmlFor-Association hinzugefügt
- Focus-Ring-Utilities für Tastaturnavigation inkludiert
Sicherheitsaudit
SicherPure documentation skill with no executable code. Contains only markdown guidance and code examples for Tailwind CSS design systems. The static analyzer's 100/100 risk score is a false positive caused by misinterpreting Tailwind CSS opacity syntax (e.g., bg-primary/90) as cryptographic algorithms, and TypeScript template literals as shell backticks. The skill-report.json already contains a completed security audit confirming this skill is safe.
Risikofaktoren
🌐 Netzwerkzugriff (5)
⚙️ Externe Befehle (25)
Qualitätsbewertung
Was du bauen kannst
Team-Komponenten standardisieren
Gemeinsame Tailwind-Tokens und Base-Komponenten erstellen, um mehrere Produktteams zu alignieren.
Token-Architektur aufbauen
Brand-Farben auf semantische Tokens mappen und an Tailwind-Theme-Konfiguration anbinden.
Responsive Layouts ausliefern
Grid- und Container-Patterns verwenden, um Layouts konsistent über Breakpoints zu skalieren.
Probiere diese Prompts
Erstelle ein Tailwind-Token-Setup mit semantischen Farben und Radius-Variablen für Light- und Dark-Themes.
Entwurf CVA-Button-Varianten mit Größen, States und Accessibility-Notes für eine geteilte Komponenten-Bibliothek.
Stelle Input- und Label-Komponenten-Patterns mit Fehlerbehandlung und ARIA-Guidance bereit.
Definiere ein responsives Grid und Container-Utility-Pattern für Produktkarten über Breakpoints hinweg.
Bewährte Verfahren
- Semantische Tokens verwenden und an CSS-Variablen für Runtime-Theming mappen
- Komponenten-Varianten und Default-States klar für den Team-Konsum dokumentieren
- Focus-States und Tastaturnavigation auf allen interaktiven Komponenten testen
Vermeiden
- Brand-Farben direkt in Komponenten-Klassen hardcoden statt Tokens zu verwenden
- Dark-Mode-Token-Definitionen und Tests überspringen
- Beliebige Werte wie bg-[#123456] verwenden statt das Theme zu erweitern