tailwind-design-system

Aperçu

Qu'est-ce que tailwind-design-system ?

tailwind-design-system est une compétence pratique pour construire des systèmes de design évolutifs et prêts pour la production avec Tailwind CSS v4. Elle met l'accent sur une configuration CSS-first, les tokens de design, les variantes de composants, les modèles responsives et l'accessibilité. Cette compétence s'adresse aux développeurs frontend, designers UI et équipes souhaitant standardiser leurs patterns d'interface ou migrer de Tailwind v3 à v4.

À qui s'adresse cette compétence ?

• Équipes frontend créant des bibliothèques de composants avec Tailwind CSS v4
• Développeurs implémentant des tokens de design et du theming
• Designers UI construisant des composants responsives et accessibles
• Projets standardisant les patterns UI à travers plusieurs bases de code
• Équipes migrant de Tailwind v3 à v4

Quels problèmes résout-elle ?

• Simplifie la mise en place de systèmes de design évolutifs
• Fournit des conseils sur les patterns spécifiques à v4 et la migration
• Aide à standardiser les composants UI et les tokens de design
• Soutient les bonnes pratiques d'accessibilité et de design responsive

Comment l'utiliser

Étapes d'installation

1. Installez tailwind-design-system avec :

   npx skills add https://github.com/wshobson/agents --skill tailwind-design-system
   

2. Commencez par consulter le fichier SKILL.md pour un aperçu du workflow et des concepts clés.
3. Explorez les fichiers complémentaires :
   • README.md pour l'utilisation générale
   • AGENTS.md pour les conseils spécifiques aux agents
   • metadata.json pour les détails de configuration
   • references/advanced-patterns.md pour les patterns avancés de Tailwind v4

Fichiers et dossiers clés

• SKILL.md : workflow principal et aperçu
• references/advanced-patterns.md : usages avancés, incluant animations CSS natives, mode sombre, utilitaires personnalisés et conseils de migration
• references/ : guides et patterns supplémentaires

Adapter à votre projet

• Utilisez cette compétence comme modèle pour votre propre dépôt et vos outils
• Personnalisez les tokens de design, variantes de composants et modèles responsives selon vos besoins UI
• Référez-vous aux patterns avancés pour implémenter animations et fonctionnalités d'accessibilité

Exemple : Patterns avancés Tailwind v4

• Apprenez à utiliser les animations CSS natives avec @starting-style
• Implémentez le mode sombre via des variantes CSS personnalisées
• Construisez des dialogues et popovers accessibles avec React et Radix UI

FAQ

tailwind-design-system est-il compatible avec Tailwind v3 ?

Non, cette compétence est optimisée pour Tailwind CSS v4. Pour les projets en v3, consultez le guide officiel de mise à niveau.

Quels sont les principaux avantages de tailwind-design-system ?

• Accélère la création de systèmes de design UI évolutifs et cohérents
• Offre des patterns à jour pour Tailwind v4, incluant theming CSS-first et design responsive
• Propose des exemples avancés pour animations, accessibilité et mode sombre

Où trouver des exemples d'utilisation avancée ?

Consultez le fichier references/advanced-patterns.md pour des exemples de code détaillés et des checklists de migration.

Comment prévisualiser toutes les ressources disponibles ?

Ouvrez l'onglet Fichiers pour explorer l'arborescence complète, incluant les références imbriquées et scripts d'aide. Cela vous aide à comprendre la structure de la compétence et à l'adapter à votre workflow.

Quand tailwind-design-system n'est-il pas adapté ?

Si votre projet utilise un autre framework CSS ou n'est pas prêt à migrer vers Tailwind v4, cette compétence peut ne pas convenir. Elle se concentre sur les patterns et workflows spécifiques à Tailwind v4.