Installer 4 skills Claude Code (dev + design) · Guide complet

🎁 Ce que tu reçois : les 4 commandes d'installation, ce que fait vraiment chaque skill, et lesquelles valent le détour.

Une commande par skill, 30 secondes chacune. À la fin, ton Claude Code sait designer une interface qui ne ressemble pas à toutes les autres, monter une API propre, et relire son propre code avant que toi tu le fasses.

D'où viennent ces skills

Toutes du même endroit : aitmpl.com, la vitrine du repo open source davila7/claude-code-templates. C'est un catalogue communautaire de skills, agents, commandes et MCP pour Claude Code. Tu prends ce qui t'intéresse, tu laisses le reste.

⚠️ Aucune de ces 4 skills n'est officielle Anthropic. C'est gratuit et ça bouge vite, mais la qualité varie d'une skill à l'autre. Je te dis franchement plus bas lesquelles valent vraiment le détour et lesquelles sont plus légères qu'annoncé.

Rappel : c'est quoi une Skill ?

Une Skill = un dossier avec un fichier SKILL.md en Markdown. Il explique à l'IA :

• quand utiliser cette compétence
• quelles étapes suivre
• quelles erreurs éviter
• quel résultat produire

Certaines embarquent en plus des scripts Python et des fiches de référence que l'agent va lire tout seul quand il en a besoin.

Tu ne les appelles pas à la main : Claude les déclenche quand ta demande matche la description de la skill. Tu peux quand même forcer en disant « utilise la skill ui-ux-pro-max ».

Prérequis

• Claude Code installé et connecté.
• Node.js pour la commande npx. Vérifie avec node -v.
• Python 3 : deux des skills lancent des scripts .py. Vérifie avec python3 --version.

Si Python manque, sur Mac : brew install python3.

Installation : 4 commandes

Ouvre ton terminal à la racine de ton projet (pas dans ton dossier perso), puis lance les commandes une par une :

npx claude-code-templates@latest --skill creative-design/ui-ux-pro-max
npx claude-code-templates@latest --skill creative-design/frontend-design
npx claude-code-templates@latest --skill development/senior-backend
npx claude-code-templates@latest --skill development/code-reviewer

L'installeur te demande confirmation, puis dépose chaque skill dans .claude/skills/<nom-de-la-skill>/.

💡 Pourquoi à la racine du projet ? Parce que les skills s'installent en local dans le dossier .claude/. Elles ne servent que dans ce projet-là. Si tu veux les avoir partout, refais la commande dans chaque repo, ou déplace le dossier dans ~/.claude/skills/ pour les rendre globales.

Vérifier que c'est bien passé

ls .claude/skills/

Tu dois voir tes 4 dossiers. Ensuite, relance Claude Code et demande-lui simplement : « quelles skills tu as de dispo ? ».

1. ui-ux-pro-max, la base de données design

Catégorie : creative-design · ~9 100 installs · la plus téléchargée des quatre

C'est la plus costaude du lot, et de loin. Ce n'est pas une skill qui te donne des conseils vagues : c'est une base de données interrogeable en Python, avec 50+ styles UI, 97 palettes de couleurs, 57 associations de polices, 99 règles UX et 25 types de graphiques, répartis sur 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui).

Comment Claude s'en sert : il commence toujours par générer un système de design complet :

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "saas dashboard fintech" --design-system -p "Nom du projet"

Ça sort d'un coup : le pattern de page, le style, la palette, la typo, les effets, et les anti-patterns à éviter. Ensuite il affine par domaine (--domain style, --domain color, --domain ux, --domain typography, --domain chart) et récupère les bonnes pratiques de ton stack avec --stack react (par défaut html-tailwind).

Ce qui la rend vraiment utile : elle embarque une checklist avant livraison qui règle les détails qui font « amateur », pas d'emoji en guise d'icône, cursor-pointer sur tout ce qui est cliquable, contraste texte 4.5:1 minimum, cible tactile 44x44px, transitions entre 150 et 300ms, verre dépoli lisible en mode clair (bg-white/80, pas bg-white/10), responsive testé à 375 / 768 / 1024 / 1440.

✅ Mon avis : celle-là, tu l'installes même si tu ne prends aucune des trois autres. C'est du contenu réel, pas du remplissage.

2. frontend-design, l'anti « site généré par IA »

Catégorie : creative-design · ~7 500 installs

Son objectif tient en une phrase : empêcher Claude de te sortir la même landing page que tout le monde. Elle l'oblige à choisir une direction esthétique tranchée avant d'écrire la moindre ligne : brutalement minimal, maximalisme assumé, rétro-futuriste, organique, luxe, éditorial, art déco, industriel…

Ce qu'elle interdit explicitement

Comment la déclencher : elle part toute seule dès que tu demandes une page, un composant ou une interface. Tu peux la cadrer en donnant le contexte, à qui c'est destiné, quel ton, quelle contrainte technique.

⚠️ Elle pousse fort sur le côté « bold ». Sur un projet client corporate, dis-lui explicitement le registre voulu, sinon tu récupères une page qui déménage mais qui ne colle pas à la marque.

Le combo qui marche : frontend-design décide de la direction artistique, ui-ux-pro-max fournit la palette, la typo et vérifie l'accessibilité. Les deux ensemble, c'est là que ça devient intéressant.

3. senior-backend, le kit API + base de données

Catégorie : development · ~3 460 installs

Elle couvre le back : Node.js, Express, Go, Python, PostgreSQL, GraphQL, REST, plus la partie DevOps (Docker, Kubernetes, Terraform, GitHub Actions) et cloud (AWS, GCP, Azure).

Et trois fiches de référence que Claude lit tout seul : api_design_patterns.md, database_optimization_guide.md, backend_security_practices.md.

⚠️ Sois lucide : le SKILL.md de celle-ci est visiblement généré à partir d'un gabarit, les descriptions sont génériques (« outil automatisé pour les tâches de scaffolding »). La vraie valeur est dans les fiches references/, pas dans le texte de présentation. Ouvre-les avant de juger, et vire ce qui ne te sert pas.

4. code-reviewer, le garde-fou avant commit

Catégorie : development · ~4 270 installs

Relecture de code sur TypeScript, JavaScript, Python, Swift, Kotlin et Go. Même logique que la précédente : trois scripts et trois fiches.

Les fiches : code_review_checklist.md, coding_standards.md, common_antipatterns.md.

Usage typique, avant de commit :

python3 .claude/skills/code-reviewer/scripts/code_quality_checker.py . --verbose

💡 Si tu as déjà installé les skills de Matt Pocock, tu as déjà /code-review qui fait le job sur le diff, en sous-agents parallèles. Les deux se recoupent, inutile de cumuler, choisis-en une.

Mon workflow avec ces skills

1. Je décris le projet → ui-ux-pro-max génère le système de design (palette, typo, structure de page)
2. frontend-design prend le relais et impose une direction artistique au lieu du template par défaut
3. senior-backend pour l'API et le schéma de base
4. code-reviewer en dernier passage avant de livrer au client

Les deux skills de design, je les utilise sur quasiment tous les projets. Les deux de dev, plutôt en complément quand je n'ai pas déjà un process en place sur le repo.

Récap

Ressources

• 🌐 Catalogue : aitmpl.com/skills
• 📦 Dépôt GitHub : github.com/davila7/claude-code-templates
• 📖 Docs : docs.aitmpl.com