Créer un Skill custom pas à pas

# Skills de projet (partagés avec l'équipe via git)
.claude/
  commands/
    review-pr.md         # → /project:review-pr
    deploy-staging.md    # → /project:deploy-staging
    create-component.md  # → /project:create-component
    db-migration.md      # → /project:db-migration

# Skills personnels (disponibles dans tous vos projets)
~/.claude/
  commands/
    tdd-guide.md         # → /user:tdd-guide
    brainstorm.md        # → /user:brainstorm
    quick-review.md      # → /user:quick-review

# Créer le dossier commands s'il n'existe pas
mkdir -p .claude/commands

# Créer le fichier du Skill
touch .claude/commands/create-component.md

# Créer un composant React

Tu es un expert frontend React/TypeScript. Tu crées des composants
UI accessibles, performants et conformes aux conventions du projet.

## Contexte du projet

- React 18+ avec TypeScript strict (pas de `any`)
- Tailwind CSS pour les styles
- Vitest + Testing Library pour les tests
- Composants fonctionnels avec hooks uniquement
- Exports nommés (pas de default export)
- Un composant par fichier, 200-400 lignes max

## Instructions

Crée le composant décrit par l'utilisateur en suivant ces étapes :

1. **Analyse** : Comprends le besoin exprimé dans $ARGUMENTS
2. **Interface** : Définis les props avec une interface TypeScript
   - Toutes les props en `readonly`
   - Props optionnelles avec des valeurs par défaut sensées
   - JSDoc sur les props non évidentes
3. **Composant** : Implémente avec les bonnes pratiques
   - Attributs ARIA pour l'accessibilité
   - Gestion du focus si interactif
   - Support du dark mode via les classes Tailwind
   - Responsive (mobile-first)
4. **Tests** : Écris des tests avec Testing Library
   - Test de rendu par défaut
   - Test de chaque variante
   - Test des interactions utilisateur
   - Test d'accessibilité (rôles ARIA)
5. **Export** : Mets à jour le barrel file si nécessaire

## Format de sortie

Produis les fichiers suivants :
- `src/components/NomDuComposant.tsx`
- `src/components/__tests__/NomDuComposant.test.tsx`

## Exemple

Pour la commande : `/project:create-component Badge - badge de statut
avec variantes success, warning, error`

Tu créeras un composant Badge avec :
- 3 variantes de couleur (success=vert, warning=orange, error=rouge)
- Tailles sm/md/lg
- Support du texte et d'une icône optionnelle
- Tests complets

# Lancer Claude Code
claude

# Invoquer le Skill
/project:create-component Alert - composant d'alerte dismissible avec variantes info, success, warning, error

# Créer un endpoint API

Tu es un expert backend Node.js/TypeScript. Tu crées des endpoints
API RESTful conformes aux conventions du projet.

## Architecture

Le projet suit le pattern Repository :
- `src/routes/` - Définition des routes (Express/Fastify)
- `src/controllers/` - Logique de contrôle et validation
- `src/services/` - Logique métier
- `src/repositories/` - Accès aux données
- `src/schemas/` - Schémas de validation (Zod)

## Conventions API

- Format de réponse : `{ success, data, error, meta }`
- Validation des entrées avec Zod
- Gestion d'erreurs centralisée
- Rate limiting sur tous les endpoints
- Parameterized queries (jamais de string concatenation)

## Instructions

Pour $ARGUMENTS, crée :

1. Le schéma Zod de validation (`src/schemas/`)
2. Le repository avec les opérations CRUD (`src/repositories/`)
3. Le service avec la logique métier (`src/services/`)
4. Le controller avec validation et gestion d'erreurs (`src/controllers/`)
5. La route avec les middlewares appropriés (`src/routes/`)
6. Les tests unitaires pour chaque couche

## Sécurité

- JAMAIS de secrets en dur dans le code
- Toujours valider les entrées utilisateur
- Utiliser des requêtes paramétrées
- Vérifier l'authentification et l'autorisation

# Checklist de déploiement

Tu es un ingénieur DevOps senior. Tu guides le développeur à travers
la checklist de déploiement en production.

## Vérifications pré-déploiement

Vérifie chaque point et rapporte le statut :

### Code
- [ ] Tous les tests passent (`npm test`)
- [ ] Le linting est propre (`npm run lint`)
- [ ] Le build de production réussit (`npm run build`)
- [ ] Pas de `console.log` ou `debugger` restants
- [ ] Pas de TODO critiques non résolus

### Sécurité
- [ ] Pas de secrets dans le code source
- [ ] Les dépendances n'ont pas de CVE critiques (`npm audit`)
- [ ] Les headers de sécurité sont configurés
- [ ] Le CORS est correctement restreint

### Base de données
- [ ] Les migrations sont à jour
- [ ] Les migrations sont réversibles (rollback possible)
- [ ] Les index nécessaires sont créés

### Infrastructure
- [ ] Les variables d'environnement sont configurées
- [ ] Le monitoring est en place
- [ ] Les alertes sont configurées
- [ ] Le plan de rollback est documenté

## Instructions

1. Exécute chaque vérification automatisable
2. Pour chaque point, indique : PASS, FAIL ou SKIP (avec raison)
3. Bloque le déploiement si un point CRITICAL est en FAIL
4. Produis un rapport final avec la décision GO / NO-GO

# Review intelligente

## Mode de fonctionnement

Analyse le diff fourni dans $ARGUMENTS.

Si le diff contient des fichiers de test uniquement :
- Fais une review focalisée sur la qualité des tests
- Vérifie la couverture des cas limites
- Ignore les règles de style du code de production

Si le diff contient des fichiers de migration de base de données :
- Vérifie que la migration est réversible
- Vérifie les index et les contraintes
- Alerte sur tout risque de perte de données

Si le diff contient des fichiers de configuration (env, yaml, json) :
- Vérifie qu'aucun secret n'est exposé
- Compare avec les fichiers d'exemple (.env.example)
- Vérifie la cohérence entre environnements

Sinon :
- Fais une review standard complète

# Migration de composant

## Étapes

### Étape 1 : Audit
- Liste toutes les utilisations du composant dans le projet
- Identifie les props utilisées et leurs variantes
- CHECKPOINT : montre la liste et attends confirmation avant de continuer

### Étape 2 : Nouveau composant
- Crée le nouveau composant avec les mêmes props
- Ajoute les tests du nouveau composant
- CHECKPOINT : les tests doivent passer avant l'étape suivante

### Étape 3 : Migration progressive
- Remplace les imports un par un
- Après chaque remplacement, vérifie que le build passe
- CHECKPOINT : tous les fichiers migrés, tous les tests verts

### Étape 4 : Nettoyage
- Supprime l'ancien composant
- Mets à jour le barrel file
- Vérifie qu'aucune référence à l'ancien composant ne reste

# Feature complète

Pour la fonctionnalité décrite dans $ARGUMENTS :

1. Utilise /project:plan pour créer le plan d'implémentation
2. Pour chaque tâche du plan, utilise /user:tdd-guide pour l'implémenter
3. Une fois tout implémenté, utilise /user:code-reviewer pour vérifier
4. Corrige les problèmes identifiés par le reviewer
5. Utilise /project:deploy-checklist pour valider le déploiement

/project:create-component Button primaire avec icône et loading state
#                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
#                        Tout ceci devient $ARGUMENTS

Crée le composant décrit par l'utilisateur : $ARGUMENTS

## Contexte

- Environnement courant : utilise les variables d'env disponibles
- Si NODE_ENV est "production", applique des contraintes strictes
- Si CI est "true", formate la sortie en JSON pour le pipeline

# Créer un composant pour $PROJECT_TYPE

Si le projet utilise React (détecté via package.json) :
- Composant fonctionnel avec hooks
- Tests avec Testing Library

Si le projet utilise Vue (détecté via package.json) :
- Composant SFC avec Composition API
- Tests avec Vue Test Utils

Si le projet utilise Svelte (détecté via package.json) :
- Composant .svelte
- Tests avec Svelte Testing Library

# Les Skills de projet sont dans le repo
git add .claude/commands/create-component.md
git commit -m "feat: add create-component skill with accessibility checks"

feat: add deploy-checklist skill          # nouveau skill
fix: fix tdd-guide missing edge cases     # correction
refactor: simplify code-reviewer criteria # amélioration
docs: update create-api skill examples    # documentation

.claude/
  commands/
    # Workflow de développement
    create-component.md    # Créer un composant UI
    create-api.md          # Créer un endpoint API
    create-migration.md    # Créer une migration DB

    # Qualité
    review-pr.md           # Review de PR standardisée
    security-audit.md      # Audit de sécurité
    perf-check.md          # Vérification des performances

    # Opérations
    deploy-staging.md      # Déployer en staging
    deploy-prod.md         # Déployer en production
    rollback.md            # Procédure de rollback

    # Documentation
    write-adr.md           # Écrire une ADR (Architecture Decision Record)
    update-api-docs.md     # Mettre à jour la doc API