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

  1. Brainstorming (superpowers:brainstorming) → Explore l’idée, les requirements, les approches

  2. Écrire un Plan (superpowers:writing-plans) → Documente les étapes et les fichiers critiques

  3. Exécuter le Plan (superpowers:executing-plans) → Orchestre l’implémentation

  4. Développement Frontend (vue-clarajob-expert) → Crée les composants Vue avec la spécialiste du projet

  5. Développement Backend (clarajob-spring-backend-expert) → Implémente l’API et la logique métier

  6. Test-Driven (superpowers:test-driven-development) → Écris les tests avant/pendant le code

  7. Code Review (superpowers:requesting-code-review) → Demande un review de tes changements

  8. Vérification (superpowers:verification-before-completion) → Valide tout avant de terminer

  9. 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

superpowers:brainstorming + feature-workflow

…​fixer un bug

superpowers:systematic-debugging

…​écrire du code backend

backend-developer ou clarajob-spring-backend-expert

…​écrire du code frontend

frontend-developer ou vue-clarajob-expert

…​designer une UI

frontend-design ou figma:figma-design-to-code

…​écrire des tests

testing-expert ou write-tests

…​écrire de la documentation

doc-coauthoring

…​review du code

code-review:code-review

…​fixer un bug difficile

superpowers:systematic-debugging

…​planifier une tâche complexe

superpowers:writing-plans

…​créer un plugin Claude

plugin-dev:create-plugin

…​automatiser une tâche

loop ou schedule

1.8. Comment Utiliser Ce Guide

Pour chaque skill, tu trouveras:

  1. Description — Qu’est-ce que ça fait exactement

  2. Quand l’utiliser — Les signaux qui disent "c’est le moment"

  3. Comment l’utiliser — Les étapes et le workflow

  4. Exemples concrets — Des cas réels d’utilisation

  5. Cas particuliers — Les pièges et variations

  6. 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

10.10. review

Description: Fait un review général: architecture, code quality, best-practices, security.

Quand l’utiliser: - Tu veux une review approfondie - Tu cherches des améliorations globales - Tu veux un audit de qualité

Comment l’utiliser:

/review

10.11. security-review

Description: Revue de sécurité du code: vulnerabilités, injection risks, authentification, cryptographie, etc.

Quand l’utiliser: - Tu veux checker la sécurité du code - Tu cherches des failles potentielles - Tu veux une audit de sécurité

Comment l’utiliser:

/security-review

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

  1. Invoquer les skills rapidement: Dès que tu identifies la tâche, invoke la skill correspondante

  2. Fournir le contexte complet: Les skills posent des questions; réponds-y honnêtement et complètement

  3. Itérer: Les skills sont conçues pour l’itération; use de tes retours pour améliorer

  4. Tester avant de déclarer "done": Utilise verification-before-completion toujours

  5. Documenter les décisions: Utilise /remember pour persister du contexte

  6. Paralléliser quand possible: Use dispatching-parallel-agents pour des tâches indépendantes

  7. 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

  1. Explore: Lis les sections pertinentes pour ta tâche

  2. Invoque: Teste les skills qui s’appliquent

  3. Apprend: Note comment chaque skill fonctionne

  4. Personnalise: Utilise /remember et /update-config pour adapter à tes besoins

  5. 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