Chapitre 5.5 — Atelier : première feature de TaskFlow

⏱️ TL;DR — On construit le CRUD des tâches de TaskFlow en pilotant toute la boucle : plan → tranches exécutées par prompts à trois ingrédients (ancrés sur le modèle) → preuve à chaque étape → contexte net. On voit que la cohérence tient parce que le cadre (P2-P4) est là et qu’on pilote la boucle (P5), pas par miracle. C’est le patron de toutes tes futures features.

🎯 Objectifs

• Dérouler une feature complète du plan à la preuve.
• Découper en tranches vérifiables.
• Ancrer chaque prompt sur l’existant pour la cohérence.
• Conclure chaque tranche par une preuve observable.

Étape 1 — Le plan (rappel P2)

Brief court, puis plan mode :

OBJECTIF : CRUD des tâches d'un projet. Exclu : drag & drop, temps réel.
STACK/CONVENTIONS : voir CLAUDE.md (feature-folders, server actions, Zod, tokens).
CRITÈRE : page /projects/[id] qui liste/crée/édite/supprime ; tests verts ; build ok.
CONTRAINTE : plan mode d'abord.

Le plan proposé (corrigé selon la checklist 2.2) :

1. schema.ts — Zod Task { title, status: enum(todo|doing|done) }
2. queries.ts — listTasks(projectId)
3. actions.ts — createTask / updateTask / deleteTask (server actions, valident via schema)
4. components/ — TaskList, TaskItem, TaskForm (UI depuis @/components/ui)
5. app/projects/[id]/page.tsx — compose la liste + le form
6. tests — actions (create/update/delete) + schema

On valide après avoir corrigé (ici : statut en enum, un form réutilisé création/édition avec une prop mode).

Étape 2 — Les tranches

On n’exécute pas tout d’un bloc : on découpe en tranches vérifiables, chacune conclue par une preuve. Chaque prompt = trois ingrédients + ancrage.

Tranche A — le schéma et la lecture

OBJECTIF : schema.ts (Zod) + queries.ts (listTasks) pour la feature tasks.
ANCRAGES : structure de src/features/ (voir src/features/CLAUDE.md). Status = enum.
CRITÈRE : type Task inféré du schéma ; listTasks typé ; npm test (schema) vert.

Extrait produit :

// src/features/tasks/schema.ts
import { z } from 'zod'
export const taskStatus = z.enum(['todo', 'doing', 'done'])
export const taskInput = z.object({
  title: z.string().min(1, 'Titre requis'),
  status: taskStatus.default('todo'),
})
export type TaskInput = z.infer<typeof taskInput>

Preuve : npm test sur le schéma → vert. ✅

Tranche B — les mutations

OBJECTIF : actions.ts — createTask, updateTask, deleteTask (server actions).
ANCRAGES : valident l'entrée via taskInput avant d'écrire (contrat CLAUDE.md).
  Erreurs typées. Revalident la liste après mutation.
CRITÈRE : 3 tests (create/update/delete) verts ; pas de any.

On lit la diff (5.4) : validation présente ? revalidation après deleteTask ? erreurs typées ? Preuve : les 3 tests verts + on exerce une création dans l’app. ✅

Tranche C — l’UI

OBJECTIF : TaskList, TaskItem, TaskForm dans src/features/tasks/components/.
ANCRAGES : composants d'UI depuis @/components/ui (Button, Input) ; suivre button.tsx.
  TaskForm : prop mode 'create' | 'edit'. Tokens, pas de couleur en dur.
CRITÈRE : la page /projects/[id] liste/crée/édite/supprime ; rendu vérifié à l'écran.

Ici, la vérification visuelle (4.3/5.4) compte : on ouvre l’écran, on crée une tâche, on la passe en « doing », on la supprime — et on voit que ça marche et que c’est cohérent (mêmes boutons, mêmes tokens). ✅

Étape 3 — Ce que la boucle a garanti

• Cohérence : chaque tranche ancrée sur l’existant (button.tsx, src/features/CLAUDE.md) → mêmes patterns, mêmes tokens. Pas de dérive, parce que le cadre P2-P4 était là.
• Justesse : chaque tranche prouvée (test + exercice réel), pas « ça devrait marcher ».
• Netteté : une seule intention (le CRUD) dans la session ; on n’a rien laissé polluer.

Ce patron — plan → tranches ancrées → preuve — est le rythme de travail avec Claude Code. Tu le rejoueras sur chaque feature.

⚠️ Piège — Vouloir tout faire en un seul méga-prompt (« fais tout le CRUD »). Ça marche parfois, mais tu perds les points de contrôle : si la tranche B est fausse, tu le découvres mêlé à A et C. Découper, c’est vérifier tôt et garder la main.

🧭 Sur TaskFlow — Le CRUD est en place, cohérent et prouvé. Prochaines étapes du fil rouge : le rendre automatiquement vérifié (hooks, P7), déléguer certaines sous-tâches (P8), lui ajouter une skill maison (P9), le connecter à des outils externes (P10), et le passer à la moulinette qualité/CI (P11). Le socle tient ; on construit dessus.

✏️ Exercices

Exercice 1 — Une feature en tranches. Prends une feature réelle. Découpe-la en 3 tranches vérifiables, écris les 3 prompts (objectif/ancrages/critère), et conclus chaque tranche par une preuve. Compare avec ta façon habituelle (méga-prompt ?).

Exercice 2 — Preuve visuelle. Sur la tranche UI, ne te contente pas des tests : ouvre l’écran, exerce le flux complet, et note un défaut que les tests n’auraient pas vu.

🧠 Quiz de révision

Fin de la Partie 5. TaskFlow a sa première feature, cohérente et prouvée. On voit ensuite comment faire reprendre un projet existant par l’agent : Partie 6 — Reprendre & continuer un projet existant.