Tailwind Design System (v4)
Ce skill fait partie du plugin frontend-mobile-development du repo wshobson/agents, un écosystème de 153 skills spécialisés pour Claude Code. Il fournit à Claude un guide de référence structuré pour créer des design systems production-ready avec Tailwind CSS v4, en couvrant la configuration CSS-first, les design tokens, les variantes de composants et les patterns d'accessibilité.
Ce que contient ce skill
Contrairement à un simple squelette, ce SKILL.md est substantiellement documenté. Il aborde :
- La migration v3 → v4 via un tableau comparatif des patterns (fichier de config remplacé par
@themeen CSS, nouveaux modes sombre avec@custom-variant, animations natives, etc.). - Un Quick Start complet avec une configuration CSS de référence utilisant des tokens OKLCH pour les couleurs, les rayons et les animations.
- Quatre patterns d'implémentation détaillés : composants CVA (Class Variance Authority), compound components React 19, formulaires avec React Hook Form + Zod, et un système de grille responsive.
- Des fonctions utilitaires (
cn,focusRing,disabled) prêtes à l'emploi. - Des renvois vers un fichier
references/advanced-patterns.mdpour les patterns avancés (animations natives, dark mode, migration complète).
Comment ce skill est utilisé
Dans l'architecture du repo, les skills se chargent de façon progressive : ils ne sont activés dans le contexte de Claude que lorsqu'une tâche le justifie. Ce skill s'active typiquement lorsque l'on crée une bibliothèque de composants, que l'on standardise des patterns UI, ou que l'on migre un projet de Tailwind v3 vers v4. Il cible explicitement React 19 (ref comme prop standard, sans forwardRef).
Pour utiliser ce skill, installez le plugin frontend-mobile-development via la commande /plugin install frontend-mobile-development dans Claude Code, puis laissez Claude y faire référence lors de tâches de design system ou de développement frontend.