Claude-code-best-practice presentation-structure

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

install

source · Clone the upstream repo

git clone https://github.com/shanraisshan/claude-code-best-practice

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/shanraisshan/claude-code-best-practice "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/presentation/presentation-structure" ~/.claude/skills/shanraisshan-claude-code-best-practice-presentation-structure && rm -rf "$T"

manifest: .claude/skills/presentation/presentation-structure/SKILL.md

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.