YOAT Lab
10 · Module 4 — Développement assisté

Le mode plan en développement web

Cinq angles pour ne jamais démarrer à l'aveugle.
La structure avant le code.

5 minutesMode plan (Shift+Tab)5 angles · Itérer le plan
§01 · Pourquoi planifier avant de coder

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.

Le réflexe Shift+Tab

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.

§02 · Les 5 angles du mode plan

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.

Angle 1

Données

Quelles entités ? Quelles relations ? Quels champs obligatoires/optionnels ? Quel schéma Supabase ?

Angle 2

API

Quels endpoints ? GET/POST/PATCH/DELETE ? Quels paramètres de filtrage ? Quelle authentification requise ?

Angle 3

UI

Quels composants ? Quelle navigation ? Quels états (chargement, erreur, vide, données) ?

Angle 4

Tests

Quels cas critiques à tester manuellement ? Quelles validations de formulaire ? Quels edge cases ?

Angle 5

Migration

Si les données existent déjà : comment migrer ? Quelle procédure de rollback si la migration échoue ?

§03 · Démo — un plan détaillé en action

Le mode plan, vu de l'intérieur

1

Maj+Tab : activer le mode plan

Avant la demande, Maj+Tab. Claude saura qu'il ne doit toucher à aucun fichier.

2

Décrire l'intention complète

Demandez la fonctionnalité dans son ensemble. Pas étape par étape, pas "crée-moi un fichier".

3

Recevoir le plan numéroté

5 étapes, chacune avec son périmètre, son emplacement, sa taille estimée.

4

Modifier OU valider

Vous pouvez ajuster avant de coder. Claude n'a touché à RIEN tant que vous n'avez pas validé.

claude.ai · session #4127 VOUS · Maj+Tab activé Ajoute à mon dashboard une page « Pipeline commercial » avec : liste filtrable des opportunités, vue kanban par étape, statistiques en haut, et export CSV. Ne touche pas au code, propose un plan. CLAUDE · MODE PLAN Voici mon plan d'action en 5 étapes. Aucun fichier créé tant que vous n'avez pas validé. 1 Schéma de données : table opportunities Colonnes : id, client_id, étape (lead/qualif/proposition/négo/closed), montant, date_close, owner_id, notes. → Migration Supabase : 1 fichier SQL · ~20 lignes · RLS sur owner_id 2 Route et page Next.js : /pipeline Page server component qui charge les opportunités via Supabase, layout grid 3 colonnes statistiques + zone vue. → src/app/pipeline/page.tsx · ~80 lignes 3 Composant TableOpportunities avec filtres Table shadcn + filtres (étape, owner, période). Tri par colonne. État dans l'URL pour partage. → src/components/pipeline/TableOpportunities.tsx · ~150 lignes 4 Vue Kanban avec drag-and-drop 5 colonnes par étape. Drag d'une carte met à jour l'étape. Optimistic update + rollback si erreur. → Lib : @dnd-kit/core · KanbanBoard.tsx + 1 hook · ~200 lignes 5 Export CSV côté serveur Action server qui génère le CSV, respecte les filtres actifs, envoie en téléchargement. → src/app/pipeline/export/route.ts · ~50 lignes ⏱ Estimation : 5 étapes, ~500 lignes, 2 sessions de travail. Modifier le plan ✓ Valider et coder
§04 · Un plan typique — exemple

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
§05 · Itérer le plan avant de coder

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.

1.
Lire le plan attentivement. Cherchez les incohérences, les oublis, les hypothèses que Claude a faites sans vous. C'est maintenant que ça coûte peu de changer.
2.
Amender en langage naturel. « Ajoute un champ priorité (haute/moyenne/basse) sur les missions. Pour l'UI, commence par la page liste seulement — la page détail en phase 2. » Claude met à jour le plan.
3.
Valider et lancer. Une fois le plan stabilisé, un simple « OK, implémente » déclenche l'exécution dans l'ordre du plan. Claude suit la séquence définie.
§06 · Subdiviser en tâches courtes

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.

Bonne tâche

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.

Bonne tâche

Générer le composant MissionCard

Un composant isolé, testable visuellement. Claude le génère, vous l'ouvrez dans le navigateur.

Mauvaise tâche

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.

Mauvaise tâche

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.

Fin · Leçon 10 acquise

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.

Leçon suivante → 11 · UI du tableau de bord
Quiz · Validation des acquis

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.

1 / 8
Question à choix multiple

Quel raccourci active le mode plan dans Claude Code ?

Cliquez sur lecture pour démarrer.
§00 · Intro 0:00 / 5:00 Voix activée