presentation-structure

Engineering Community

Repo stars 56,229
Author repo claude-code-best-practice

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: Knowledge about the presentation slide format, weight system, navigation, and section structure Knowledge about how the presenta…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “File Location”, “Slide Format”, “Journey Bar Level System”, “Level Transitions by Section”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name presentation-structure directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “File Location / Slide Format / Journey Bar Level System” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

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%

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.

Fluxly profile Author and license come from source; runtime, permissions, and network are Fluxly detections or estimates

Fluxly category: Engineering
Author-declared agents: No explicit declaration found; this is not inferred or tested compatibility
Static check: 88 / 100 · heuristic scan, not runtime safety proof
Author / version / license: @shanraisshan · no license declared
Fluxly token estimate: Lean
Fluxly setup estimate: Plug-and-play
External API key: No requirement detected
Detected OS requirements: Unspecified
Runtime requirements: Unspecified
Detected file/system behavior: Read-only
Write / modify
Detected network behavior: Local-only
Install commands: None (reference only)

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview presentation-structure.preview

The current SKILL.md does not define a fixed output example.

SKILL.md 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):

```html
<!-- 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 |

…

Evidence boundary and execution chain

Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.

sections -> File Location → Slide Format → Journey Bar Level System → Level Transitions by Section → Navigation System → Renumbering Rules
terms    -> Knowledge about how the presentation at presentation/index.html is structured. · presentation/index.html — a single-file HTML presentation with inline CSS and JS. · After adding, removing, or reordering slides: 1. · Section dividers use the section-slide class. · 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.
files/cmd -> presentation/index.html · data-slide · data-level · .level-badge · <h1> · low · medium · high
body sha256 -> 93eb6296d906