Chapitre B — Design & Direction artistique

• design-tokens
• art-direction

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