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

.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