Presentation structure

Skill shanraisshan/claude-code-best-practice/.claude/skills/presentation/presentation-structure

from vibe coding to agentic engineering - practice makes claude perfect

Install

npx -y skills add shanraisshan/claude-code-best-practice --skill presentation-structure

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Knowledge about the presentation slide format, weight system, navigation, and section structure

SKILL.md

3.5 KB, as published. Nobody here has run it

Presentation Structure Skill

Knowledge about how the presentation at presentation/index.html is structured.

File Location

presentation/index.html — a single-file HTML presentation with inline CSS and JS.

Slide Format

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>

Journey Bar Level System

The presentation uses a 4-level system instead of cumulative percentages:

Levels are set via data-level attribute on key transition slides (section dividers)
All slides after a data-level slide inherit that level until the next transition
The journey bar fills to 25% / 50% / 75% / 100% for Low / Medium / High / Pro respectively
The bar is hidden on slide 1 (title slide); from slide 2 onward the bar is shown
Slides before the first data-level (slides 2–9) show an empty bar (no level yet set)
A .level-badge is JS-injected on the <h1> of slides that carry data-level — do NOT hardcode in HTML

Level Transitions by Section

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%

Navigation System

goToSlide(n) — used in TOC links, must match actual data-slide numbers
totalSlides is auto-computed from DOM (document.querySelectorAll('[data-slide]').length)
Arrow keys, Space, and touch swipe for navigation
Slide counter shows current / total at bottom-left

Renumbering Rules

After adding, removing, or reordering slides:

Renumber ALL data-slide attributes sequentially starting from 1
Update all goToSlide() calls in the TOC/Journey Map slide
The JS totalSlides auto-computes — no manual update needed
Verify no gaps or duplicates exist

Section Divider Format

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