Claude Code Presentation Structure Skill for HTML Slides and Navigation
Maintain the slide order in the project's single-file HTML deck. Check `data-slide` numbers, table-of-contents targets, and inherited difficulty levels when adding or moving a slide.
中文Install in Claude Code
Use Claude Code in the pinned claude-code-best-practice checkout. The deck is `presentation/vibe-coding-to-agentic-engineering/index.html`; preview it in a browser to verify navigation and progress.
- Check that `.claude/skills/presentation/presentation-structure/SKILL.md` and `presentation/vibe-coding-to-agentic-engineering/index.html` are both present in the pinned checkout. Keep the repository's directory layout.
- Start Claude Code at the project root. Describe the intended insertion or move and ask it to use `presentation-structure` to inspect the existing numbering and level rules.
Example task
Insert a slide called Writing a Better Handover Prompt immediately after slide 14 in the Low section. Number the new slide 15, shift the old slide 15 and subsequent slides, and update the table-of-contents targets.What to check
The deck has one more slide, with contiguous and unique IDs. The table of contents still opens the intended headings, and the new slide inherits Low and its 25 percent progress setting.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does every new slide need a `data-level` attribute?
Set it on a divider that begins a new level. A regular slide inherits the most recent level setting, and the deck script inserts the level badge on the corresponding divider.