Presentation structure

Skill shekerkamma/cc-best-practice/.claude/skills/presentation/presentation-structure

Personal fork of claude-code-best-practice with tokyo-time skills, hooks demo, and presentation work

Install

npx -y skills add shekerkamma/cc-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.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

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.

Gives 0 of the 12 instructions most slides presentations skills give

Counted across 568 of the 571 authors here whose files we hold, read 2026-08-06

include a visual element on every slidein 52 of 568, across 21 files
put one idea per slidein 50 of 568, across 42 files
state the design approach before writing codein 38 of 568, across 8 files
validate XML immediately after each editin 37 of 568, across 7 files
rasterize gradients and icons as PNG images before referencing themin 37 of 568, across 7 files
generate and inspect thumbnails to validate layoutin 37 of 568, across 7 files
commit to a single visual motif across every slidein 37 of 568, across 12 files
use web-safe fonts onlyin 36 of 568, across 7 files
keep 0.5 inch minimum marginsin 35 of 568, across 9 files
use two-column layout for slides with charts or tablesin 34 of 568, across 5 files
save a template inventory analysis to a filein 33 of 568, across 4 files
use subagents to visually inspect rendered slidesin 33 of 568, across 9 files

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.