Knowledge about the presentation slide format, weight system, navigation, and section structure
Knowledge about how the presentation at presentation/index.html is structured.
presentation/index.html — a single-file HTML presentation with inline CSS and JS.
Each slide is a div with data-slide (sequential number) and optional data-level (journey level at transition points):
<!-- 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>
The presentation uses a 4-level system instead of cumulative percentages:
data-level attribute on key transition slides (section dividers)data-level slide inherit that level until the next transitiondata-level (slides 2–9) show an empty bar (no level yet set).level-badge is JS-injected on the <h1> of slides that carry data-level — do NOT hardcode in HTML| Section | Slide Range | data-level | Bar Height |
|---|---|---|---|
| Part 0: Introduction | Slides 1-4 | (none) | hidden / empty |
| Part 1: Prerequisites | Slides 5-9 | (none) | empty |
| 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 | (inherits medium) | 50% |
| Part 5: Domain Knowledge | Slides 29-33 | high | 75% |
| Part 6: Agentic Engineering | Slides 34-46 | high | 75% |
| Appendix | Slides 47+ | (inherits high) | 75% |
goToSlide(n) — used in TOC links, must match actual data-slide numberstotalSlides is auto-computed from DOM (document.querySelectorAll('[data-slide]').length)current / total at bottom-leftAfter adding, removing, or reordering slides:
data-slide attributes sequentially starting from 1goToSlide() calls in the TOC/Journey Map slidetotalSlides auto-computes — no manual update neededSection dividers use the section-slide class. Level-transition section dividers carry data-level and show the level name in the description:
<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>
The JS will inject a .level-badge (e.g., "→ Low") into the <h1> at runtime when the level transitions — do not add these manually in HTML.