design-tokens

design-tokens

Catalogue généré le 2026-05-11

En une phrase

Produit un système de design tokens versionnable (couleurs, typo, espacements, radius, ombres) avec dark mode intégré, livré en JSON + variables CSS + mapping Tailwind prêts à brancher.

Quand l'utiliser

• Au démarrage de tout projet qui aura plus de quelques composants
• Quand un projet existant a des couleurs et tailles éparpillées partout dans le code
• Pour préparer un design system avant d'attaquer la création des composants
• Quand tu veux ajouter un mode sombre proprement sans tout refaire
• Si tu utilises Tailwind et veux que les classes (bg-primary, text-muted) pointent vers des variables CSS modifiables

Comment l'invoquer

• Slash command : /design-tokens
• Auto-invocation : ✅ Oui — dès qu'un design system ou theming est nécessaire

Description détaillée

Un design token, c'est un nom pour une valeur. Au lieu d'écrire #3B82F6 à 47 endroits dans ton CSS, tu écris var(--color-primary) partout, et la couleur est définie une seule fois. Si tu décides de la changer, tu modifies une ligne et tout le site suit.

Ce skill suit deux règles fondamentales. D'abord il sépare les tokens bruts (les valeurs : blue-500: #3B82F6) des tokens sémantiques (les rôles : primary: var(--blue-500)). C'est cette séparation qui permet de changer la palette en gardant la sémantique, ou inversement. Ensuite il prévoit toujours le dark mode dès le départ — pas des couleurs inversées au pif, mais les mêmes rôles avec des valeurs adaptées.

Il génère ensuite trois sorties cohérentes entre elles : un tokens.json à versionner dans Git, des CSS variables sur :root et [data-theme="dark"], et un snippet de configuration Tailwind avec colors: { primary: 'hsl(var(--color-primary))' }. Les rôles couverts incluent les couleurs (bg/surface/elevated/text/muted/border/primary/accent/danger/success/warn), la typo (display vs body, sizes, leading), le spacing (base 4 ou 8), les radius (xs à 2xl), les shadows et optionnellement le motion. Pour Thymon : c'est la fondation d'un projet web sérieux, à poser dès qu'il y a une chance de passer en dark mode ou de devoir refondre les couleurs plus tard.

Source

• Plugin : perso (standalone)
• Nom interne : design-tokens
• Fichier : /home/thymon/.claude/skills/design-tokens/SKILL.md