Skip to content
Get packs

Guide · Agent skill

How to use the Presentation Structure Editor agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The Presentation Structure Editor is an agent skill: a SKILL.md instruction file that teaches an AI coding agent how one specific HTML slide deck is built. It is aimed at maintainers and contributors of the shanraisshan/claude-code-best-practice repository who want an agent to change the presentation safely. By the end of this guide you will know what the skill does, how to install it, how to phrase requests so the agent uses it, and what to check after the agent has edited the file.

Presentation Structure Editorshanraisshan/claude-code-best-practice · MIT

Quick start

  1. 1Confirm the presentation file exists. Make sure presentation/index.html from the claude-code-best-practice repository is in your project before using the skill.
  2. 2Download the skill ZIP. Get the presentation-structure skill ZIP from the page where you found this guide.
  3. 3Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder for a project-only install.
  4. 4Or upload in the Claude apps. If you use the Claude apps, go to Settings → Capabilities → Skills and upload the skill there.
  5. 5Ask for a specific slide change. Describe the slide, its position and its section in plain language, so the agent knows what to add, move or remove.
  6. 6Check renumbering and links. Confirm data-slide numbers run sequentially from 1 with no gaps or duplicates, and that every goToSlide() link matches.
  7. 7Test in the browser. Step through the deck and click each TOC link to confirm the journey bar and navigation behave correctly.

What is an agent skill, and what does this one do?

An agent skill is a folder containing a SKILL.md file with instructions and knowledge that an AI agent can load when a task matches the skill's description. This skill, named presentation-structure, is described as knowledge about the presentation slide format, weight system, navigation, and section structure.

Once loaded, the agent knows the markup used in presentation/index.html: each slide is a div with a data-slide number and an optional data-level, title slides and section dividers use specific classes, and navigation links call goToSlide(n) with numbers that must match the real slides. It also knows the four-level journey bar (Low, Medium, High, Pro) and the renumbering steps to follow after slides are added, removed or reordered.

Check the requirements before you install

The skill only makes sense inside a project that contains the presentation/index.html file from the claude-code-best-practice repository. The skill's file layout and level system are specific to that one file, so it will not help with a presentation in another project.

According to the skill's listing, it runs no scripts and uses no network access. Its only file is SKILL.md.

  • Required: presentation/index.html present in the project
  • Runs scripts: no
  • Uses network: no
  • Licence: MIT

Install the skill (ZIP download or Claude apps upload)

Download the skill ZIP from the page where you found this guide. Unzip it into your personal skills folder, ~/.claude/skills/, or into a project's own .claude/skills/ folder so it applies only to that repository.

If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.

  • Personal install: unzip into ~/.claude/skills/
  • Project install: unzip into the project's .claude/skills/ folder
  • Claude apps: Settings → Capabilities → Skills, then upload

How to trigger the skill with natural requests

You do not need a special command. Ask the agent in plain language about the presentation, and mention the file or the slides you mean. Requests that match the skill's topic, such as slide structure, numbering, journey levels or navigation links, are the ones it is meant to handle.

Be specific about the change. Say where the new slide goes, which section it belongs to, and whether it should carry a level transition.

  • Add a new slide about prompt caching after slide 12 in the presentation.
  • Remove slide 20 and fix the numbering and TOC links.
  • Move the Project Memory section so it comes before Better Prompting.
  • Add a Medium level divider before the Structured Workflows section.

What the agent does when it edits slides

The skill tells the agent to follow fixed rules after any structural change. These are the steps it should apply, and you can use them as a checklist when reviewing its work.

  • Renumber all data-slide attributes sequentially starting from 1.
  • Update every goToSlide() call in the TOC / Journey Map slide so it matches the new numbers.
  • Leave totalSlides alone, since the JS computes it from the DOM.
  • Verify there are no gaps or duplicate slide numbers.
  • Do not hardcode .level-badge elements in the HTML; the JS injects them at runtime.

Understand the journey bar levels

The presentation uses four levels rather than cumulative percentages. A data-level attribute on a section divider sets the level for that slide and every slide after it, until the next transition. The bar fills to 25%, 50%, 75% or 100% for Low, Medium, High or Pro. The bar is hidden on slide 1, and slides before the first data-level show an empty bar.

Knowing this helps you check the agent's edits: a new section divider should carry the level that matches its place in the deck, and slides that inherit a level should not carry their own data-level.

  • Slides 1-4: Part 0 Introduction, no level, bar hidden or empty
  • Slides 5-9: Part 1 Prerequisites, no level
  • Slides 10-17: Part 2 Better Prompting, low (25%)
  • Slides 18-24: Part 3 Project Memory, medium (50%)
  • Slides 25-28: Part 4 Structured Workflows, inherits medium
  • Slides 29-33: Part 5 Domain Knowledge, high (75%)
  • Slides 34-46: Part 6 Agentic Engineering, high (75%)
  • Slides 47 onward: Appendix, inherits high
<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>

Review the result before you merge

Agent edits are only as good as your check afterwards. Open the presentation in a browser and move through it with the arrow keys, Space or touch swipe. Confirm that the slide counter reads current / total at the bottom-left and that the total matches what you expect.

Then click each TOC link and confirm it lands on the intended slide. Look at the journey bar on a few slides on either side of each level change.

  • Click every TOC link and check the destination slide
  • Check the counter at bottom-left shows the right total
  • Confirm the journey bar changes at each section divider
  • Search the file for duplicate or missing data-slide numbers

What people use it for

  • Adding a new slide to an existing section and renumbering everything after it
  • Moving a whole section, such as Project Memory, to a new position in the deck
  • Removing an outdated slide and fixing the TOC links that pointed past it
  • Adding a new section divider with the correct data-level for the journey bar
  • Auditing the file for duplicate data-slide numbers or goToSlide links that no longer match

Frequently asked questions

Is the Presentation Structure Editor skill free?

The skill is published under the MIT licence, as stated on its listing. Check the licence file in the source repository for the full terms.

What do I need to use this skill?

You need the presentation/index.html file from the claude-code-best-practice repository in your project. The skill's listing says it runs no scripts and uses no network access.

Where do I install an agent skill?

Unzip the skill into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, upload it under Settings → Capabilities → Skills.

Can this skill create a presentation from scratch or export to PowerPoint?

No. The skill only describes the HTML structure, level system and navigation rules of one repository's presentation. It does not generate slide designs or export to PowerPoint.

Why does the agent need to renumber slides?

Navigation uses data-slide numbers and goToSlide(n) calls in the TOC. If a slide is added or removed without renumbering, links can point to the wrong slide or leave gaps.

What should I do if the journey bar looks wrong after an edit?

Check that each section divider carries the correct data-level value and that slides inheriting a level do not have their own. Also make sure no level-badge was hardcoded in the HTML, since the JS injects it at runtime.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill is a good fit for maintainers and contributors who need an agent to add, move or renumber slides in the claude-code-best-practice presentation without breaking data-slide numbers or TOC links. It is not suited to building presentations for other projects, generating designs, or exporting to PowerPoint, so pick a general presentation tool for those jobs.

Download the skill