Erreurs courantes à éviter

# Mauvais prompt
"Fais-moi une page de login"

# Bon prompt
"Crée une page de connexion en React/TypeScript avec Tailwind CSS.
Champs : email (requis, format validé) et mot de passe (requis, min 8 caractères).
Inclus un lien 'Mot de passe oublié' et un bouton 'Se connecter avec Google'.
Gère les états : formulaire, loading, erreur (mauvais identifiants), succès.
Utilise react-hook-form avec validation Zod.
Accessible : labels explicites, aria-describedby pour les erreurs, focus management."

# Mauvais prompt
"Crée un composant de tableau"

# Bon prompt
"Crée un composant DataTable en React/TypeScript pour Next.js 14 (App Router).
Stack : Tailwind CSS, @tanstack/react-table v8.
Fonctionnalités : tri par colonne, pagination (20 items/page), recherche globale.
Les données viennent d'une API REST avec le format { data: T[], total: number }.
TypeScript strict, pas de any. Exports nommés uniquement."

# Mauvais prompt
"Crée-moi une app complète de gestion de projet avec auth, dashboard,
gestion des tâches, API, base de données, tests, CI/CD et déploiement"

# Bon prompt (décomposé en étapes)
"Étape 1 : Créons le schéma de base de données.
Crée le schema.prisma pour une app de gestion de tâches avec :
- Table User (id uuid, email unique, name, passwordHash, createdAt)
- Table Project (id uuid, name, description, ownerId FK User, createdAt)
- Table Task (id uuid, title, description, status enum, priority enum,
  projectId FK Project, assigneeId FK User nullable, dueDate nullable)
Relations : User 1→N Project, Project 1→N Task, User 1→N Task (assigned)"

# Mauvais prompt (repartir de zéro)
"Finalement, ce n'est pas ce que je voulais.
Refais un composant Button complètement différent."

# Bon prompt (itérer sur l'existant)
"Le composant Button est une bonne base. Voici 3 ajustements :
1. Remplace les variantes 'info' et 'success' par 'ghost' et 'outline'
2. Ajoute la prop 'leftIcon' et 'rightIcon' de type LucideIcon
3. L'état loading doit désactiver le bouton ET remplacer le label par un spinner
Garde tout le reste tel quel."

# Mauvais prompt
"Crée une fonction qui récupère les utilisateurs depuis l'API"

# Bon prompt
"Crée une fonction fetchUsers qui récupère les utilisateurs depuis GET /api/users.
Gère les cas suivants :
- Succès : retourne le tableau d'utilisateurs typé User[]
- Erreur réseau : retourne une erreur explicite avec retry automatique (3 tentatives)
- Erreur 401 : déclenche le refresh token puis retente la requête
- Erreur 429 : attend le délai indiqué dans Retry-After puis retente
- Erreur 500 : log l'erreur et retourne un message user-friendly
- Timeout : abort après 10 secondes avec message explicite
Retourne un type Result<User[], ApiError> (pas de throw)."

# Mauvais prompt (template non adapté)
"Tu es un développeur expert. Crée un CRUD complet pour User."

# Bon prompt (template adapté au projet)
"Tu es un développeur backend TypeScript/Express dans notre projet MonApp.
Crée le CRUD User en suivant nos conventions (voir CLAUDE.md) :
- Repository pattern (src/repositories/user.repository.ts)
- Service layer (src/services/user.service.ts)
- Controller (src/controllers/user.controller.ts)
- Validation Zod (src/schemas/user.schema.ts)
- Format de réponse : { success, data, error, meta }
- Tests du service avec mocks du repository"

# Mauvais prompt
"Crée un hook useDebounce"

# Bon prompt
"Crée un hook useDebounce<T>(value: T, delay: number): T.
Le hook retourne la valeur debouncée après 'delay' ms sans changement.
Nettoie le timeout au unmount et quand value/delay changent.

Inclus les tests unitaires (Vitest + Testing Library renderHook) :
- Retourne la valeur initiale immédiatement
- Retourne la valeur mise à jour après le délai
- Ne met pas à jour si la valeur change avant le délai
- Nettoie le timeout au démontage du composant
- Fonctionne avec des types génériques (string, number, object)"

# Mauvais (répéter à chaque prompt)
"Utilise TypeScript strict, pas de any, Tailwind CSS, composants fonctionnels,
exports nommés, fichiers < 400 lignes, immutabilité..."

# Bon (utiliser CLAUDE.md)
Mettez ces informations dans votre CLAUDE.md une fois pour toutes.
Ensuite, votre prompt se réduit à :
"Crée un composant SearchBar avec autocomplétion et debounce de 300ms."

# Mauvais (réexpliquer tout)
"Pour mon projet Next.js 14 TypeScript Tailwind CSS Prisma PostgreSQL
(celui dont on parlait tout à l'heure), crée un..."

# Bon (s'appuyer sur le contexte)
"Maintenant, crée le middleware de rate limiting pour les endpoints
qu'on vient de créer. Utilise la même structure que le middleware auth."

# Mauvais (accepter sans vérifier)
"Super, merci !" → on passe à la suite

# Bon (demander une vérification)
"Avant de continuer, vérifie le code que tu viens de générer :
1. Y a-t-il des failles de sécurité ? (injection SQL, XSS, CSRF)
2. Les edge cases sont-ils gérés ? (null, undefined, tableau vide, string vide)
3. Le code est-il testable ? (pas de dépendances hardcodées)
4. Les performances sont-elles acceptables pour 10 000 items ?
5. Le TypeScript est-il strict ? (pas de any, pas de as unknown)"