Hooks, Headless et le workflow complet du vibecoding

Dernier coffre au trésor ! Tu vas découvrir les hooks, le mode headless pour l'automatisation, et tu vas assembler tout ce module en un workflow de vibecoding complet avec Claude Code. Après cet exercice, tu es un capitaine de l'IA à part entière.

Les hooks - des actions automatiques

Les hooks sont des commandes shell qui s'exécutent automatiquement sur des événements précis de Claude Code - par exemple après la modification d'un fichier. Imagine un équipage qui réagit tout seul aux signaux : dès que Claude touche au code, le hook fait son travail, sans que tu aies rien à taper.

Attention au faux ami : ces hooks n'ont rien à voir avec les hooks de React, ce ne sont pas des composants d'interface. Ce ne sont pas non plus des commandes de connexion OAuth - pour t'authentifier, tu as /login - ni des fichiers binaires contenant les poids du modèle Claude. Un hook, c'est une ligne de shell, rien de plus.

Les événements qui déclenchent les hooks

Quand Claude utilise un outil dans une nouvelle session, ces événements se succèdent dans cet ordre (PreToolUse et PostToolUse se répètent à chaque utilisation d'un outil, et Stop après chaque réponse) :

• SessionStart - au début de la session
• PreToolUse - avant l'utilisation d'un outil par Claude
• PostToolUse - après l'utilisation d'un outil (par exemple après la modification d'un fichier)
• Stop - quand Claude termine sa réponse

Où les configure-t-on ?

Tu définis tes hooks dans les fichiers de réglages, le plus souvent dans le .claude/settings.json du projet, le même fichier que les règles de permission (ils peuvent aussi se trouver dans ~/.claude/settings.json et .claude/settings.local.json). Il n'existe pas de .claude/hooks.yaml, et package-lock.json appartient à npm, on n'y écrit jamais à la main. Exemple : lancer prettier après chaque création ou modification de fichier, pour que le code reste toujours formaté. Voici ce que contient alors .claude/settings.json :

1{
2  "hooks": {
3    "PostToolUse": [
4      {
5        "matcher": "Edit|Write",
6        "hooks": [
7          {
8            "type": "command",
9            "command": "npx prettier --write ."
10          }
11        ]
12      }
13    ]
14  }
15}

Le champ matcher indique sur quels outils réagir - ici Edit|Write (la barre | signifie "ou"), donc chaque modification ou création de fichier. Avec un hook tu peux aussi bloquer les modifications sur des chemins protégés ou relancer les tests après chaque changement. C'est ton second automatique, celui qui maintient l'ordre sur le pont pendant que tu barres.

Mode headless et CI/CD

Le mode headless, c'est Claude Code qui tourne sans session interactive - idéal pour l'automatisation. Le coeur du dispositif, c'est le flag -p combiné à --output-format json. Le prompt et --output-format json peuvent échanger leurs places ; ici, le prompt suit -p et --output-format json vient en dernier.

1# Headless : la reponse arrive en JSON structure
2claude -p "List functions from @src/utils.ts" \
3  --output-format json

Un résultat pareil se traite sans effort dans un script ou un pipeline : tu parses du JSON au lieu de lire du texte à l'oeil. Combiné à l'intégration GitHub Actions déjà prête, cela permet de bâtir des processus entièrement automatiques - revues de PR, génération de changements, rapports quotidiens.

Intégrations avec les éditeurs

Claude Code ne vit pas uniquement dans le terminal :

• VS Code - extension officielle
• JetBrains - extension officielle
• Desktop et web - claude.ai/code

Tu gardes donc toute la puissance du CLI agentique sans quitter ton environnement préféré.

Le workflow complet du vibecoding avec Claude Code

Assemblons maintenant tout ce que tu as appris dans ce module en un seul processus fluide, du premier jour du projet jusqu'au commit.

Étape 1 : Prépare le projet

Avant tout, donne à Claude une mémoire du projet - une seule commande suffit dans la session :

1# Dans une session claude, genere la memoire du projet
2/init

Un fichier CLAUDE.md apparaît à la racine, et Claude le rechargera tout seul à chaque session suivante. Tu n'auras plus à réexpliquer ta stack ni tes conventions.

Étape 2 : Décris la fonctionnalité (Plan Mode pour les gros changements)

Pour un changement large, ne laisse pas Claude éditer immédiatement - démarre directement en Plan Mode :

1claude --permission-mode plan "Add a comment system to posts"

Claude explore le projet et te présente un plan de changements. Tu le lis, tu l'approuves, et c'est seulement à ce moment-là que le code bouge.

Étape 3 : Claude implémente

Claude lit et modifie les fichiers lui-même, puis lance les tests. Toi, tu observes, tu corriges le cap et tu donnes des indications au fil de l'eau - c'est du pair programming, pas de la délégation aveugle.

Étape 4 : Revue et itération

Avant de committer, fais relire le diff : le pipe envoie les changements directement à Claude, sans copier-coller.

1# Passe en revue les changements avant le commit
2git diff | claude -p "Review these changes before commit"

Tu corriges ce qu'il faut, puis tu recommences le cycle. Chaque tour te rapproche d'un code que tu assumes vraiment.

Étape 5 : Renforce le projet avec les fonctionnalités avancées

• Hooks - ajoute un formatage automatique (prettier après chaque édition)
• Subagents - délègue la revue à code-reviewer (.claude/agents/)
• MCP - branche tes propres outils, par exemple GitHub ou Sentry (/mcp)
• Skills - emballe tes workflows répétitifs dans /<skill-name>

Toute la carte de Claude Code - l'antisèche

Garde cette table sous la main : c'est la carte complète du territoire que tu viens de traverser.

Le mot de la fin

Félicitations ! Tu as terminé tout le cours Vibecoding et tu maîtrises Claude Code !

Dans ce module, tu as appris le VRAI Claude Code :

Les bases - installation, /login, mode interactif contre -p, choix du modèle Fichiers et pipe - références avec @, chaînage de commandes (git diff | claude -p) Slash commands - /help, /clear, /compact, /init, /code-review, /usage CLAUDE.md - la mémoire du projet, générée par /init Plan Mode - planifier avant de modifier (Shift+Tab, /plan, --permission-mode plan) Subagents - déléguer des tâches (.claude/agents/) Skills et MCP - workflows répétitifs et branchement d'outils externes (/mcp) Hooks - actions automatiques sur événements (.claude/settings.json) Headless/CI - claude -p --output-format json avec GitHub Actions

Tu es désormais prêt à construire des applications professionnelles avec une IA agentique dans ton terminal !

Bon vent, capitaine - va découvrir de nouvelles terres de code !

1{
2  "hooks": {
3    "PostToolUse": [
4      {
5        "matcher": "Edit|Write",
6        "hooks": [
7          {
8            "type": "command",
9            "command": "npx prettier --write ."
10          }
11        ]
12      }
13    ]
14  }
15}