Productivity
presentation-structure avatar

presentation-structure

Technical specification and structural guidelines for the project's single-file HTML/CSS/JS presentation system.

Introduction

The presentation-structure skill provides the authoritative knowledge required to manage, edit, and navigate the presentation located at presentation/index.html. This system is designed as a self-contained, single-file HTML document using inline CSS and JavaScript, optimized for technical demonstrations and agentic engineering workflows. It serves developers and technical leads who need to maintain an interactive slide deck that tracks progress through a four-level journey bar system. Users can leverage this skill to ensure consistency when reordering slides, updating navigation, or modifying section transitions within the documented slide format.

  • Defines the schema for slide structures using data-slide attributes for sequencing and data-level attributes for content classification.

  • Implements a journey bar system that maps specific slide ranges to defined levels (Low, Medium, High, Pro) including 25%, 50%, 75%, and 100% progress indicators.

  • Standardizes section dividers using the section-slide class, ensuring that level-transition descriptions are correctly handled without hardcoding style elements.

  • Provides a reliable logic for renumbering slides, updating goToSlide calls, and managing the totalSlides calculation via DOM injection.

  • Supports interactive features like arrow-key navigation, swipe support, and auto-computed progress tracking without requiring constant manual DOM updates.

  • When adding, removing, or reordering slides, it is critical to perform a full renumbering of all data-slide attributes starting from 1 to avoid sequence gaps.

  • Avoid hardcoding level badges in the HTML; rely on the provided JavaScript to dynamically inject .level-badge elements into slide h1 tags at runtime.

  • Always verify that goToSlide function calls within the TOC/Journey Map slide are updated to match the new numerical indexing after any content restructuring.

  • Maintain the strict separation of slide ranges defined in the documentation to ensure the journey bar accurately reflects the intended depth (Part 0 through Appendix).

  • Use the provided transition slide templates for section breaks to maintain the correct styling for section-number and section-desc elements.

Repository Stats

Stars
49,662
Forks
4,944
Open Issues
14
Language
HTML
Default Branch
main
Sync Status
Idle
Last Synced
Apr 30, 2026, 10:43 AM
View on GitHub