# Parcours d'apprentissage — Plan de refonte du Weather Reporter

← Retour au [README](../README.md)

## Vue d'ensemble

Refondre toutes les slides à partir de la slide 7 autour d'un seul exemple fil rouge : l'**agent reporter météo** (weather reporter agent). L'arc narratif suit l'ordre visible de la TOC (Agents → Skills → Context → CLAUDE.md → Commands+Workflow), permettant à l'audience de rencontrer d'abord le reporter météo, puis de comprendre ce qu'il sait, comment il pense, quelles règles il suit, et enfin comment le déclencher avec une seule commande.

---

## 1. Correspondance section actuelle → nouvelle

| Section actuelle | Slides actuelles | Action | Nouvelle position |
|---|---|---|---|
| Topic 1 : Context | 7-11 (section en 7) | Déplacer vers Topic 3 | slides 17-21 |
| Topic 2 : CLAUDE.md | 12-17 (section en 12) | Déplacer vers Topic 4 | slides 22-27 |
| Topic 3 : Agents | 18-23 (section en 18) | Déplacer vers Topic 1 | slides 7-12 |
| Topic 4 : Skills | 24-29 (section en 24) | Déplacer vers Topic 2 | slides 13-18 |
| Topic 5 : Commands | 30-32 (section en 30) | Fusionner avec Workflow dans Topic 5 | slides 28-32 |
| Topic 6 : Workflow | 33-36 (section en 33) | Fusionné dans la section Commands | (pas de slide de section séparée) |
| Slide de clôture | 37 | Conserver, mettre à jour le sous-titre | slide 33 |

**Nouveau total : 33 slides** (identique aux 37 actuelles moins la slide de section Workflow et 3 slides de contenu Workflow qui fusionnent dans la section Commands, laquelle grossit de ces 3 slides).

Attends — recomptons :

Actuel : slides 7-37 = 31 slides.
- Section Agents : 6 slides (18-23) → devient Topic 1 (7-12)
- Section Skills : 6 slides (24-29) → devient Topic 2 (13-18)
- Section Context : 5 slides (7-11) → devient Topic 3 (19-23)
- Section CLAUDE.md : 6 slides (12-17) → devient Topic 4 (24-29)
- Commands+Workflow fusionnées : 3 + 1 section + 4 contenu = Commands (3) + Workflow (1 section + 3 contenu) = 7 slides → devient Topic 5 (30-36)
- Clôture : 1 slide (37)

**Nouveau total : 37 slides.** (Aucune slide n'est supprimée ; la slide de section Workflow devient partie de la section fusionnée Commands+Workflow — on la garde comme sous-section ou on retire son `data-level` pour éviter un second séparateur de section.)

**Décision** : Conserver les 37 slides. Retirer `data-level` sur l'ancien séparateur de section Workflow (slide 33) pour qu'il soit traité comme slide de contenu, pas comme séparateur de section. La section Commands couvre 30-36. Le séparateur de section Workflow devient un « en-tête de chapitre » visuel à l'intérieur de la section Commands.

En fait, plus simple : garder le séparateur de section Workflow comme slide de contenu sans `data-level`. La barre de parcours reste au niveau `commands`. Le texte de numéro de section passe de « Topic 6 » à un simple sous-titre.

---

## 2. Nouvelle carte LEVELS (aucun changement de clés ni de couleurs)

Le nouvel ordre de section est : **Agents → Skills → Context → CLAUDE.md → Commands**. La clé de niveau `workflow` est retirée de l'usage `data-level` (le séparateur de section perd `data-level`). La carte `LEVELS` porte toujours `workflow` pour l'affichage de l'historique de la barre de parcours, mais aucune slide ne le déclenche.

**Approche révisée** : Retirer entièrement le niveau `workflow` de la carte LEVELS puisqu'aucune slide ne porte `data-level="workflow"`. La barre de parcours plafonne à `commands` (83%). C'est correct — la section Workflow est présentée comme l'apogée *à l'intérieur* de la section Commands, pas un sujet séparé.

En fait, une barre de parcours qui se remplit à 83% plutôt que 100% pour une section de clôture est insatisfaisant. Meilleur plan : **fusionner Commands+Workflow en une seule section appelée « Commands & Workflow »** avec `data-level="commands"`. Garder le niveau `workflow` dans LEVELS à 100% et assigner `data-level="workflow"` à l'*ancienne* slide-séparateur de section Workflow — elle devient une transition visuelle dans la section Commands. Ainsi la barre se remplit à 100% aux slides Workflow.

**Décision finale** : Garder à la fois `commands` (83%) et `workflow` (100%) dans LEVELS. Assigner `data-level="commands"` au séparateur de section Commands et `data-level="workflow"` à la slide de sous-section Workflow. Les graduations de parcours restent telles quelles. Cela correspond exactement à la structure actuelle — seules les slides de contenu sont réordonnées.

---

## 3. Plan de contenu slide par slide

### Slides 1-6 (inchangées)

Slides 1 (titre), 2 (GIF Boris), 3 (Vibe→Agentic), 4 (Qu'est-ce que le Vibe Coding), 5 (Bons vs mauvais prompts), 6 (TOC — mettre à jour uniquement les cibles goToSlide).

**Mises à jour TOC sur la slide 6 :**
- Ligne Agents : `goToSlide(7)` (était 18)
- Ligne Skills : `goToSlide(13)` (était 24)
- Ligne Context : `goToSlide(19)` (était 7)
- Ligne CLAUDE.md : `goToSlide(25)` (était 12)
- Ligne Commands : `goToSlide(30)` (était 30 — pas de changement)

---

### Section 1 : Agents (slides 7-12) — « La personne »

**Slide 7** — Séparateur de section (`data-level="agents"`, Topic 1)
- Titre : « Agents — Le reporter météo »
- Desc : « Un agent est Claude jouant un rôle spécifique. Voici le reporter météo — un spécialiste embauché pour récupérer et rapporter les données météo de Dubaï. »

**Slide 8** — « La cuisine du restaurant » (slide actuelle 19)
- Contenu : même analogie (prompting simple = crier dans une cuisine au hasard ; agent = spécialiste précis)
- Mettre à jour l'exemple d'agent pour utiliser le cadrage « reporter météo » partout
- Garder la carte deux colonnes comparant prompting simple vs weather-agent

**Slide 9** — « Prompting vs. Agent — Côte à côte » (slide actuelle 20)
- Garder la table intacte. Utilise déjà bien l'exemple météo.

**Slide 10** — « Les agents ont leur propre cerveau » (slide actuelle 21)
- Garder l'astuce de Thariq. La relier à : « le reporter météo travaille dans son propre cerveau — toute cette récupération web reste en dehors du tien. »

**Slide 11** — « Comment créer ton propre agent » (slide actuelle 22)
- Garder le pattern how-to `/agents`
- Mettre à jour le bloc de code pour montrer le vrai chemin `weather-agent.md`

**Slide 12** — « Champs de config d'agent » (slide actuelle 23)
- Garder la table des lignes de champs. Ajouter un encadré montrant le champ `skills: [weather-fetcher]` en contexte.

---

### Section 2 : Skills (slides 13-18) — « Ce que le reporter sait »

**Slide 13** — Séparateur de section (`data-level="skills"`, Topic 2)
- Titre : « Skills — Ce que le reporter météo sait »
- Desc : « Les skills sont les choses précises que le reporter a été entraîné à faire. Notre reporter en a deux : récupérer les données, et les rendre sous forme de carte. »

**Slide 14** — « Le manuel de formation » (slide actuelle 25)
- Recadrer : le reporter météo a deux skills : weather-fetcher (va chercher la température) et weather-svg-creator (crée la carte visuelle).
- Remplacer l'exemple « Shayan » par les deux skills du reporter météo.

**Slide 15** — « Quand transformer quelque chose en skill » (slide actuelle 26)
- Garder l'astuce de Boris. Ajouter weather-fetcher et weather-svg-creator comme deux des exemples.

**Slide 16** — « Pourquoi séparer agents et skills ? » (slide actuelle 27)
- Garder le deux colonnes. Mettre à jour pour souligner : weather-agent = la personne, weather-fetcher = sa formation.

**Slide 17** — « Comment créer ton propre skill » (slide actuelle 28)
- Garder. Le bloc de code montre déjà le vrai contenu de `weather-fetcher` SKILL.md — parfait.

**Slide 18** — « Champs de config de skill » (slide actuelle 29)
- Garder. Ajouter une note : `user-invocable: false` est défini sur weather-fetcher car il est réservé à l'agent.

---

### Section 3 : Context (slides 19-23) — « Le cerveau du reporter »

**Slide 19** — Séparateur de section (`data-level="context"`, Topic 3)
- Titre : « Context — Le cerveau du reporter »
- Desc : « Maintenant que tu as rencontré le reporter et connais ses skills, comprenons ce qu'il peut réellement garder en tête à la fois. »

**Slide 20** — « Le cerveau de Claude » (slide actuelle 8)
- Garder. Ajouter une phrase reliant au reporter météo : « Quand le weather-agent est dépêché, il obtient son propre cerveau neuf — et weather-fetcher y est épinglé au démarrage. »
- Garder les deux diagrammes (context-window.jpeg reste ici).

**Slide 21** — « Ce qui se charge au début de session » (slide actuelle 9)
- Garder. Relier au reporter météo : « Au démarrage, Claude connaît *l'existence* de weather-fetcher (description seule). Quand la commande s'exécute, le contenu complet du skill est chargé dans le cerveau de l'agent. »
- Garder context.jpg ici.

**Slide 22** — « Garder le cerveau clair » (slide actuelle 10)
- Garder la table des points de branchement.

**Slide 23** — « Comment gérer ton contexte » (slide actuelle 11)
- Garder le how-to `/context`, `/compact`, `/clear`.

---

### Section 4 : CLAUDE.md (slides 24-29) — « Le règlement de poche »

**Slide 24** — Séparateur de section (`data-level="claude-md"`, Topic 4)
- Titre : « CLAUDE.md — Le règlement de poche du reporter »
- Desc : « Le reporter le consulte au début de chaque service — même si son cerveau se réinitialise pendant la nuit. »

**Slide 25** — « Le manuel de l'employé » (slide actuelle 13)
- Garder. Mettre à jour vers le cadrage reporter-météo : CLAUDE.md est le règlement que le reporter lit avant de passer à l'antenne — « toujours rapporter en Celsius sauf demande, toujours citer la source. »

**Slide 26** — « Comment créer ton CLAUDE.md » (slide actuelle 14)
- Garder le how-to `/init`.

**Slide 27** — « Faire grandir CLAUDE.md à chaque erreur » (slide actuelle 15)
- Garder l'astuce de Boris.

**Slide 28** — « Ce qui va dans CLAUDE.md » (slide actuelle 16)
- Garder le bloc de code. Touche reporter météo : ajouter un commentaire montrant des règles spécifiques à la météo.

**Slide 29** — « Comment CLAUDE.md se charge » (slide actuelle 17)
- Garder.

---

### Section 5 : Commands + Workflow (slides 30-36) — « Le déclencheur »

**Slide 30** — Séparateur de section (`data-level="commands"`, Topic 5)
- Titre : « Commands — Le déclencheur »
- Desc : « Un mot lance toute la chaîne. `/weather-orchestrator` → agent → skill → carte SVG. »

**Slide 31** — « Commands — Le point d'entrée » (slide actuelle 31)
- Garder. Bonne intro. Référence déjà weather-orchestrator.

**Slide 32** — « Comment créer ta propre commande » (slide actuelle 32)
- Garder. Le bloc de code montre déjà weather-orchestrator.md.

**Slide 33** — Sous-section Workflow (était slide 33, `data-level="workflow"`)
- Changer le texte de numéro de section de « Topic 6 » à « Putting It All Together »
- Garder `data-level="workflow"` pour que la barre se remplisse à 100%.
- Mettre à jour le titre vers : « Workflow — Les cinq pièces ensemble »
- Desc : « Regarde l'exemple du reporter météo s'exécuter d'une frappe de touche jusqu'à la sortie de carte SVG. »

**Slide 34** — « Command → Agent → Skill » (slide actuelle 34)
- Garder le diagramme de flux en bloc de code. Il est déjà parfait.

**Slide 35** — « Deux façons d'utiliser les skills » (slide actuelle 35)
- Garder le deux colonnes comparant préchargement vs invocation directe.

**Slide 36** — « Comment câbler ton propre workflow » (slide actuelle 36)
- Garder. Utilise déjà le workflow météo comme exemple.

**Slide 37** — Clôture (slide actuelle 37)
- Garder. Mettre à jour le sous-titre vers : « Cinq concepts, un seul exemple fil rouge »
- Mettre à jour le texte du corps pour référencer l'arc du reporter météo.

---

## 4. Inventaire de réutilisation des assets

| Asset | Emplacement actuel | Nouvel emplacement | Action |
|---|---|---|---|
| `context-window.jpeg` | Slide 8 (Le cerveau de Claude) | Slide 20 (même contenu, renumérotée) | Survit — aucun changement nécessaire |
| `context.jpg` | Slide 9 (Ce qui se charge au début de session) | Slide 21 (même contenu, renumérotée) | Survit — aucun changement nécessaire |
| `../../!/claude-jumping.svg` | Slides 1, en-tête | Inchangé | Aucune action |
| `../../!/root/boris-slider.gif` | Slide 2 | Inchangé | Aucune action |

Les deux diagrammes de contexte sont préservés exactement où ils sont — les slides qui les contiennent sont simplement renumérotées (8→20, 9→21).

---

## 5. Impact sur la comptabilité

### Nouvelles positions de séparateurs de section et assignations `data-level`

| Slide | Topic | `data-level` |
|---|---|---|
| 7 | Agents | `agents` |
| 13 | Skills | `skills` |
| 19 | Context | `context` |
| 25 | CLAUDE.md | `claude-md` |
| 30 | Commands | `commands` |
| 33 | Sous-section Workflow | `workflow` |

### Cibles `goToSlide` de la TOC sur la slide 6

| Ligne | Topic | Ancienne cible | Nouvelle cible |
|---|---|---|---|
| Ligne 1 | Agents | 18 | 7 |
| Ligne 2 | Skills | 24 | 13 |
| Ligne 3 | Context | 7 | 19 |
| Ligne 4 | CLAUDE.md | 12 | 25 |
| Ligne 5 | Commands | 30 | 30 |

### Graduations de parcours (aucun changement)

Le rail de graduations de parcours est déjà ordonné de haut en bas comme : Workflow, Commands, Skills, Agents, CLAUDE.md, Context. C'est l'*inverse* de l'ordre de l'arc (haut = niveau le plus élevé = atteint en dernier). Aucun changement nécessaire.

### Carte LEVELS (aucun changement)

Les 6 clés de niveau (`context`, `claude-md`, `agents`, `skills`, `commands`, `workflow`) restent. Aucune clé ajoutée ou retirée.

---

## 6. Approche d'implémentation

Le HTML est un seul gros fichier. Les slides sont dans le mauvais ordre pour le nouvel arc. L'implémentation la plus propre est de :

1. Couper les divs de slides et les coller dans le nouvel ordre (7-12 = anciennes 18-23, 13-18 = anciennes 24-29, 19-23 = anciennes 7-11, 24-29 = anciennes 12-17, 30-37 inchangées).
2. Renuméroter séquentiellement tous les attributs `data-slide`.
3. Mettre à jour les attributs `data-level` des slides de section.
4. Mettre à jour le texte de numéro de section et le h1 sur les séparateurs de section.
5. Mettre à jour les cibles `goToSlide` de la TOC sur la slide 6.
6. Mettre à jour le texte de numéro de section de la slide de section Workflow (ancienne 33).
7. Faire des éditions de contenu ciblées vers le cadrage reporter-météo là où c'est requis.

Nombre total de slides : **37** (inchangé).

---

## 7. Ambiguïtés — aucune décisive

Toutes les ambiguïtés ont été résolues ci-dessus. On passe directement à l'implémentation.
