15 KiB
Parcours d'apprentissage — Plan de refonte du Weather Reporter
← Retour au README
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-fetcherSKILL.md — parfait.
Slide 18 — « Champs de config de skill » (slide actuelle 29)
- Garder. Ajouter une note :
user-invocable: falseest 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 :
- 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).
- Renuméroter séquentiellement tous les attributs
data-slide. - Mettre à jour les attributs
data-leveldes slides de section. - Mettre à jour le texte de numéro de section et le h1 sur les séparateurs de section.
- Mettre à jour les cibles
goToSlidede la TOC sur la slide 6. - Mettre à jour le texte de numéro de section de la slide de section Workflow (ancienne 33).
- 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.