presentation-structure
- Repo stars 56,229
- Author updated Live
- Author repo claude-code-best-practice
- Domain
- Engineering
- Compatible agents
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- Trust score
- 88 / 100 · community maintained
- Author / version / license
- @shanraisshan · no license declared
- Token usage
- Lean
- Setup complexity
- Plug-and-play
- External API key
- Not required
- Operating systems
- Unspecified (assume cross-platform)
- Runtime requirements
- No special requirements
- Permissions
-
- Read-only
- Write / modify
- Network behavior
- Local-only
- Install commands
- 26 variants
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
---
name: presentation-structure
description: Knowledge about the presentation slide format, weight system, navigation, and section structure…
category: engineering
runtime: no special runtime
---
# presentation-structure output preview
## PART A: Task fit
- Use case: Knowledge about the presentation slide format, weight system, navigation, and section structure Knowledge about how the presentation at presentation/index.html is structured. runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “File Location / Slide Format / Journey Bar Level System” and do not present inference as author intent.
## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “Knowledge about the presentation slide format, weight system, navigation, and section structure Knowledge about how the presentation at presentation/index.html is structured. runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more.”.
- **02** When the source has headings, the agent prioritizes “File Location / Slide Format / Journey Bar Level System” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files; mostly runs locally; usually needs no extra API key.
## Running Rules
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options. The source does not require a stable slash command. After installation, invoke the skill by name and describe the task.
Name target files or source material, expected output, forbidden changes, and whether network or shell access is allowed. Permission fingerprint: read files, write/modify files.
Start with a small task and check whether the result follows “File Location / Slide Format / Journey Bar Level System”. Inspect diffs, logs, previews, or tests before expanding scope.
Confirm the final output includes a concrete result, evidence, and next action. If it stays generic, tighten inputs, boundaries, and acceptance criteria.
---
name: presentation-structure
description: Knowledge about the presentation slide format, weight system, navigation, and section structure…
category: engineering
source: shanraisshan/claude-code-best-practice
---
# presentation-structure
## When to use
- Knowledge about the presentation slide format, weight system, navigation, and section structure Knowledge about how th…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.
## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.
## Execution rules
- Organize steps around “File Location / Slide Format / Journey Bar Level System” and keep inference separate from source facts.
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.
## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies. The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.
skill "presentation-structure" {
input -> user goal + target files + boundaries + acceptance criteria
context -> File Location / Slide Format / Journey Bar Level System
rules -> SKILL.md triggers / order / output contract
runtime -> no special runtime | read files, write/modify files | mostly runs locally
guardrails -> usually needs no extra API key + small-sample validation + diff/log review
output -> copyable result + checklist + next iteration
} 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-levelattribute on key transition slides (section dividers) - All slides after a
data-levelslide 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-badgeis JS-injected on the<h1>of slides that carrydata-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 actualdata-slidenumberstotalSlidesis auto-computed from DOM (document.querySelectorAll('[data-slide]').length)- Arrow keys, Space, and touch swipe for navigation
- Slide counter shows
current / totalat bottom-left
Renumbering Rules
After adding, removing, or reordering slides:
- Renumber ALL
data-slideattributes sequentially starting from 1 - Update all
goToSlide()calls in the TOC/Journey Map slide - The JS
totalSlidesauto-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.
Decide Fit First
Design Intent
How To Use It
Boundaries And Review