claude-code-best-practice/fr/!/video-presentation-transcript/1-video-workflow.md

Vidéo 1 : Du Vibe Coding à l'Agentic Engineering — Workflows avec Claude Code

Durée totale : ~5 minutes

---

INTRO — Le problème (0:00 – 0:45)

• "Si tu viens de commencer avec Claude Code, il y a de fortes chances que tu fasses du vibe coding — taper des prompts, obtenir des résultats, répéter. Ça marche, mais tu n'utilises qu'une fraction de ce que Claude Code peut faire."
• "Ce repo est une collection organisée de bonnes pratiques qui te fait passer du vibe coding à l'agentic engineering — où Claude ne se contente pas de te répondre, il exécute des workflows pour toi."
• "Dans cette première vidéo, je couvre la base : Commands, Agents et Skills — et comment ils s'enchaînent dans des workflows répétables."

---

PARTIE 1 — La méthode ad hoc (0:45 – 2:00)

Démo : approche vibe coding

• Ouvrir un terminal Claude Code frais
• Taper : "What is the weather in Dubai? Write it to an output file and create an SVG card for it."
• Montrer le résultat — ça marche, mais pointer que :
  • Le design SVG est différent à chaque fois (couleurs, mise en page, polices aléatoires)
  • Tu as dû rester là et regarder le travail se faire
  • Si tu le relances demain, tu obtiendras une carte complètement différente
• Ouvrir un deuxième terminal, lancer le même prompt à nouveau
  • Montrer les SVG côte à côte — ils sont différents
• "C'est le problème du vibe coding. Ça marche une fois. Mais ce n'est pas répétable. Ce n'est pas un workflow auquel tu peux faire confiance."

---

PARTIE 2 — La méthode workflow (2:00 – 3:15)

Démo : commande /weather-orchestrator

• "Maintenant, je vais te montrer la même tâche, mais comme workflow."
• Taper : /weather-orchestrator
• Parcourir ce qui se passe à l'écran :
  1. Il te demande Celsius ou Fahrenheit (interaction utilisateur structurée)
  2. Il lance un weather-agent pour récupérer la température (tu vois l'agent vert dans le terminal)
  3. Il invoque un skill pour créer la carte SVG
  4. Sortie : orchestration-workflow/weather.svg + orchestration-workflow/output.md
• "Relance-le — même layout SVG, même structure de fichiers, même résultat propre. À chaque fois."
• "Tu peux lancer ça et partir. Ça s'exécute de façon autonome."

---

PARTIE 3 — Comment ça marche : Commande → Agent → Skill (3:15 – 4:30)

Expliquer les trois briques

Commands (.claude/commands/)

• "Une commande est le point d'entrée — comme un script. C'est un fichier Markdown qui dit à Claude quelles étapes suivre."
• "Notre weather-orchestrator est le chef d'orchestre. Il pose une question à l'utilisateur, appelle un agent, puis appelle un skill."
• Les commandes vivent dans .claude/commands/ et apparaissent comme /slash-commands

Agents (.claude/agents/)

• "Un agent est un travailleur spécialisé. Notre weather-agent a une seule tâche : récupérer la température."
• "Il a un skill préchargé appelé weather-fetcher — ce skill est injecté dans le contexte de l'agent au démarrage, donc il sait exactement quelle API appeler et comment parser la réponse."
• Les agents ont leurs propres outils, modèles et permissions. Ce sont des travailleurs isolés.

Skills (.claude/skills/)

• "Un skill est un ensemble réutilisable d'instructions. Pense à ça comme une recette."
• "Nous avons deux patterns de skills ici :"
  • Agent skill (préchargé) : weather-fetcher est intégré dans l'agent — c'est de la connaissance de domaine
  • Invoked skill : weather-svg-creator est appelé indépendamment via l'outil Skill — il crée la carte SVG
• Les skills peuvent être de la connaissance d'arrière-plan OU des actions autonomes

Diagramme de flux (à afficher éventuellement à l'écran)

/weather-orchestrator (Command)
    → AskUser: C° or F°?
    → weather-agent (Agent + weather-fetcher skill)
    → weather-svg-creator (Skill)
    → Output: weather.svg + output.md

---

PARTIE 4 — Pourquoi c'est important / conclusion (4:30 – 5:00)

• "La différence entre vibe coding et agentic engineering, c'est la structure."
  • Vibe coding : tu tapes, tu espères, tu obtiens quelque chose.
  • Agentic engineering : tu définis un workflow une fois, et il s'exécute de la même façon à chaque fois.
• "Commands, Agents et Skills sont les trois briques de base. Une fois que tu les comprends, tu peux construire n'importe quel workflow."
• "Ce repo contient d'autres patterns — hooks, équipes multi-agents, configuration CLAUDE.md — nous les couvrirons dans les prochaines vidéos."
• "Le lien du repo est dans la description. Star-le, clone-le et commence à construire tes propres workflows."

---

Référence rapide

Concept	Emplacement	Objectif
Command	.claude/commands/	Point d'entrée, orchestration, /slash-command
Agent	.claude/agents/	Travailleur spécialisé avec ses propres outils & modèle
Skill	.claude/skills/	Instructions réutilisables (préchargées ou invoquées)