tailwind-design-system
Créer des systèmes de design Tailwind
Les systèmes de design dérivent souvent sans jetons et modèles clairs. Cette compétence fournit des structures Tailwind pour standardiser les composants, les thèmes et les mises en page responsives dans votre base de code.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "tailwind-design-system". Configurer un système de design Tailwind avec des jetons et un modèle de bouton
Résultat attendu:
- Définition des jetons de couleurs sémantiques et des variables de rayon pour les thèmes clair et sombre
- Décrivez un bouton CVA avec des variantes, des tailles et un comportement de anneau de focus
- Inclusion des notes d'accessibilité pour la navigation au clavier et les états d'erreur
Utilisation de "tailwind-design-system". Créer une implémentation du mode sombre pour une application React
Résultat attendu:
- Fourniture d'un ThemeProvider utilisant les variables CSS et localStorage
- Affichage du composant de changement de thème avec commutation d'icône
- Inclusion de la détection de préférence du système avec matchMedia
Utilisation de "tailwind-design-system". Créer des composants de formulaire accessibles avec des états d'erreur
Résultat attendu:
- Création du composant Input avec aria-invalid et messages d'erreur
- Ajout du composant Label avec l'association htmlFor appropriée
- Inclusion des utilitaires d'anneau de focus pour la navigation au clavier
Audit de sécurité
SûrPure 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.
Facteurs de risque
🌐 Accès réseau (5)
⚙️ Commandes externes (25)
Score de qualité
Ce que vous pouvez construire
Standardiser les composants de l'équipe
Créer des jetons Tailwind partagés et des composants de base pour aligner plusieurs équipes produit.
Construire l'architecture des jetons
Mapper les couleurs de marque aux jetons sémantiques et les connecter à la configuration du thème Tailwind.
Livrer des mises en page responsives
Utiliser les modèles de grille et de conteneur pour mettre à l'échelle les mises en page de manière cohérente sur tous les points de rupture.
Essayez ces prompts
Créer une configuration de jetons Tailwind avec des couleurs sémantiques et des variables de rayon pour les thèmes clair et sombre.
Concevoir des variantes de boutons CVA avec les tailles, les états et les notes d'accessibilité pour une bibliothèque de composants partagée.
Fournir des modèles de composants d'entrée et d'étiquette avec la gestion des erreurs et les recommandations ARIA.
Définir un modèle d'utilitaires de conteneur et de grille responsive pour les cartes produit sur tous les points de rupture.
Bonnes pratiques
- Utiliser des jetons sémantiques et les mapper aux variables CSS pour la thématisation à l'exécution
- Documenter clairement les variantes de composants et les états par défaut pour l'équipe
- Tester les états de focus et la navigation au clavier sur tous les composants interactifs
Éviter
- Coder en dur les couleurs de marque directement dans les classes de composants au lieu d'utiliser des jetons
- Sauter les définitions de jetons pour le mode sombre et les tests
- Utiliser des valeurs arbitraires comme bg-[#123456] au lieu d'étendre le thème