traduction

fr/.claude/skills/presentation/presentation-structure/SKILL.md

@@ -0,0 +1,89 @@
+---
+name: presentation-structure
+description: Connaissance du format des slides de présentation, du système de niveaux, de la navigation et de la structure des sections
+---
+
+# Skill Presentation Structure
+
+Connaissance de la façon dont la présentation dans `presentation/index.html` est structurée.
+
+## Emplacement du fichier
+
+`presentation/index.html` — une présentation HTML mono-fichier avec CSS et JS inline.
+
+## Format des slides
+
+Chaque slide est un div avec `data-slide` (numéro séquentiel) et éventuellement `data-level` (niveau de journey aux points de transition) :
+
+```html
+<!-- Regular slide — inherits level from previous data-level slide -->
+<div class="slide" data-slide="12">
+    <h1>Slide Title</h1>
+    <!-- content -->
+</div>
+
+<!-- Level transition slide — sets new level for this slide and all following -->
+<div class="slide section-slide" data-slide="10" data-level="low">
+    <h1>Section Name</h1>
+    <p class="section-desc">Level: Low — description of this section</p>
+</div>
+
+<!-- Title slide (centered) -->
+<div class="slide title-slide" data-slide="1">
+    <h1>Presentation Title</h1>
+    <p class="subtitle">Subtitle text</p>
+</div>
+```
+
+## Système de niveaux de la Journey Bar
+
+La présentation utilise un système à 4 niveaux au lieu de pourcentages cumulés :
+
+- Les niveaux sont définis via l'attribut `data-level` sur les slides de transition clés (section dividers)
+- Toutes les slides après une slide `data-level` héritent de ce niveau jusqu'à la transition suivante
+- La journey bar se remplit à 25% / 50% / 75% / 100% pour Low / Medium / High / Pro
+- La barre est masquée sur la slide 1 (title slide) ; à partir de la slide 2, elle est affichée
+- Les slides avant le premier `data-level` (slides 2–9) affichent une barre vide (aucun niveau encore défini)
+- Un `.level-badge` est injecté par JS sur le `<h1>` des slides portant `data-level` — ne le code PAS en dur dans le HTML
+
+### Transitions de niveaux par section
+
+| Section | Plage de slides | data-level | Hauteur de barre |
+|---------|-----------------|------------|------------------|
+| Part 0: Introduction | Slides 1-4 | (aucun) | masquée / vide |
+| Part 1: Prerequisites | Slides 5-9 | (aucun) | vide |
+| Part 2: Better Prompting | Slides 10-17 | `low` | 25% |
+| Part 3: Project Memory | Slides 18-24 | `medium` | 50% |
+| Part 4: Structured Workflows | Slides 25-28 | (hérite medium) | 50% |
+| Part 5: Domain Knowledge | Slides 29-33 | `high` | 75% |
+| Part 6: Agentic Engineering | Slides 34-46 | `high` | 75% |
+| Appendix | Slides 47+ | (hérite high) | 75% |
+
+## Système de navigation
+
+- `goToSlide(n)` — utilisé dans les liens de TOC, doit correspondre aux vrais numéros `data-slide`
+- `totalSlides` est auto-calculé depuis le DOM (`document.querySelectorAll('[data-slide]').length`)
+- Touches fléchées, Space et swipe tactile pour la navigation
+- Le compteur affiche `current / total` en bas à gauche
+
+## Règles de renumérotation
+
+Après ajout, suppression ou réordonnancement de slides :
+1. Renuméroter TOUS les attributs `data-slide` séquentiellement à partir de 1
+2. Mettre à jour tous les appels `goToSlide()` dans la slide TOC/Journey Map
+3. Le JS `totalSlides` s'auto-calcule — aucune mise à jour manuelle nécessaire
+4. Vérifier qu'il n'y a ni trou ni doublon
+
+## Format des section dividers
+
+Les section dividers utilisent la classe `section-slide`. Les section dividers de transition de niveau portent `data-level` et affichent le nom du niveau dans la description :
+
+```html
+<div class="slide section-slide" data-slide="10" data-level="low">
+    <p class="section-number">Part 2</p>
+    <h1>Better Prompting</h1>
+    <p class="section-desc">Level: Low — effective prompting for real results.</p>
+</div>
+```
+
+Le JS injectera un `.level-badge` (par ex. "→ Low") dans le `<h1>` au runtime quand le niveau change — ne l'ajoute pas manuellement en HTML.