1. Introduction
1.1. Qu’est-ce qu’une Skill?
Une skill est un workflow guidé qui automatise une tâche complexe ou récurrente. Contrairement aux tools (Read, Edit, Bash) qui sont des actions élémentaires, et aux agents (subagents spécialisés) qui exécutent des tâches en parallèle, une skill est une procédure structurée qui pose des questions, brainstorme, guide l’utilisateur à travers des étapes, et fournit des conseils contextuels.
Analogie: - Un tool c’est un marteau 🔨 - Un agent c’est un menuisier travaillant en parallèle avec d’autres - Une skill c’est un menuisier expert qui te guide pas-à-pas pour construire une table: "Mesurons d’abord, puis choisissons le bois, puis…"
1.2. Deux Modes de Travail
1.2.1. Mode Freeform (classique)
Tu travailles directement avec Claude sans structure formelle. C’est rapide pour les petites tâches, mais sans guidance pour les tâches complexes.
1.2.2. Mode Structured Workflow (avec skills)
Tu invoques une skill qui: 1. Pose des questions de contexte 2. Brainstorme les approches possibles 3. Guide étape par étape 4. Itère avec tes retours 5. Teste le résultat avant de terminer
Quand utiliser quel mode? Les skills détaillent cela dans leur section "Quand l’utiliser".
1.3. Invocation: Automatique vs Manuel
Les skills s’invoquent de deux façons:
1. Automatique (MUST use) — Certaines skills se déclenchent automatiquement:
- Tu dis "je veux créer une feature" → superpowers:brainstorming se déclenche automatiquement
- Tu dis "fixer ce bug" → superpowers:systematic-debugging s’engage
- Règle d’or: Si une skill s’applique à ta tâche, elle DOIT être utilisée — c’est pas optionnel
2. Manuel — Tu invoques une skill explicitement avec /skill-name:
/doc-coauthoring
/testing-expert
/feature-workflow
1.4. Les Superpowers: Fondations Essentielles
Les Superpowers sont ~13 skills fondamentales que TOUT le monde doit connaître. Elles structurent comment tu travailles:
-
Brainstorming — Avant toute création (feature, design, architecture)
-
Systematic Debugging — Avant de fixer un bug
-
Writing Plans — Avant les tâches multi-étapes
-
Executing Plans — Pour orchestrer les étapes planifiées
-
Test-Driven Development — Pour du code fiable
-
Requesting Code Review — Avant de partager du code
-
Receiving Code Review — Pour intégrer les retours
-
Using Git Worktrees — Pour isoler le travail
-
Verification Before Completion — Pour valider avant de terminer
-
Dispatching Parallel Agents — Pour paralléliser le travail
-
Using Superpowers — Documentation des superpowers elles-mêmes
-
Finishing a Development Branch — Pour fermer proprement une branche
Ces skills apparaissent constamment dans la Section "Processus & Workflows".
1.5. Architecture du Guide
Ce guide est organisé par catégories thématiques:
| Catégorie | Contenu |
|---|---|
Processus & Workflows |
Superpowers + feature-workflow pour structurer ton travail |
Développement Backend |
Skills pour Java/Spring, database, API |
Développement Frontend |
Skills pour Vue.js, React, TypeScript |
Design & UI |
Skills pour Figma, design system, UI/UX |
Testing & Qualité |
Skills pour testing (unit, E2E, QA) |
Documentation & Contenu |
Skills pour doc, PDF, Excel, Word, slides |
Spécialisé ClaraJob |
Skills pour le projet ClaraJob (backend, DB, etc.) |
Intégrations & Outils |
Skills pour plugins, MCP, Stripe, WordPress, etc. |
Productivité & Automation |
Skills pour automation, scheduling, config |
1.6. User Journey Complète: Exemple
Voici comment les skills s’enchaînent typiquement:
Scénario: Tu dois créer une nouvelle feature dans ClaraJob
-
Brainstorming (
superpowers:brainstorming) → Explore l’idée, les requirements, les approches -
Écrire un Plan (
superpowers:writing-plans) → Documente les étapes et les fichiers critiques -
Exécuter le Plan (
superpowers:executing-plans) → Orchestre l’implémentation -
Développement Frontend (
vue-clarajob-expert) → Crée les composants Vue avec la spécialiste du projet -
Développement Backend (
clarajob-spring-backend-expert) → Implémente l’API et la logique métier -
Test-Driven (
superpowers:test-driven-development) → Écris les tests avant/pendant le code -
Code Review (
superpowers:requesting-code-review) → Demande un review de tes changements -
Vérification (
superpowers:verification-before-completion) → Valide tout avant de terminer -
Finir la Branche (
superpowers:finishing-a-development-branch) → Ferme proprement et prépare la PR
1.7. Arbre de Décision Rapide
Tu veux faire… → Utilise cette skill:
| Je veux… | Skill à utiliser |
|---|---|
…créer une nouvelle feature |
|
…fixer un bug |
|
…écrire du code backend |
|
…écrire du code frontend |
|
…designer une UI |
|
…écrire des tests |
|
…écrire de la documentation |
|
…review du code |
|
…fixer un bug difficile |
|
…planifier une tâche complexe |
|
…créer un plugin Claude |
|
…automatiser une tâche |
|
1.8. Comment Utiliser Ce Guide
Pour chaque skill, tu trouveras:
-
Description — Qu’est-ce que ça fait exactement
-
Quand l’utiliser — Les signaux qui disent "c’est le moment"
-
Comment l’utiliser — Les étapes et le workflow
-
Exemples concrets — Des cas réels d’utilisation
-
Cas particuliers — Les pièges et variations
-
Quick Links — Vers les skills connexes
Pour naviguer efficacement: - Cherche ta tâche dans l’arbre de décision ci-dessus - Clique sur la skill recommandée - Lis la section "Quand l’utiliser" pour confirmer - Suis les étapes dans "Comment l’utiliser"
1.9. Important: Contexte et Disponibilité
⚠️ Cette documentation suppose que: - Tu utilises Claude Code (application desktop, web, IDE extension, ou CLI) - Les skills listées ici sont activées/disponibles dans ton environnement - Certaines skills nécessitent des connexions MCP (Figma, Stripe, MongoDB, etc.) - Certaines skills sont spécialisées (ClaraJob, Stripe) et ne s’appliquent que si tu travailles sur ces projets
🔍 Pour vérifier les skills disponibles:
/skills
❓ Besoin d’aide?
- Consulte /help dans Claude Code
- Cherche dans cette documentation
- Certaines skills ont des instructions détaillées intégrées
2. Catégorie: Processus & Workflows
Cette catégorie regroupe les Superpowers — des workflows structurés qui organisent comment tu travailles de bout en bout. Contrairement aux skills techniques (backend, frontend, design), les Superpowers gèrent le processus, pas l’implémentation.
Pense à elles comme tes "réflexes de travail". Avant de coder, utilise brainstorming. Avant de fixer un bug, utilise systematic-debugging. Avant de terminer, utilise verification-before-completion.
2.1. superpowers:using-superpowers
Description: Cette skill est la "porte d’entrée" qui explique comment et quand utiliser les Superpowers. Elle est invoquée automatiquement au démarrage de chaque conversation pour établir les règles.
Quand l’utiliser: - Tu découvres Claude Code pour la première fois - Tu as oublié comment les Superpowers fonctionnent - Tu veux voir la liste complète des Superpowers disponibles
Comment l’utiliser: Soit elle s’active automatiquement (tu verras le message "Using superpowers:using-superpowers"), soit tu l’invoques:
/using-superpowers
Elle va t’expliquer les 3 règles d’or: 1. Les skills DOIVENT être invoquées si elles s’appliquent 2. Certaines skills se déclenchent automatiquement 3. Tu as toujours le contrôle (tu peux les ignorer intentionnellement)
Exemples: - Premier jour sur Claude Code → voir cette skill - Tu oublies si tu dois invoquer une skill pour ta tâche → lance cette skill
2.2. superpowers:brainstorming
Description: Avant toute création (feature, design, architecture, document), cette skill te guide à explorer l’espace des solutions possibles. Elle pose des questions, brainstorme les approches, et t’aide à clarifier ce que tu veux vraiment faire.
Quand l’utiliser: - Tu dis "créer une feature" - Tu dis "ajouter une fonctionnalité" - Tu dis "concevoir une architecture" - Tu dis "comment devrais-je approcher…"
Comment l’utiliser: La skill se déclenche automatiquement. Elle va: 1. Te poser des questions sur l’objectif (le "pourquoi") 2. Brainstormer 5-10 approches différentes 3. T’aider à choisir la meilleure 4. Confirmer la direction avant que tu commences
Exemples:
Utilisateur: "Je veux créer un formulaire de login pour ClaraJob"
→ Qu'est-ce que c'est pour? (nouveaux utilisateurs? authentification externe?)
→ Voici 8 approches possibles: OAuth, session JWT, Keycloak, ...
→ Laquelle préfères-tu et pourquoi?
2.3. superpowers:systematic-debugging
Description: Plutôt que de se lancer à l’aveugle, cette skill structure ton processus de debug: isoler le problème, former des hypothèses, tester, et confirmer la racine.
Quand l’utiliser: - Tu dis "ce code ne marche pas" - Tu dis "le test échoue" - Tu dis "il y a une erreur bizarre"
Comment l’utiliser: La skill se déclenche. Elle va: 1. Te poser des questions pour reproduire le problème 2. T’aider à isoler le symptôme du bug 3. Formuler des hypothèses sur la racine 4. Tester chaque hypothèse systématiquement 5. Confirmer la cause et proposer un fix
Exemples:
Utilisateur: "Les tests Vue failent avec 'component not rendering'"
→ Où exactement? Quel composant? Quel message d'erreur exact?
→ Est-ce que ça reproduit toujours ou aléatoire?
→ Hypothèse 1: props manquantes. Hypothèse 2: store pas initialisé.
→ Testons hypothèse 1 d'abord...
2.4. superpowers:writing-plans
Description: Pour les tâches multi-étapes, cette skill te guide à écrire un plan avant de coder. Un bon plan évite les faux départs, identifie les dépendances, et aligne tout le monde.
Quand l’utiliser: - Avant une refactorisation - Avant une migration majeure - Avant d’implémenter une architecture complexe - Avant une tâche qui prendra >2 heures
Comment l’utiliser:
/writing-plans
Ensuite: 1. Partage ta compréhension de la tâche 2. La skill pose des questions sur les contraintes et dépendances 3. Brainstorme les étapes critiques 4. Produit un plan écrit avec fichiers critiques et ordre des tâches 5. Tu valides ou itères
2.5. superpowers:executing-plans
Description: Une fois un plan écrit, cette skill t’aide à l’exécuter étape par étape. Elle gère le tracking, les dépendances, et te rappelle les étapes suivantes.
Quand l’utiliser: - Tu as un plan écrit et tu commences - Tu reviens à un plan après une pause
Comment l’utiliser:
/executing-plans
Elle va: 1. Charger ton plan écrit 2. T’aider sur l’étape courante 3. Tracker la progression 4. Pointer les dépendances bloquantes 5. Relancer les étapes quand elles sont prêtes
2.6. superpowers:test-driven-development
Description: Écris les tests en premier (avant ou en parallèle du code). Cette skill structure le TDD: écrire les tests, voir failir, puis fixer.
Quand l’utiliser: - Tu développes une nouvelle fonctionnalité (backend ou frontend) - Tu dois corriger un bug - Mentionner "test-driven" ou "TDD"
Comment l’utiliser:
/test-driven-development
Processus: 1. Définir le comportement attendu (tes tests) 2. Écrire les tests (RED) 3. Implémenter juste assez de code pour passer (GREEN) 4. Refactor sans casser les tests (REFACTOR)
2.7. superpowers:verification-before-completion
Description: Avant de terminer, lance des vérifications finales: tests passent? Code compilé? Feature fonctionne réellement? Cette skill t’évite de déclarer "done" quand y’a encore du travail.
Quand l’utiliser: - Tu penses avoir terminé ta branche/feature - Avant de demander une code review - Avant de faire un commit final
Comment l’utiliser:
/verification-before-completion
Elle va: 1. Vérifier que tous les tests passent 2. Vérifier la compilation/build 3. Tester la feature manuellement si applicable 4. Checklist: documentation, comments, types 5. Vérifier que rien n’est cassé ailleurs
2.8. superpowers:dispatching-parallel-agents
Description: Quand tu as plusieurs tâches indépendantes, cette skill t’aide à les paralélliser avec des agents. Au lieu de faire une tâche puis une autre, lance-les toutes en même temps.
Quand l’utiliser: - Tu dois créer 3 composants Vue différents (indépendants) - Tu dois fixer 5 bugs non-liés - Tu dois refactorer 4 services (chacun indépendant)
Comment l’utiliser:
/dispatching-parallel-agents
Elle va: 1. Identifier les tâches indépendantes 2. Lancer les agents appropriés pour chacune 3. Tout s’exécute en parallèle 4. Synthétiser les résultats
2.9. superpowers:subagent-driven-development
Description: Quand tu as un plan complexe avec plusieurs phases, cette skill orchestre des subagents spécialisés (backend-developer, frontend-developer, qa-engineer) pour exécuter en parallèle.
Quand l’utiliser: - Grosse feature: backend + frontend + testing - Refactor multi-layers: DB + API + UI - Workflows impliquant ~3+ spécialisations
Comment l’utiliser:
/subagent-driven-development
Elle va: 1. Découper le plan en sous-tâches par spécialisation 2. Lancer les agents appropriés 3. Gérer les dépendances entre phases 4. Synthétiser le résultat final
2.10. superpowers:requesting-code-review
Description: Avant de merger ton code, demande une review. Cette skill te guide à formater ta PR, écrire une description claire, et pointer les zones critiques pour le reviewer.
Quand l’utiliser: - Tu as terminé une feature et elle est prête pour review - Tu dois créer une PR - Tu dois demander du feedback
Comment l’utiliser:
/requesting-code-review
Elle va: 1. T’aider à écrire une description PR clair 2. Identifier les sections critiques à reviewer 3. Proposer des questions pour le reviewer 4. Formater ton code pour la review 5. Créer la PR automatiquement
2.11. superpowers:receiving-code-review
Description: Un reviewer a commenté ta PR. Cette skill t’aide à intégrer les retours: comprendre les critiques, itérer le code, et relancer la review.
Quand l’utiliser: - Tu reçois les retours du reviewer - Tu dois itérer suite à la review - Avant de relancer pour approbation
Comment l’utiliser:
/receiving-code-review
Elle va: 1. Compiler les retours du reviewer 2. T’aider à prioriser les changements 3. Itérer le code avec toi 4. Vérifier que tout est adressé 5. Relancer la review automatiquement
2.12. superpowers:finishing-a-development-branch
Description: Tu as mergé ta branche. Cette skill t’aide à fermer proprement: nettoyer la branche locale, documenter ce qui a changé, et préparer pour le prochain travail.
Quand l’utiliser: - Ta PR est mergée - Tu veux archiver ta branche - Avant de commencer un nouveau travail
Comment l’utiliser:
/finishing-a-development-branch
Elle va: 1. Vérifier que tout est mergé 2. Nettoyer les branches locales 3. Documenter les changements majeurs 4. Préparer le repo pour le prochain travail 5. Archiver les notes/decisions de cette feature
2.13. superpowers:using-git-worktrees
Description: Pour isoler ton travail sur plusieurs branches sans conflit, cette skill te guide à créer et gérer des git worktrees. Chaque worktree est un répertoire séparé pour une branche.
Quand l’utiliser:
- Tu dois travailler sur 2+ branches en parallèle
- Tu veux éviter les git stash et git checkout
- Tu dois basculer rapidement entre contextes
Comment l’utiliser:
/using-git-worktrees
Elle va: 1. Créer des worktrees isolés pour chaque branche 2. T’expliquer comment les gérer 3. Nettoyer les worktrees finis 4. Montrer les bonnes pratiques
2.14. feature-workflow
Description: C’est le "super-workflow" qui orchestre TOUTE une feature de bout en bout: de l’idée au merge. Elle combine brainstorming, planning, developing, testing, review, et merge.
Quand l’utiliser: - Tu dois implémenter une grosse feature complète - C’est ta première fois sur un workflow complet - Tu veux pas penser aux étapes, juste progresser
Comment l’utiliser:
/feature-workflow
Elle te guide: 1. Design phase: Brainstorming + Planning 2. Implement phase: Backend + Frontend en parallèle 3. Test phase: Unit + Integration + E2E 4. Review phase: Code review et intégration des retours 5. Finish phase: Merge et cleanup
2.15. two-track-unified-process
Description: Pour les architectures complexes, cette skill fait évoluer les functional requirements et les technical constraints EN PARALLÈLE plutôt que de faire requirements d’abord puis architecture.
Quand l’utiliser: - Tu redesignes une architecture majeure - Les contraintes techniques affectent fortement les features - Tu veux éviter les "changements d’architecture après coup"
Comment l’utiliser:
/two-track-unified-process
Elle va: 1. Track 1: Définir les requirements fonctionnels 2. Track 2: Identifier les contraintes techniques 3. Boucles parallèles: adjust requirements ↔ adjust constraints 4. Converger vers une solution qui satisfait les deux tracks 5. Documenter les décisions compromises
3. Catégorie: Développement Backend
Cette catégorie groupe les skills pour développer la couche serveur: APIs, services, databases, migrations, et architectures backend.
3.1. backend-developer
Description: C’est un agent spécialisé dans l’implémentation backend. Il crée des endpoints API, des services applicatifs, des repositories, des migrations database, et des mappings selon une architecture appropriée.
Quand l’utiliser: - Tu dois créer une API REST - Tu dois implémenter un service backend - Tu dois gérer une migration database - Tu dois créer une couche métier (business logic)
Comment l’utiliser:
/backend-developer
Ou via feature-workflow ou subagent-driven-development pour orchestrer en parallèle.
L’agent va: 1. Analyser les requirements 2. Choisir la stack appropriée 3. Implémenter les endpoints 4. Gérer la persistence (DB) 5. Écrire les tests backend
Exemples:
"Créer une API pour gérer les permissions utilisateurs"
→ backend-developer analyse: PostgreSQL, Spring Boot, REST API
→ Crée: endpoints GET/POST/PUT/DELETE, service layer, repository
→ Tests: unit tests + integration tests avec DB
3.2. implement-backend
Description: C’est la skill qui guide l’implémentation backend étape par étape: structure le code, crée les layers, configure la database, et valide le tout.
Quand l’utiliser: - Tu dois implémenter une feature backend - Tu dois structurer une nouvelle couche backend - Tu dois faire une migration database - Tu dois créer des endpoints API
Comment l’utiliser:
/implement-backend
Elle guide: 1. Poser des questions sur l’architecture 2. Proposer la structure des fichiers 3. Implémenter les layers (controller, service, repository) 4. Gérer la base de données 5. Vérifier que tout compile et teste
3.3. clarajob-spring-backend-expert
Description: Expert spécialisé dans Spring Boot et l’architecture backend du projet ClaraJob. Connaît les patterns utilisés, les dépendances, la structure du projet, et les conventions.
Quand l’utiliser: - Tu travailles sur le backend ClaraJob - Tu dois créer un service Spring - Tu dois ajouter un endpoint API - Tu dois implémenter une feature backend ClaraJob - Toute tâche dans clarajob-backend
Comment l’utiliser:
/clarajob-spring-backend-expert
L’expert va: 1. Comprendre la structure ClaraJob existante 2. Suivre les conventions du projet 3. Implémenter en alignement avec l’architecture 4. Utiliser les dépendances et patterns connus 5. Tester dans le contexte ClaraJob
3.4. clarajob-db-expert
Description: Expert en database et migrations pour ClaraJob. Connaît le schéma PostgreSQL existant, les relationships, les indexes, et les bonnes pratiques du projet.
Quand l’utiliser: - Tu dois créer une table dans ClaraJob - Tu dois modifier le schéma database - Tu dois écrire une migration Liquibase - Tu dois optimiser une requête SQL - Tu dois analyser les performances database
Comment l’utiliser:
/clarajob-db-expert
L’expert va: 1. Analyser le schéma existant 2. Proposer la nouvelle structure 3. Écrire la migration SQL/Liquibase 4. Vérifier les indexes et relationships 5. Valider les performances
3.5. clarajob-liquibase-expert
Description: Expert en migrations database avec Liquibase pour ClaraJob. Comprend la syntaxe Liquibase, les changesets, les rollbacks, et les versioning du projet.
Quand l’utiliser: - Tu dois écrire une migration Liquibase - Tu dois refactorer une migration - Tu dois gérer les rollbacks - Tu dois versionner un changement database
Comment l’utiliser:
/clarajob-liquibase-expert
L’expert va: 1. Analyser le changement requis 2. Écrire le changeset Liquibase correct 3. Vérifier la compatibilité (up/down) 4. Valider les types de données 5. Tester la migration
3.6. clarajob-openapi-bruno-expert
Description: Expert en documentation API OpenAPI/Swagger et tests API avec Bruno pour ClaraJob. Connaît les spécifications OpenAPI, les annotations Spring, et les collections Bruno.
Quand l’utiliser: - Tu dois documenter une API REST - Tu dois générer la documentation OpenAPI - Tu dois créer des tests API avec Bruno - Tu dois valider une API contre sa spécification
Comment l’utiliser:
/clarajob-openapi-bruno-expert
L’expert va: 1. Analyser les endpoints 2. Générer/mettre à jour la spec OpenAPI 3. Créer les collections Bruno 4. Ajouter les tests API 5. Vérifier la documentationet la conformité
3.7. java-ddd-hexagonal
Description: Expert en architecture Domain-Driven Design (DDD) et Hexagonal pour les projets Java. Guide la création d’une architecture clean, maintenable, et indépendante des frameworks.
Quand l’utiliser: - Tu dois refactorer vers une architecture DDD - Tu dois créer une nouvelle couche métier - Tu dois isoler le domain logic du framework - Tu dois mettre en place une architecture hexagonale - Tu dois structurer une grosse application
Comment l’utiliser:
/java-ddd-hexagonal
L’expert va: 1. Analyser le domain problem 2. Définir les entités et valueobjects 3. Créer les usecases (application layer) 4. Isoler la couche métier (domain layer) 5. Structurer les adapters (framework layer)
3.8. claude-api
Description: Skill pour utiliser l’API Claude directement: faire des requêtes à l’API Anthropic, gérer les tokens, structurer les prompts, et intégrer Claude dans une application backend.
Quand l’utiliser: - Tu veux appeler l’API Claude depuis ton backend - Tu veux intégrer une feature AI dans une application - Tu veux gérer les costs et tokens - Tu veux créer un chat ou une génération de texte
Comment l’utiliser:
/claude-api
Elle guide: 1. Authentification et setup 2. Faire une requête simple 3. Gérer les models et versions 4. Structurer les prompts 5. Gérer les erreurs et retry logic 6. Optimiser les tokens et les costs
4. Catégorie: Développement Frontend
Cette catégorie groupe les skills pour développer la couche client: composants, vues, stores, routing, et intégrations frontend.
4.1. frontend-developer
Description: C’est un agent spécialisé dans l’implémentation frontend. Il crée des composants, des vues, des stores d’état, des services API client, et des routes selon une architecture appropriée.
Quand l’utiliser: - Tu dois créer une nouvelle vue/page - Tu dois implémenter un composant réutilisable - Tu dois gérer l’état de l’application - Tu dois créer une feature complète UI
Comment l’utiliser:
/frontend-developer
Ou via feature-workflow ou subagent-driven-development pour orchestrer en parallèle.
L’agent va: 1. Analyser les requirements 2. Choisir les tools/frameworks 3. Créer les composants 4. Gérer l’état (store, context) 5. Écrire les tests frontend
4.2. implement-frontend
Description: Skill qui guide l’implémentation frontend étape par étape: structure les composants, configure le store, crée les routes, et valide le tout.
Quand l’utiliser: - Tu dois implémenter une feature frontend - Tu dois restructurer la couche UI - Tu dois créer une nouvelle page/section - Tu dois intégrer une API dans l’UI
Comment l’utiliser:
/implement-frontend
Elle guide: 1. Analyser le design/requirements 2. Proposer la structure des composants 3. Implémenter les composants 4. Connecter à l’état (store) 5. Ajouter les routes et navigation 6. Vérifier que tout fonctionne dans le navigateur
4.3. vue-clarajob-expert
Description: Expert spécialisé dans Vue.js 3, TypeScript, Pinia, et shadcn-vue pour le projet ClaraJob. Connaît l’architecture frontend, les conventions, les composants réutilisables, et les patterns du projet.
Quand l’utiliser: - Tu travailles sur le frontend ClaraJob - Tu dois créer un composant Vue - Tu dois implémenter une nouvelle vue/page - Tu dois gérer l’état avec Pinia - Toute tâche dans clarajob-front-gui/src/
Comment l’utiliser:
/vue-clarajob-expert
L’expert va: 1. Comprendre la structure ClaraJob frontend existante 2. Suivre les conventions du projet 3. Utiliser les composants shadcn-vue appropriés 4. Gérer l’état avec Pinia 5. Implémenter les routes et navigation 6. Tester dans le navigateur
Exemples:
"Créer une page de gestion des permissions utilisateurs"
→ Expert suggère: page component + table component + form component
→ Crée les composants Vue avec Pinia store
→ Intègre shadcn-vue pour l'UI
→ Ajoute la route et le layout
→ Teste dans le navigateur
5. Catégorie: Design & UI
Cette catégorie groupe les skills pour le design d’interface: wireframing, prototyping, design systems, et implémentation visuelle.
5.1. frontend-design
Description: Skill pour concevoir une interface utilisateur: créer des wireframes, des mockups, définir l’expérience utilisateur, et générer des spécifications de design pour le développement.
Quand l’utiliser: - Tu dois designer une nouvelle page - Tu dois améliorer l’UX d’une feature - Tu dois créer un design system - Tu dois valider un design avant dev - Tu dois créer des specs pour un design
Comment l’utiliser:
/frontend-design
Elle guide: 1. Comprendre les requirements 2. Créer des wireframes 3. Proposer des mockups/prototypes 4. Définir l’expérience utilisateur 5. Générer des spécifications de design 6. Itérer sur les retours
5.2. canvas-design
Description: Skill pour créer des designs visuels sur canvas: backgrounds, illustrations, animations, et graphiques. Utile pour les éléments visuels customisés.
Quand l’utiliser: - Tu dois créer une illustration custom - Tu dois générer un background - Tu dois créer un effet visuel unique - Tu dois faire une animation graphique - Tu dois créer un asset visuel
Comment l’utiliser:
/canvas-design
Elle guide à créer des visuels procéduraux ou customisés.
5.3. algorithmic-art
Description: Skill pour créer de l’art génératif algorithmique: patterns, fractales, génération procédurale, et art computationnel.
Quand l’utiliser: - Tu veux créer un visual généré algorithmiquement - Tu veux des patterns procéduraux - Tu veux une animation mathématique - Tu veux explorer l’art algorithmique
Comment l’utiliser:
/algorithmic-art
Elle guide à créer de l’art via code/algorithmique.
5.4. figma:figma-use
Description: Skill de base pour utiliser Figma: naviguer l’interface, créer des designs, utiliser les composants, et gérer les fichiers.
Quand l’utiliser: - Tu découvres Figma - Tu veux apprendre les bases - Tu veux bien structurer un design Figma
Comment l’utiliser:
/figma:figma-use
5.5. figma:figma-design-to-code
Description: Skill pour passer d’un design Figma à du code directement. Exporte les designs en composants React/Vue et CSS.
Quand l’utiliser: - Tu as un design Figma et tu veux coder vite - Tu veux générer des composants à partir du design - Tu veux automatiser le handoff design → dev
Comment l’utiliser:
/figma:figma-design-to-code
L’outil va: 1. Analyser le design Figma 2. Générer le code des composants 3. Exporter les styles CSS 4. Créer la structure HTML/JSX 5. Proposer les ajustements
5.6. figma:figma-create-new-file
Description: Crée un nouveau fichier Figma avec structure, pages, et composants de base selon tes besoins.
Quand l’utiliser: - Tu commences un nouveau projet de design - Tu veux une structure de fichier best-practice
Comment l’utiliser:
/figma:figma-create-new-file
5.7. figma:figma-generate-design
Description: Génère des designs visuels complets à partir de descriptions textuelles. Utile pour prototyper rapidement.
Quand l’utiliser: - Tu veux générer des mockups rapidement - Tu cherches de l’inspiration visuelle - Tu veux des variations de design
Comment l’utiliser:
/figma:figma-generate-design
5.8. figma:figma-generate-diagram
Description: Génère des diagrammes (flowcharts, architecture diagrams, etc.) directement dans Figma.
Quand l’utiliser: - Tu veux créer un flowchart ou architecture diagram - Tu veux visualiser une structure - Tu veux documen<br/>ter un système via diagrammes
Comment l’utiliser:
/figma:figma-generate-diagram
5.9. figma:figma-generate-library
Description: Crée une design system library/components Figma pour réutilisation dans les designs.
Quand l’utiliser: - Tu as des composants à réutiliser - Tu veux créer une design system - Tu veux maintenir la cohérence visuelle
Comment l’utiliser:
/figma:figma-generate-library
5.10. figma:figma-code-connect
Description: Connecte Figma à du code avec Code Connect: synchronise les designs avec les composants React/Vue pour garder la doc à jour.
Quand l’utiliser: - Tu veux lier un design Figma à des composants code - Tu veux synchroniser le design et l’implémentation - Tu veux documenter les composants via Figma
Comment l’utiliser:
/figma:figma-code-connect
5.11. figma:figma-implement-motion
Description: Implémente les animations et transitions définies dans un design Figma en code.
Quand l’utiliser: - Tu as des animations dans Figma à implémenter - Tu dois coder des transitions - Tu veux que le code corresponde aux animations design
Comment l’utiliser:
/figma:figma-implement-motion
5.12. theme-factory
Description: Crée et gère des design tokens et thèmes: couleurs, typographie, spacing, pour une cohérence visuelle dans toute l’app.
Quand l’utiliser: - Tu veux créer un theme/branding cohérent - Tu veux générer un design system tokens - Tu veux gérer les variantes visuelles
Comment l’utiliser:
/theme-factory
5.13. brand-guidelines
Description: Crée et docummente les guidelines de marque: logo, couleurs, typographie, ton de voix, etc.
Quand l’utiliser: - Tu dois documenter l’identité visuelle d’une marque - Tu veux créer des guidelines pour une équipe - Tu veux assurer la cohérence de marque
Comment l’utiliser:
/brand-guidelines
6. Catégorie: Testing & Qualité
Cette catégorie groupe les skills pour tester: unit tests, integration tests, E2E tests, QA, et quality assurance.
6.1. testing-expert
Description: Expert en stratégie de testing: planifier les tests, choisir les outils, structurer les suites de tests, et assurer la couverture.
Quand l’utiliser: - Tu dois planifier une stratégie de tests - Tu dois améliorer la couverture de tests - Tu dois mettre en place un framework de tests - Tu dois structurer une suite de tests
Comment l’utiliser:
/testing-expert
L’expert va: 1. Analyser le code à tester 2. Proposer une stratégie (unit, integration, E2E) 3. Choisir les frameworks appropriés 4. Structurer les suites de tests 5. Vérifier la couverture
6.2. write-tests
Description: Skill pour écrire les tests eux-mêmes: unit tests, integration tests, fixtures, mocks, assertions. Support pour Jest, Vitest, Spring Test, Cypress, etc.
Quand l’utiliser: - Tu dois écrire des tests unitaires - Tu dois écrire des tests d’intégration - Tu dois coder une suite de tests - Tu dois ajouter des tests à du code existant
Comment l’utiliser:
/write-tests
Elle guide: 1. Analyser le code à tester 2. Définir les cas de test 3. Écrire les tests (RED) 4. Vérifier que les tests failent 5. Lancer les tests quand le code est prêt
6.3. qa-engineer
Description: C’est un agent QA spécialisé dans les tests E2E et la validation complète d’une feature avant production.
Quand l’utiliser: - Tu dois vérifier qu’une feature fonctionne complètement - Tu dois écrire des tests E2E - Tu dois valider user journeys complets - Tu dois faire une smoke test avant deploy
Comment l’utiliser:
/qa-engineer
Ou via feature-workflow comme phase finale.
L’agent va: 1. Analyser la feature 2. Créer les scénarios E2E 3. Écrire les tests E2E (Cypress, Playwright) 4. Tester manuellement 5. Valider qu’aucune régression
6.4. webapp-testing
Description: Skill pour tester les applications web: navigateur, responsive design, accessibility, performance, et cross-browser testing.
Quand l’utiliser: - Tu dois tester une web app complètement - Tu dois vérifier la responsiveness - Tu dois tester l’accessibilité (a11y) - Tu dois valider la performance - Tu dois tester sur plusieurs navigateurs
Comment l’utiliser:
/webapp-testing
Elle guide à tester via: 1. DevTools du navigateur 2. Accessibility tools (axe) 3. Performance tools (Lighthouse) 4. Cross-browser testing 5. Manual testing checklists
7. Catégorie: Documentation & Contenu
Cette catégorie groupe les skills pour documenter et créer du contenu: docs, PDF, Excel, Word, slides.
7.1. doc-coauthoring
Description: Workflow complet pour co-créer de la documentation. Guide à travers context gathering, structuring, drafting, et reader testing.
Quand l’utiliser: - Tu dois écrire de la documentation - Tu dois créer une spec technique - Tu dois co-écrire un plan avec des retours - Tu dois itérer une doc pour la rendre claire
Comment l’utiliser:
/doc-coauthoring
Elle guide: 1. Stage 1: Rassembler le contexte et les questions 2. Stage 2: Structurer et rédiger section par section 3. Stage 3: Tester la doc avec un lecteur frais
7.2. pdf
Description: Skill pour générer, modifier, et manipuler des fichiers PDF: créer des rapports, extraire du texte, combiner des PDFs, etc.
Quand l’utiliser: - Tu dois générer un PDF - Tu dois extraire du contenu d’un PDF - Tu dois combiner plusieurs PDFs - Tu dois modifier un PDF existant
Comment l’utiliser:
/pdf
7.3. pptx
Description: Skill pour créer et éditer des présentations PowerPoint: slides, animations, layouts, transitions.
Quand l’utiliser: - Tu dois créer une présentation - Tu dois générer des slides à partir de données - Tu dois ajouter des animations - Tu dois éditer une présentation existante
Comment l’utiliser:
/pptx
7.4. docx
Description: Skill pour créer et éditer des documents Word: documents, rapports, lettres.
Quand l’utiliser: - Tu dois créer un document Word - Tu dois générer un rapport - Tu dois ajouter de la mise en forme - Tu dois combiner des documents
Comment l’utiliser:
/docx
7.5. xlsx
Description: Skill pour créer et manipuler des feuilles Excel: données, formules, graphiques, mise en forme.
Quand l’utiliser: - Tu dois créer une feuille de calcul - Tu dois analyser des données en Excel - Tu dois générer des rapports tabulaires - Tu dois ajouter des graphiques aux données
Comment l’utiliser:
/xlsx
8. Catégorie: Spécialisé ClaraJob
Skills spécialisées pour le projet ClaraJob (déjà documentées dans Backend et Frontend sections).
8.1. clarajob-ai-expert
Description: Expert en IA et machine learning pour ClaraJob. Aide à intégrer des features AI, modèles ML, ou algorithmes spécialisés dans le projet.
Quand l’utiliser: - Tu veux ajouter une feature IA à ClaraJob - Tu dois intégrer un modèle ML - Tu dois implémenter un algorithme spécialisé - Tu travailles sur la couche IA du projet
Comment l’utiliser:
/clarajob-ai-expert
9. Catégorie: Intégrations & Outils
Skills pour intégrer des outils et services externes: plugins, MCP, Stripe, MongoDB, WordPress, etc.
9.1. plugin-dev:create-plugin
Description: Skill pour créer un plugin Claude Code: structure, configuration, commands, hooks, et publication.
Quand l’utiliser: - Tu veux créer un plugin Claude - Tu veux ajouter une fonctionnalité customisée - Tu veux intégrer un outil externe
Comment l’utiliser:
/plugin-dev:create-plugin
L’agent guide: 1. Définir le but du plugin 2. Créer la structure de base 3. Ajouter des commands/hooks 4. Configurer le plugin.json 5. Tester et publier
9.2. plugin-dev:plugin-validator
Description: Valide qu’un plugin Claude est correctement structuré, conformes aux standards, et prêt à publier.
Quand l’utiliser: - Tu as créé un plugin et veux le valider - Tu veux vérifier la configuration - Tu cherches les erreurs avant publication
Comment l’utiliser:
/plugin-dev:plugin-validator
9.3. plugin-dev:skill-reviewer
Description: Revue de qualité pour les skills: descriptions, workflows, et best-practices.
Quand l’utiliser: - Tu as créé une skill et veux la valider - Tu cherches à l’améliorer - Tu veux des suggestions de qualité
Comment l’utiliser:
/plugin-dev:skill-reviewer
9.4. plugin-dev:agent-creator
Description: Crée des agents personnalisés pour le projet: spécialisations, behaviors, tools disponibles.
Quand l’utiliser: - Tu veux créer un agent spécialisé - Tu veux un agent customisé pour ta task - Tu veux automatiser avec des agents
Comment l’utiliser:
/plugin-dev:agent-creator
9.5. mcp-builder
Description: Skill pour créer et configurer des Model Context Protocol (MCP) servers: définir les tools, resources, et se connecter avec Claude.
Quand l’utiliser: - Tu veux créer un MCP server - Tu veux exposer des tools à Claude - Tu veux une intégration bidirectionnelle avec une API
Comment l’utiliser:
/mcp-builder
9.6. stripe:stripe-docs
Description: Accès à la documentation Stripe: API reference, guides, exemples, best-practices.
Quand l’utiliser: - Tu dois faire une intégration Stripe - Tu cherches comment implémenter un payment flow - Tu veux connaître les APIs Stripe
Comment l’utiliser:
/stripe:stripe-docs
9.7. stripe:stripe-directory
Description: Répertoire des produits Stripe et leurs usages: Payments, Connect, Billing, Issuing, etc.
Quand l’utiliser: - Tu cherches un produit Stripe pour un use-case - Tu veux comprendre les offerings Stripe - Tu cherches quelle intégration choisir
Comment l’utiliser:
/stripe:stripe-directory
9.8. stripe:connect-recommend
Description: Recommande le meilleur modèle Stripe Connect pour ton use-case: Standard vs Express vs Custom.
Quand l’utiliser: - Tu dois mettre en place Stripe Connect - Tu cherches l’architecture appropriée - Tu as besoin de recommend de séparation de comptes
Comment l’utiliser:
/stripe:connect-recommend
9.9. web-artifacts-builder
Description: Crée des pages HTML/CSS/JS standalone qui fonctionnent immédiatement: landing pages, tools, demos, etc.
Quand l’utiliser: - Tu veux créer un outil web rapide - Tu veux une landing page - Tu veux un prototype web - Tu veux une démonstration interactive
Comment l’utiliser:
/web-artifacts-builder
9.10. dataviz
Description: Skill pour créer des visualisations de données: charts, dashboards, graphiques avec design cohérent.
Quand l’utiliser: - Tu dois créer un graphique/chart - Tu dois visualiser des données - Tu veux une dashboard - Tu veux des statistiques visuelles
Comment l’utiliser:
/dataviz
10. Catégorie: Productivité & Automation
Skills pour automatiser des tâches, configurer l’environnement, et gérer la productivité.
10.1. loop
Description: Automatise une tâche/commande qui se répète sur un intervalle: polling, vérifications périodiques, checks réguliers.
Quand l’utiliser: - Tu veux exécuter quelque chose toutes les 5 minutes - Tu veux checker le status d’un build régulièrement - Tu veux une vérification périodique
Comment l’utiliser:
/loop 5m /ta-commande
Ou sans intervalle pour auto-pacing:
/loop /ta-commande
10.2. schedule
Description: Crée des tâches scheduled (cron jobs) qui s’exécutent sur un calendrier: quotidien, hebdomadaire, à une heure spécifique.
Quand l’utiliser: - Tu veux une tâche qui s’exécute chaque jour à 9h - Tu veux une vérification hebdomadaire - Tu veux du reporting automatique - Tu veux une tâche cron
Comment l’utiliser:
/schedule
10.3. code-review:code-review
Description: Demande une review de code sur une PR: analyse le code, propose des améliorations, et détecte les bugs potentiels.
Quand l’utiliser: - Tu as une PR et veux une review - Tu cherches des suggestions d’amélioration - Tu veux vérifier la qualité avant merge
Comment l’utiliser:
/code-review
Ou avec un PR spécifique:
/code-review ultra <PR#>
10.4. remember:remember
Description: Skill pour gérer ta mémoire persistente: sauvegarder du contexte, des décisions, des learnings pour les conversations futures.
Quand l’utiliser: - Tu veux que Claude se souvienne d’une décision - Tu veux documenter un learning - Tu veux persister du contexte de projet
Comment l’utiliser:
/remember
10.5. update-config
Description: Configure Claude Code settings: permissions, env vars, hooks, integrations.
Quand l’utiliser: - Tu veux ajouter une permission pour une tool - Tu veux configurer une intégration - Tu veux automatiser un workflow via hooks - Tu veux ajouter une variable d’environnement
Comment l’utiliser:
/update-config
10.6. simplify
Description: Revoit du code pour le simplifier: moins de duplication, meilleure réutilisabilité, plus clair.
Quand l’utiliser: - Tu veux nettoyer du code - Tu veux éliminer la duplication - Tu veux une refactorisation légère - Tu veux améliorer la lisibilité
Comment l’utiliser:
/simplify
10.7. fewer-permission-prompts
Description: Réduit les permission prompts en allowlisting les outils/commandes que tu utilises souvent.
Quand l’utiliser: - Tu en as marre des permission prompts - Tu veux autoriser automatiquement certains tools - Tu veux streamliner ton workflow
Comment l’utiliser:
/fewer-permission-prompts
10.8. run
Description: Lance l’application du projet: dev server, build, exécution, screenshot pour voir ton travail en action.
Quand l’utiliser: - Tu veux voir ton code fonctionner - Tu veux vérifier une feature en dev - Tu veux tester dans le navigateur - Tu veux un screenshot de l’app
Comment l’utiliser:
/run
10.9. init
Description: Initialise le projet: setup, dependencies, configuration de base.
Quand l’utiliser: - Tu commences un nouveau projet - Tu veux mettre en place un nouveau repo - Tu veux un setup initial
Comment l’utiliser:
/init
11. Conclusion & Bonnes Pratiques
11.1. Récapitulatif
Ce guide documente l’ensemble des skills Claude Code disponibles. Chaque skill est un workflow qui structure et guide ton travail.
Les types de skills: - Superpowers: Processus fondamental (brainstorming, planning, testing, review) - Domain Experts: Spécialisés par technologie (backend, frontend, database, design) - Content Tools: Pour générer du contenu (documentation, PDF, slides, Excel) - Automation: Pour répéter ou scheduler des tâches
11.2. Quand et Comment Utiliser
Règle d’or: Si une skill s’applique à ta tâche, utilise-la. Les skills sont conçues pour: - Économiser du temps: Pas besoin de penser au processus, juste suivre - Éviter les erreurs: Processes guidés par l’expérience - Qualité cohérente: Chaque fois que tu l’utilises, tu obtiens une qualité constante - Parallélisation: Orchestrer des agents pour faire du travail en parallèle
11.3. Bonnes Pratiques
-
Invoquer les skills rapidement: Dès que tu identifies la tâche, invoke la skill correspondante
-
Fournir le contexte complet: Les skills posent des questions; réponds-y honnêtement et complètement
-
Itérer: Les skills sont conçues pour l’itération; use de tes retours pour améliorer
-
Tester avant de déclarer "done": Utilise
verification-before-completiontoujours -
Documenter les décisions: Utilise
/rememberpour persister du contexte -
Paralléliser quand possible: Use
dispatching-parallel-agentspour des tâches indépendantes -
Code review avant merge: Toujours demander une review via
requesting-code-review
11.4. Améliorations et Feedback
Cette documentation est vivante. Si tu découvres une meilleure façon d’utiliser une skill, ou tu trouves une gap, partage ton feedback avec l’équipe.
Contacts:
- Pour des questions sur les skills: /help
- Pour des améliorations: partage tes suggestions
- Pour du brainstorming sur comment utiliser une skill: invoque-la et demande
11.5. Prochaines Étapes
-
Explore: Lis les sections pertinentes pour ta tâche
-
Invoque: Teste les skills qui s’appliquent
-
Apprend: Note comment chaque skill fonctionne
-
Personnalise: Utilise
/rememberet/update-configpour adapter à tes besoins -
Itère: Relis ce guide quand tu découvres une nouvelle tâche
Dernière mise à jour: 25 juillet 2026 Auteur: Ulrich Takoukam Contact: clarajobcontact@gmail.com