design-tokens

design-tokens

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

En une phrase

Créer/maintenir des design tokens (light/dark), conventions de nommage, mapping CSS variables et intégration Tailwind. À utiliser dès qu’un design system/theming est nécessaire.

Quand l'utiliser

• Voir la description ci-dessus et la section « Pour aller plus loin ».

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 demande explicite

Pour aller plus loin

Design Tokens

Objectif

Produire 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, text, primary…).
• Toujours prévoir dark mode (mêmes rôles, valeurs adaptées).
• Toujours fournir : tokens.json + :root CSS vars + mapping Tailwind.

Procédure

1. Définir les rôles sémantiques :
   • color: bg/surface/elevated/text/muted/border/primary/accent/danger/success/warn
   • typography: font.display / font.body / sizes / leading
   • spacing: scale (ex: 4/8 base)
   • radius: xs/sm/md/lg/xl/2xl
   • shadow: sm/md/lg (cohérents)
   • motion: duration/ease (si demandé)
2. Générer :
   • tokens.json (structure simple)
   • CSS vars :root + [data-theme="dark"]
   • tailwind.config mapping (colors: hsl(var(--...)) si HSL)

Output attendu

1. tokens.json (copiable)

(extrait — voir le SKILL.md complet pour la suite)

Source

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