Le mode plan en développement web
Cinq angles pour ne jamais démarrer à l'aveugle.
La structure avant le code.
Claude code vite. Trop vite parfois.
Claude Code peut générer plusieurs centaines de lignes en quelques secondes. C'est une force. C'est aussi un risque : sans cadre préalable, il peut partir dans une direction que vous n'aviez pas voulue, créer une architecture difficile à défaire, ou livrer un code qui fonctionne mais ne correspond pas au besoin.
Shift+Tab au début d'une session active le mode plan. Claude propose une architecture, une liste de tâches, un séquençage — sans toucher à aucun fichier. Vous validez, ajustez, puis lancez l'exécution. Cette séquence évite 80 % des refactorings inutiles.
Couvrir toutes les dimensions
Pour un projet web, cinq angles structurent un plan complet. Demandez à Claude de les couvrir tous avant de toucher au code.
Données
Quelles entités ? Quelles relations ? Quels champs obligatoires/optionnels ? Quel schéma Supabase ?
API
Quels endpoints ? GET/POST/PATCH/DELETE ? Quels paramètres de filtrage ? Quelle authentification requise ?
UI
Quels composants ? Quelle navigation ? Quels états (chargement, erreur, vide, données) ?
Tests
Quels cas critiques à tester manuellement ? Quelles validations de formulaire ? Quels edge cases ?
Migration
Si les données existent déjà : comment migrer ? Quelle procédure de rollback si la migration échoue ?
Dashboard de suivi de missions
Vous : Mode plan. Je veux un dashboard pour suivre les missions en cours du cabinet. Chaque mission a un client, un statut, une date de début, une date de fin, et un montant. Couvre les 5 angles. Claude (plan) : ## Données Table missions : id, client_id, statut (enum), date_debut, date_fin, montant, created_by ## API GET /missions (filtrés par statut, pagination) POST /missions · PATCH /missions/:id ## UI Page liste (DataTable + filtres) · Page détail Formulaire création / modification ## Tests Mission sans date de fin · Montant nul Changement de statut · Pagination > 50 ## Migration N/A (projet new) · Seed de 10 missions test
Le plan est un dialogue, pas un document
Une fois le plan proposé, vous pouvez le corriger en langage naturel avant de lancer l'exécution. C'est cette étape que la plupart des gens sautent — et c'est là que se perdent le plus d'heures.
Une tâche = un commit
Même avec un bon plan, les tâches trop longues accumulent les risques. Une règle simple : chaque tâche doit pouvoir être validée et commitée en moins de 20 minutes.
Créer la table missions dans Supabase
Périmètre clair, résultat vérifiable, temps court. Si ça rate, on sait exactement où est le problème.
Générer le composant MissionCard
Un composant isolé, testable visuellement. Claude le génère, vous l'ouvrez dans le navigateur.
Implémenter tout le dashboard
Trop vaste. Si Claude part dans la mauvaise direction à la troisième sous-tâche, vous avez perdu beaucoup de contexte.
Faire la partie données et UI
Deux domaines distincts. Si la partie données a un bug, elle pollue le contexte de la partie UI.
Cap sur la leçon 11
Vous avez la méthode : Shift+Tab, cinq angles, itérer le plan, tâches courtes. La leçon suivante applique ces principes à la génération de l'UI du tableau de bord.
Exercice — appropriation
Sur votre projet de référence, lancez une session Claude Code en mode plan. Demandez-lui de couvrir les cinq angles pour la première fonctionnalité principale. Identifiez au moins deux choses à modifier dans le plan avant de valider. Notez ce que Claude avait supposé sans vous demander.
Quiz · Le mode plan en développement web
8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.