design-tokens

design-tokens

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

En une phrase

Créer/maintenirProduit desun système de design tokens versionnable (light/dark),couleurs, conventionstypo, deespacements, nommage,radius, ombres) avec dark mode intégré, livré en JSON + variables CSS + mapping CSSTailwind variablesprêts età intégration Tailwind. À utiliser dès qu’un design system/theming est nécessaire.brancher.

Quand l'utiliser

• VoirAu 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 descriptioncréation ci-dessusdes composants Quand tu veux ajouter un mode sombre proprement sans tout refaire Si tu utilises Tailwind et laveux sectionque «les Pourclasses aller(bg-primary, plustext-muted) loinpointent ».vers des variables CSS modifiables

Comment l'invoquer

• Slash command : /design-tokens (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— dès qu'un design system ou theming est nécessaire

PourDescription aller plus loin

Design Tokens

Objectifdétaillée

ProduireUn 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 réutilisables : sémantiques > bruts, compatibles CSS variables et intégrables en Tailwind.

Règles

Séparer tokens de référence (raw) et tokens sémantiques (bg,les text,rôles primary…: primary: var(--blue-500)). ToujoursC'est prévoircette 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,rôles avec des valeurs adaptées).adaptées. Toujours

Il fournirgénère ensuite trois sorties cohérentes entre elles : un tokens.json +à versionner dans Git, des CSS variables sur :root CSSet vars[data-theme="dark"], +et mappingun Tailwind.

snippet de

Procédure

configuration

Tailwind Définiravec colors: { primary: 'hsl(var(--color-primary))' }. Les rôles couverts incluent les rôlescouleurs sémantiques :

color: (bg/surface/elevated/text/muted/border/primary/accent/danger/success/warnwarn), typography:la font.typo (display /vs font.bodybody, /sizes, sizesleading), /le leading spacing: scalespacing (ex:base 4/84 base)ou radius:8), xs/sm/md/lg/xl/2xlles shadow: sm/md/lgradius (cohérents)xs motion:à duration/ease2xl), (siles demandé)shadows et optionnellement Générerle motion. Pour Thymon :

tokens.json (structure simple) CSS vars :root + [data-theme="dark"] tailwind.config mapping (colors: hsl(var(--...)) si HSL)

Output attendu

tokens.json (copiable)

(extrait — voir le SKILL.md complet pourc'est la suite)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