Mon guide des skills Claude Code pour créer des sites Web
Je crée des sites Web avec Claude Code, et je l’ai configuré avec 64 skills qui couvrent le design, l’animation, la 3D, les composantes, Figma, les tests et l’accessibilité. Voici le guide que je tiens à jour : à quoi sert chaque groupe et dans quel ordre je les utilise. Je le mettrai à jour à mesure que ma configuration change.
Comment fonctionnent les skills
- Un skill est un dossier d’instructions que Claude charge quand une tâche correspond à sa description. Claude les choisit automatiquement, ou vous pouvez en nommer un, par exemple « utilise impeccable pour critiquer la page d’accueil ».
- Les skills globaux se trouvent dans ~/.claude/skills/ et fonctionnent dans tous les projets. Supprimez un dossier pour en retirer un.
- Je les installe avec l’outil skills en ligne de commande : npx skills add <owner/repo> --skill <name> -g -a claude-code -y
- Les nouveaux skills se chargent à la prochaine session de Claude Code.
- La plupart sont des paquets communautaires, non vérifiés par Anthropic. GSAP, Figma, Playwright et 21st.dev proviennent des comptes GitHub officiels des éditeurs. Lisez un skill avant de vous y fier.
Direction artistique et goût
Ceux-ci définissent l’apparence et l’ambiance d’un site avant d’écrire la moindre ligne de code. Je commence chaque nouveau site ou refonte ici.
| Skill | Source | À utiliser pour |
|---|---|---|
impeccable | pbakaus/impeccable | Concevoir, critiquer, auditer ou peaufiner une interface; mon principal skill de direction design |
design-taste-frontend | leonxlnx/taste-skill | Éviter les pages « générées par IA » sans personnalité sur les pages d’accueil, portfolios et refontes |
ui-ux-pro-max | nextlevelbuilder | Règles UI/UX pour la mise en page, la typographie, la couleur, l’adaptabilité et l’accessibilité |
emil-design-eng | emilkowalski/skill | L’approche d’Emil Kowalski pour le fini de l’interface et les petits détails |
apple-design | emilkowalski/skill | Le mouvement fluide, la profondeur et les gestes à la Apple sur le Web |
paint | athevon/genjutsu | Une direction artistique complète : remue-méninges, système de design, construction, audit |
mobile-native | emilkowalski/skill | Donner à un site l’allure d’une app installée sur téléphone (bogue du 100vh, surbrillance au toucher, zoom des champs) |
Animation et mouvement
Trois boîtes à outils d’animation; j’en choisis une par site. Motion.dev pour l’animation de composantes en React et Next.js, GSAP pour les séquences liées au défilement, et genjutsu (cast, bunshin) pour les micro-interactions créatives.
| Skill | Source | À utiliser pour |
|---|---|---|
animate | emilkowalski/skill | Créer une animation de zéro : intention, courbe, durée et sortie |
find-animation-opportunities | emilkowalski/skill | Repérer les endroits qui devraient s’animer, avec des valeurs exactes (lecture seule) |
improve-animations | emilkowalski/skill | Auditer le mouvement existant et rédiger un plan de correction priorisé (lecture seule) |
review-animations | emilkowalski/skill | Réviser le code d’animation selon des critères de qualité stricts |
animation-vocabulary | emilkowalski/skill | Trouver le bon nom pour un effet qu’on ne sait que décrire |
motion-design | lottiefiles | Rythme, accélération, chorégraphie et principes de Disney pour le mouvement d’interface |
motion-dev-animations | 199-biotechnologies | Animations Motion.dev (successeur de Framer Motion) en React, Next.js, Svelte, Astro |
gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance | greensock (official) | Interpolations GSAP, séquences, effets au défilement, SplitText, Flip, 60 i/s fluides |
gsap-react, gsap-frameworks | greensock (official) | GSAP dans React, Vue ou Svelte avec un nettoyage propre |
cast | athevon/genjutsu | Micro-interactions créatives et effet « wow » sur une interface existante |
bunshin | athevon/genjutsu | Une chaîne complète de création de site : Impeccable mène le design, genjutsu mène le mouvement |
animate-expo | emilkowalski/skill | L’animation dans les apps React Native et Expo (pas les sites Web) |
La 3D avec Three.js
Dix skills de cloudai-x/threejs-skills, d’un objet qui tourne en en-tête à une scène interactive complète. Sur un portfolio, un seul moment 3D vaut souvent mieux que plusieurs.
| Skill | À utiliser pour |
|---|---|
threejs-fundamentals | Scène, caméra, moteur de rendu et hiérarchie des objets |
threejs-geometry | Formes, maillages personnalisés et objets instanciés |
threejs-materials | Matériaux PBR, de base et à shaders |
threejs-textures | Images, cartes UV et cartes d’environnement |
threejs-lighting | Lumières, ombres et éclairage d’environnement |
threejs-loaders | Modèles GLTF, textures et fichiers HDR avec progression |
threejs-animation | Animations de modèles, cibles de morphose et mouvement procédural |
threejs-interaction | Clics, survol, toucher et contrôles de caméra |
threejs-shaders | Effets GLSL personnalisés |
threejs-postprocessing | Halo, profondeur de champ, flou et étalonnage des couleurs |
Composantes et bibliothèques d’interface
shadcn/ui et 21st.dev sont des bibliothèques de composantes React; elles s’appliquent donc aux sites React et Next.js comme celui-ci.
| Skill | Source | À utiliser pour |
|---|---|---|
shadcn-ui | giuseppe-trisciuoglio | Installer et personnaliser des composantes et formulaires shadcn/ui accessibles |
21st-ui-build | 21st-dev (official) | Créer ou remanier une page, une section ou une composante en s’inspirant de 21st.dev |
21st-ui-explore | 21st-dev (official) | Comparer plusieurs directions d’interface avant d’en choisir une |
21st-ui-review | 21st-dev (official) | Réviser l’interface pour la cohérence, l’accessibilité et l’adaptabilité |
21st-cli-use | 21st-dev (official) | Chercher et installer des composantes, thèmes et gabarits du catalogue 21st.dev |
21st-ai | 21st-dev (official) | Générer des variantes d’interface à partir d’une requête et intégrer celle qu’on choisit |
21st-design-sync, 21st-registry | 21st-dev (official) | Publier ses propres thèmes et composantes sur 21st.dev |
pick-ui-library | emilkowalski/skill | Choisir la bonne bibliothèque pour une tâche (graphiques, notifications, glisser-déposer); s’exécute seulement si on le nomme |
prototype | emilkowalski/skill | Créer plusieurs versions d’un élément d’interface et passer de l’une à l’autre en direct; s’exécute seulement si on le nomme |
ask-sonner | emilkowalski/skill | Notifications Sonner dans React |
Les skills 21st.dev demandent l’outil 21st en ligne de commande (@21st-dev/cli) et un compte 21st.dev.
Figma
Quatorze skills Figma officiels. Ils ne fonctionnent qu’une fois le serveur MCP de Figma connecté.
| Skill | À utiliser pour |
|---|---|
figma-design-to-code | Transformer une maquette Figma en code fonctionnel |
figma-implement-motion | Transformer des animations Figma en code |
figma-generate-design | Envoyer une page existante du code vers Figma |
figma-generate-library | Créer un système de design Figma (jetons, composantes, clair/sombre) à partir du code |
figma-use | Skill de base requis pour toute écriture dans Figma |
figma-use-motion | Ajouter des images clés et des courbes d’accélération à des calques Figma |
figma-code-connect | Associer des composantes Figma à des extraits de code |
figma-create-new-file | Créer un nouveau fichier Figma, FigJam ou Slides |
figma-generate-diagram | Dessiner des organigrammes et des diagrammes dans Figma |
figma-use-figjam, figma-use-slides | Travailler dans les tableaux FigJam et Figma Slides |
figma-shaders, figma-generative-plugins | Effets de shaders et plugiciels génératifs réutilisables |
figma-swiftui | Faire le pont entre Figma et SwiftUI pour les apps iOS |
Qualité, tests et accessibilité
Je les exécute avant chaque lancement ou mise à jour importante.
| Skill | Source | À utiliser pour |
|---|---|---|
web-accessibility | akillness/jeo-skills | Trouver et corriger les problèmes d’accessibilité : clavier, focus, étiquettes, contraste, redimensionnement |
playwright-cli | microsoft (official) | Piloter un vrai navigateur pour tester des pages et écrire des tests Playwright |
break-ui | emilkowalski/skill | Mettre l’interface à l’épreuve avec les pires données : noms très longs, états vides, émojis, nombres énormes |
21st-ui-review | 21st-dev (official) | Un contrôle qualité du design pour la cohérence et l’adaptabilité |
impeccable | pbakaus/impeccable | Critiquer et solidifier une page terminée |
review-animations | emilkowalski/skill | Vérifier la qualité du mouvement et le respect du mode « mouvement réduit » |
write-swift (emilkowalski/skill) fait aussi partie de ma sélection. Il porte sur le code Swift et iOS, pas les sites Web.
Serveurs MCP
Les serveurs MCP relient Claude à des outils externes. Perplexity et Firecrawl demandent des clés d’API obtenues sur leurs sites, et Figma demande une connexion à Figma.
| Serveur | Ce qu’il ajoute | Prérequis |
|---|---|---|
| Figma | Lire et écrire des fichiers Figma; active les skills Figma | Connexion à un compte Figma |
| Perplexity | Recherche Web avec réponses sourcées | Clé d’API de perplexity.ai |
| Firecrawl | Extraire et parcourir des sites en texte propre | Clé d’API de firecrawl.dev |
| Claude in Chrome | Contrôler votre vrai navigateur Chrome | L’app de bureau Claude et l’extension Chrome |
| Chrome DevTools | Contrôle du navigateur au niveau des DevTools et traces de performance | Rien |
Ajoutez-les avec l’outil claude, en remplaçant votre-cle par votre propre clé :
claude mcp add -s user --transport http figma https://mcp.figma.com/mcp
claude mcp add -s user perplexity -e PERPLEXITY_API_KEY=votre-cle -- npx -y @perplexity-ai/mcp-server
claude mcp add -s user firecrawl -e FIRECRAWL_API_KEY=votre-cle -- npx -y firecrawl-mcp
claude mcp add -s user chrome-devtools -- npx -y chrome-devtools-mcp@latestMon processus pour créer un site Web
- Définir la direction. Utilisez impeccable ou design-taste-frontend pour définir l’apparence, la typographie et les couleurs. Utilisez 21st-ui-explore ou prototype pour comparer des options.
- Importer les maquettes (s’il y en a). Avec Figma connecté, utilisez figma-design-to-code pour transformer les maquettes en code.
- Choisir la pile et les bibliothèques. Je travaille en Next.js, donc shadcn/ui et 21st.dev s’appliquent. Du HTML/CSS/JS simple convient encore aux tout petits sites ponctuels. Utilisez pick-ui-library pour des besoins précis.
- Construire les pages. Utilisez ui-ux-pro-max pour la mise en page et l’adaptabilité, shadcn-ui ou 21st-ui-build pour les composantes, et mobile-native pour le fini sur téléphone.
- Ajouter le mouvement. Lancez d’abord find-animation-opportunities, puis construisez avec motion-dev-animations ou les skills gsap. Ajoutez les skills threejs pour un moment 3D et cast pour les micro-interactions.
- Tester et solidifier. Exécutez web-accessibility, break-ui, playwright-cli et review-animations, puis une dernière critique avec impeccable.
- Lancer. Déployez, puis gardez ce guide à jour à mesure que de nouveaux skills s’ajoutent.
Pour un site complet d’un coup, bunshin (genjutsu) exécute automatiquement la majeure partie de cette chaîne.
Requête de départ du processus
Collez ceci dans Claude Code pour appliquer le processus à un nouveau site. Il avance une étape à la fois et valide avec vous avant de continuer.
Je veux créer un site Web en suivant ce processus. Avance une étape à la fois et valide avec moi après chaque étape avant de continuer.
À propos du site (à remplir) :
- À quoi il sert et pour qui :
- Pages nécessaires :
- Style que j’aime (liens ou adjectifs) :
- Fichier Figma (s’il y a lieu) :
- Pile : Next.js avec shadcn/ui, sauf bonne raison de faire autrement.
1. Définir la direction : utilise impeccable ou design-taste-frontend pour proposer une apparence, une typographie et une palette de couleurs. S’il y a des options claires, montre-m’en deux avec 21st-ui-explore ou prototype.
2. Importer les maquettes : si je t’ai donné un fichier Figma, utilise figma-design-to-code pour le transformer en code.
3. Choisir la pile et les bibliothèques : confirme la pile et choisis les composantes (shadcn/ui, 21st.dev, ou pick-ui-library pour un besoin précis).
4. Construire les pages : utilise ui-ux-pro-max pour la mise en page et l’adaptabilité, shadcn-ui ou 21st-ui-build pour les composantes, et mobile-native pour peaufiner l’expérience sur téléphone.
5. Ajouter le mouvement : lance d’abord find-animation-opportunities, puis construis seulement les animations convenues avec motion-dev-animations ou gsap. Respecte le réglage « mouvement réduit ».
6. Tester et solidifier : exécute web-accessibility, break-ui, playwright-cli et review-animations, puis une dernière critique avec impeccable. Corrige ce qu’ils trouvent.
7. Lancer : donne-moi une courte liste de vérification avant la mise en ligne (métadonnées SEO, performance, secrets, formulaires, page 404) et les étapes de déploiement pour mon hébergeur.
Si un skill n’est pas installé, dis-le-moi et continue avec l’option la plus proche.