sickn33/tailwind-design-system

Que fait tailwind-design-system ?

Construisez des systèmes de design prêts pour la production avec Tailwind CSS, incluant des jetons de design, des variantes de composants, des motifs responsifs et l'accessibilité.

Aperçu

Ce skill vous aide à créer un système de design cohérent et évolutif avec Tailwind CSS. Il vous guide à travers la définition de jetons de design (couleurs, espacements, typographie), la création de variantes de composants (états, tailles, thèmes), la mise en place de motifs responsifs (grilles, points de rupture), et l'intégration de bonnes pratiques d'accessibilité (contraste, focus, rôles ARIA).

Utilisation

Pour utiliser ce skill, appelez-le avec une description de votre système de design souhaité. Par exemple :

/tailwind-design-system Créez un système de design pour une application de tableau de bord avec une charte graphique existante (couleurs primaire bleue et secondaire verte).

Exemple de sortie

L'agent générera du code Tailwind CSS prêt à l'emploi, comme :

<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <header class="bg-primary-600 text-white shadow-lg">
      <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl font-bold tracking-tight">Tableau de bord</h1>
      </div>
    </header>
    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <!-- Contenu du tableau de bord -->
    </main>
  </div>
</template>

<style>
@layer base {
  :root {
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-secondary-50: #f0fdf4;
    --color-secondary-100: #dcfce7;
    --color-secondary-200: #bbf7d0;
    --color-secondary-300: #86efac;
    --color-secondary-400: #4ade80;
    --color-secondary-500: #22c55e;
    --color-secondary-600: #16a34a;
    --color-secondary-700: #15803d;
    --color-secondary-800: #166534;
    --color-secondary-900: #14532d;
  }
}
</style>

Fonctionnalités

• Gestion des jetons de design : Définissez des couleurs, espacements, typographies et ombres personnalisées.
• Variantes de composants : Créez des composants avec différents états (hover, focus, actif), tailles (sm, md, lg) et thèmes (clair, sombre).
• Motifs responsifs : Implémentez des grilles, points de rupture et mises en page adaptatives.
• Accessibilité : Ajoutez des contrastes optimisés, des styles de focus visibles et des rôles ARIA.
• Documentation intégrée : Incluez des commentaires et des descriptions pour chaque jeton ou composant.

Compatibilité

• Frameworks : Next.js, Nuxt, Vue, React, Svelte, Astro, etc.
• Version de Tailwind CSS : 3.x ou ultérieure (supporte les configurations avancées).
• Environnements : Projets HTML, CSS ou JavaScript/TypeScript.

Bonnes pratiques

1. Commencez par définir vos jetons de design dans tailwind.config.js.
2. Utilisez des couleurs nommées sémantiquement (ex: primary, secondary, danger).
3. Appliquez les motifs responsifs en priorité pour les appareils mobiles.
4. Testez l'accessibilité avec des outils comme Lighthouse ou axe.
5. Documentez chaque composant avec des exemples d'utilisation.

Dépannage

• Problème : Les couleurs personnalisées ne s'affichent pas. Solution : Vérifiez que la configuration est bien exportée dans tailwind.config.js.
• Problème : Les variantes ne fonctionnent pas correctement. Solution : Assurez-vous que les classes sont écrites dans le bon ordre (ex: hover:bg-primary-600).

Licence

MIT