presentation-structure

Explain slide structure, formatting, and navigation for single-file HTML presentations.

1|1|Updated Aug 8, 2025
One-click install
npx skills add https://github.com/caovinhphuc/mia-warehouse-management --skill presentation-structure-caovinhphuc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: presentation-structure
Source: https://github.com/caovinhphuc/mia-warehouse-management/tree/main/.claude/skills/presentation/presentation-structure
Command: npx skills add https://github.com/caovinhphuc/mia-warehouse-management --skill presentation-structure-caovinhphuc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill clarifies the underlying structure, slide formatting, and navigation logic of a specific single-file HTML presentation, enabling users to understand and modify its content and flow.

Core Features & Use Cases

  • Slide Format: Details the HTML structure for regular, section, and title slides, including data-slide and data-level attributes.
  • Journey Bar System: Explains the 4-level system (Low, Medium, High, Pro) and how data-level attributes on section slides dictate progress.
  • Navigation: Outlines how slide navigation works (arrow keys, swipe, goToSlide function) and how the slide counter is displayed.
  • Renumbering Rules: Provides a clear process for updating slide numbers and navigation links after content changes.
  • Use Case: A user needs to add a new slide to the presentation. They can consult this Skill to understand how to correctly number the new slide, update any relevant navigation links, and ensure the journey bar logic remains intact.

Quick Start

Use the presentation-structure skill to understand how to renumber slides after adding a new one.

Frequently Asked Questions about presentation-structure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure HTML presentation slides using data attributes?

To structure HTML presentation slides, you use specific attributes like `data-slide` and `data-level` on regular, section, and title slides to define their formatting and hierarchy within the single-file presentation architecture.

How does the journey bar progression system work in HTML presentations?

The journey bar progression system works by reading `data-level` attributes on section slides to update a 4-level system (`Low`, `Medium`, `High`, `Pro`), visually tracking the user's progress through the presentation.

How do I renumber slides and navigation links after modifying presentation content?

To renumber slides after adding or removing content, you must update the slide numbers and ensure any relevant navigation links are adjusted according to the specific renumbering rules to maintain the presentation flow.

How does single-file HTML presentation navigation work?

HTML presentation navigation works through standard arrow key inputs, swipe gestures, and the `goToSlide` function, while a slide counter displays the current position within the total slide deck.

What are the different slide formatting types in a single-file HTML presentation?

The slide formatting types in a single-file HTML presentation include regular slides, section slides, and title slides, each defined by specific HTML structures and `data-slide` attributes.

When do I need to update the data-level attributes on section slides?

You need to update `data-level` attributes on section slides whenever you modify the content flow, ensuring the journey bar logic remains intact and accurately reflects the 4-level progression system.