# 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) |