presentation-structure

Explain the data-slide and data-level attributes of an HTML-based presentation.

64.2k|6.4k|Updated Oct 31, 2025
One-click install
npx skills add https://github.com/shanraisshan/claude-code-best-practice --skill presentation-structure
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: presentation-structure
Source: https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/presentation/presentation-structure
Command: npx skills add https://github.com/shanraisshan/claude-code-best-practice --skill presentation-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a clear understanding of how a specific HTML-based presentation is structured, including its slide format, navigation, and sectioning, enabling easier content management and updates.

Core Features & Use Cases

  • Slide Identification: Understand the data-slide attribute for sequential numbering.
  • Sectioning and Levels: Grasp the data-level system for journey bar progression and section dividers.
  • Navigation Mechanics: Learn how goToSlide() and arrow keys facilitate movement.
  • Renumbering Rules: Follow guidelines for updating slide attributes after content changes.
  • Use Case: When tasked with updating a slide in the presentation, this Skill helps you quickly locate the correct slide number and understand how its position affects the overall presentation flow and navigation.

Quick Start

Explain the data-level system used in the presentation.

Frequently Asked Questions about presentation-structure

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

FAQPage Schema
How do I structure an HTML presentation for slide navigation?

HTML presentation navigation uses `goToSlide()` functions and arrow keys to move between slides. The structure relies on `data-slide` attributes for sequential numbering and `data-level` attributes to manage journey bar progression.

What is the data-level attribute used for in HTML slide formats?

The `data-level` attribute in HTML slide formats defines section dividers and controls the journey bar progression. It organizes the presentation into hierarchical levels, allowing users to track their position within the broader content flow.

How do I renumber slides when updating HTML presentation content?

To renumber slides in an HTML presentation, follow the specific renumbering rules for updating `data-slide` attributes after content changes. This ensures sequential numbering remains accurate and navigation functions like `goToSlide()` continue to work correctly.

How does the journey bar progression work in HTML presentations?

Journey bar progression in HTML presentations is driven by the `data-level` attribute system. As users navigate through slides, the journey bar visually tracks their progress through the hierarchical section levels defined in the presentation structure.

Can I use arrow keys for slide navigation in HTML presentations?

Yes, arrow keys facilitate movement in HTML presentations alongside the `goToSlide()` function. These navigation mechanics allow users to move sequentially through slides identified by `data-slide` attributes during the presentation flow.