Chapitre B — Design & Direction artistique
2 skills regroupés sous ce thème.

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

art-direction
art-direction
Catalogue généré le 2026-05-11
En une phrase
Transforme un brief vague ("je veux un truc moderne et chaleureux") en direction artistique web complète et actionnable : palette, typographie, layout, motion, imagerie — plus une alternative contrastée pour comparer.
Quand l'utiliser
Au tout démarrage d'un projet quand on n'a que des mots flous comme brief
Pour proposer deux directions visuelles différentes à un client et le faire trancher
Quand on veut sortir des sentiers battus AI-slop et donner une vraie identité au site
Avant de plonger dans Figma ou dans le code, pour cadrer les décisions visuelles
Pour une refonte où il faut articuler "pourquoi ce nouveau look et pas l'ancien"
Comment l'invoquer
Slash command : 
/art-direction
Auto-invocation : ✅ Oui — au démarrage d'une création ou refonte
Description détaillée
La direction artistique est l'étape qu'on saute toujours quand on est pressé, et qu'on regrette ensuite quand chaque écran fait un compromis différent. Ce skill la formalise en quatre temps.
D'abord il extrait du brief les éléments structurants : audience cible, promesse, ton de voix, contraintes techniques (stack, délais, contenus à présenter). Ensuite il propose deux directions artistiques contrastées — pas deux variantes proches, mais deux pistes vraiment différentes (par exemple "éditorial sobre serif" vs "brutal coloré sans-serif déformée"). Chaque direction comporte 5 mood words, une phrase signature, 3 règles non négociables, et un pack prêt-dev complet : palette par rôles, typo pairing display+body avec tailles 
clamp() et line-heights, échelle d'espacements, radius, ombres, motifs UI (bento, editorial, brutal, glass, organique), principes motion.
À la sortie, tu as deux fiches DA structurées identiquement (pour comparer terme à terme), plus un "tokens quick draft" en JSON minimal et CSS variables prêtes pour les modes light + dark. Pour Thymon : c'est le skill à dégainer au tout début d'un projet, avant même 
design-tokens ou 
frontend-design. Il transforme une discussion floue en deux pistes concrètes qu'on peut juger avec ses yeux.
Source
Plugin : 
perso (standalone)
Nom interne : 
art-direction
Fichier : 
/home/thymon/.claude/skills/art-direction/SKILL.md