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