Chapitre 10.5 — Atelier : connecter TaskFlow
⏱️ TL;DR — On connecte TaskFlow au monde extérieur avec le minimum utile : le MCP GitHub (gérer issues/PR depuis la session, token scopé au repo), le MCP Playwright (l’agent voit enfin les écrans → vérification visuelle du CRUD, fermant l’angle mort de la Partie 4), et une commande
/revue(nos critères de revue, versionnée). Kit minimal, moindre privilège, angle mort UI fermé.
🎯 Objectifs
- Brancher GitHub et Playwright à faible risque.
- Fermer l’angle mort visuel avec un navigateur piloté.
- Ajouter une commande
/revuede projet. - Vérifier que l’ensemble compose avec le reste de l’outillage.
1. GitHub (moindre privilège)
On branche le MCP GitHub — via le plugin d’intégration officiel (10.3), qui configure le serveur pour nous — avec un token scopé au repo TaskFlow (pas admin, 10.1). L’agent peut alors lire les issues, ouvrir/commenter des PR, sans quitter la session.
Usage typique :
« Ouvre une PR pour la branche courante : titre + description qui expliquent
le pourquoi (pas juste le diff), et lie l'issue #12. »C’est la continuité (6.3) outillée : la PR porte la décision, et tout est fait depuis la session.
2. Playwright — fermer l’angle mort visuel
C’est la connexion qui manquait depuis la Partie 4. Avec le MCP Playwright, l’agent pilote un vrai navigateur : il ouvre un écran de TaskFlow, prend une capture, la regarde, et corrige ce qu’il voit.
« Lance l'app (npm run dev), ouvre /projects/[id], crée une tâche, passe-la en
"doing", supprime-la. Prends des captures à chaque étape et vérifie :
la liste se met à jour, les boutons suivent nos tokens, aucun débordement. »L’agent ne suppose plus que l’UI marche : il l’observe (5.4). La promesse de vérification visuelle de la Partie 4 est enfin tenue — et l’anti-dérive gagne un vrai filet.
💡 Réflexe d’architecte — Un navigateur piloté transforme la boucle : l’UI passe de « écrite et espérée » à « écrite, vue, corrigée ». C’est peut-être le MCP le plus rentable pour un dev front : il rend à l’agent le sens qui lui manquait (la vue), et referme l’angle mort le plus coûteux de tout le playbook.
3. La commande /revue
On ajoute .claude/commands/revue.md (versionnée), les critères de revue de TaskFlow :
Relis le diff courant selon nos critères TaskFlow :
- correction (bugs, cas d'erreur/vide, revalidation après mutation) ;
- CLAUDE.md (no-any, server actions, tokens, UI depuis @/components/ui, Zod partagé) ;
- cohérence de design (tokens, pas de composant réinventé) ;
- pas de hors-périmètre.
Format : fichier:ligne — problème — gravité. N'invente rien.Désormais, /revue injecte ces critères d’un mot. C’est le pendant dans la session de l’agent reviewer (P8, à côté) : tu choisis selon que tu veux un regard immédiat (commande) ou isolé (subagent).
Ce que TaskFlow a gagné
- GitHub dans la session (PR/issues), token scopé — moindre privilège.
- Playwright : l’angle mort visuel fermé, vérification d’UI réelle.
/revue: les critères de revue à portée de commande, partagés.
Tout compose avec l’existant : la skill new-feature (P9) scaffolde, les hooks (P7) formatent/testent, /revue ou l’agent reviewer (P8) relisent, Playwright vérifie le rendu, GitHub ouvre la PR. L’outillage de TaskFlow est maintenant complet et cohérent.
⚠️ Piège — Se laisser griser et brancher dix MCP/plugins. On s’en tient au minimum utile : GitHub + Playwright + une commande couvrent l’essentiel d’un dev web. Chaque connexion en plus est une surface (droits, bruit) à justifier. Le bon setup est petit et intentionnel, pas exhaustif.
🧭 Sur TaskFlow — Le fil rouge a désormais : direction (P2), mémoire (P3), design system (P4), features prouvées (P5), reprise (P6), qualité automatisée (P7), délégation (P8), une skill maison (P9), et des connexions au réel (P10). Il ne reste qu’à industrialiser la qualité : revue, debug, refacto, CI — c’est la Partie 11.
✏️ Exercices
Exercice 1 — Ferme ton angle mort. Branche un MCP navigateur (Playwright) sur un projet. Demande à l’agent d’ouvrir un écran, capturer, et commenter. Trouve un défaut visuel que « le code » ne montrait pas.
✅ Solution
En voyant la page, l’agent repère contraste, débordement, état manquant — invisibles dans le JSX. C’est la fermeture concrète de l’angle mort de la Partie 4. Si tu es dev front, c’est probablement le MCP le plus utile de ta config.
Exercice 2 — Kit minimal justifié. Pour un vrai projet, décide ton kit de connexions (MCP + plugins) en nommant le manque que chacun comble. Refuse tout ce que tu ne peux pas justifier. Combien en gardes-tu ?
✅ Solution
La plupart des devs web tiennent en 2-4 connexions justifiées (GitHub, Playwright, LSP TS, un hébergeur). Si ta liste s’allonge sans manques nommés, élague. Un setup petit et intentionnel est plus sûr et plus lisible qu’un catalogue coché.
🧠 Quiz de révision
1. Quel MCP ferme l’angle mort visuel, et comment ?
Playwright : l’agent pilote un vrai navigateur, ouvre l’écran, capture, regarde et corrige ce qu’il voit. L’UI passe de « espérée » à « observée » (5.4) — la promesse de la Partie 4 tenue.
2. Comment brancher GitHub à faible risque ?
Via le plugin d’intégration officiel (qui configure le MCP), avec un token scopé au repo (pas admin). Moindre privilège : une erreur reste circonscrite.
3. Commande /revue ou agent reviewer : la différence ?
/revue ou agent reviewer : la différence ?/revue injecte les critères dans la session courante (regard immédiat) ; l’agent reviewer relit à côté, dans un contexte isolé (regard indépendant). On choisit selon le besoin.
4. Comment les connexions composent-elles avec le reste ?
new-feature scaffolde → hooks formatent/testent → /revue/reviewer relisent → Playwright vérifie le rendu → GitHub ouvre la PR. Chaque brique fait son job ; l’ensemble est cohérent.
5. Pourquoi garder le kit de connexions minimal ?
Parce que chaque MCP/plugin est une surface (droits, bruit) à justifier. Un setup petit et intentionnel (GitHub + Playwright + une commande) est plus sûr et lisible qu’un catalogue exhaustif.
Fin de la Partie 10. Claude Code est connecté au réel. On industrialise maintenant la qualité : Partie 11 — Réviser, debugger, refactorer, industrialiser.