Presentation Structure

• You need an agent to add, remove, or reorder slides in the HTML presentation and correctly renumber every data-slide attribute and goToSlide() TOC reference.
• You want the agent to create new section dividers with the correct section-slide class, data-level attribute, and section-desc copy.
• You need the agent to reason about journey bar state — knowing which slides show an empty bar, which inherit a level, and which trigger a level transition.
• You are reviewing or auditing the presentation structure and want the agent to detect gaps, duplicates, or mismatched goToSlide() calls.

• You are working on a presentation built with a different framework (e.g., Reveal.js, PowerPoint, Google Slides) — this skill is specific to the presentation/index.html single-file format.
• You only need to edit slide content (text, images, diagrams) without touching slide numbering or structure — the skill's structural rules are unnecessary overhead in that case.

The skill encodes the three slide types — regular slides, level-transition section slides, and the title slide — along with the required HTML attributes (data-slide, data-level, CSS classes). The agent knows which attributes are mandatory, which are optional, and which elements (like .level-badge) must not be hardcoded in HTML.

Rather than a cumulative percentage, the presentation uses four discrete levels (low, medium, high, pro) mapped to 25 / 50 / 75 / 100% bar fill. The skill captures exactly which slide ranges trigger each level, which slides inherit the previous level, and that the bar is hidden on slide 1 and empty before the first data-level transition.

After any structural edit the agent must renumber all data-slide attributes sequentially from 1, update every goToSlide() call in the TOC/Journey Map slide, and verify no gaps or duplicates exist. The skill documents that totalSlides is auto-computed from the DOM and requires no manual update.

The skill covers the goToSlide(n) function used in TOC links, the auto-computed totalSlides value, and the supported input methods: arrow keys, Space bar, and touch swipe. This lets the agent validate that TOC links remain consistent after renumbering.

Section dividers follow a precise format: section-slide class, optional data-level, a section-number paragraph, an <h1> title, and a section-desc paragraph naming the level. The skill makes the agent aware of the full expected markup so newly generated sections are immediately valid.

A user asks the agent to insert a new "Part 7" section after slide 46. The skill tells the agent to create a section-slide div with the next sequential data-slide number, add the appropriate data-level, renumber all subsequent slides, and update every goToSlide() call in the TOC slide.

The agent scans presentation/index.html for gaps or duplicate data-slide values and cross-checks every goToSlide() call against actual slide numbers, reporting any mismatches — a task fully supported by the renumbering rules encoded in this skill.

A user wants a summary of which slides belong to which journey level. The agent uses the level-transition table in the skill to produce an accurate mapping of slide ranges, data-level values, and corresponding bar fill percentages without reading the entire HTML file.

When asked to scaffold a new slide, the agent uses the exact HTML templates from this skill — selecting the right class (title-slide, section-slide, or plain slide), placing the correct attributes, and knowing to omit .level-badge from the source HTML since it is JS-injected at runtime.