html-ppt

Generate static HTML slide decks with theme tokens and keyboard runtime navigation.

Updated Apr 19, 2026
One-click install
npx skills add https://github.com/Your-Voldemort/html-ppt-skill --skill html-ppt-your-voldemort
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-ppt
Source: https://github.com/Your-Voldemort/html-ppt-skill/tree/main
Command: npx skills add https://github.com/Your-Voldemort/html-ppt-skill --skill html-ppt-your-voldemort

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It removes the repetitive effort of building slide decks from scratch by providing an end-to-end system: reusable page layouts, theme token styling, and runtime navigation so your output is immediately usable and presentation-ready.

Core Features & Use Cases

  • Professional static HTML presentations: author multi-slide decks using consistent markup and shared styling tokens.
  • 36 theme variants + instant theme cycling: reskin decks by switching CSS theme files (keyboard T supported in the runtime).
  • 31 single-page layouts + 15 full-deck templates: start from ready-made deck structures (including a talk-focused template).
  • Animations (CSS + canvas FX): apply entry animations with data-anim and canvas FX with data-fx for richer visuals.
  • Keyboard-first runtime: slide navigation, fullscreen, overview grid (O), notes drawer (N), and presenter mode (S) for talk delivery.
  • Presenter mode + speaker script support: use the dedicated presenter-mode-reveal template or add <aside class="notes">...</aside> per slide for 150–300 word speaker text.

Quick Start

Ask for a deck by telling the agent: create an N-slide HTML presentation about [topic] for [audience], using the theme [theme-name], and include speaker scripts (150–300 words per slide) via the presenter-mode-reveal template.

Frequently Asked Questions about html-ppt

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

FAQPage Schema
How do I create a static HTML presentation with speaker notes and keyboard navigation?

You can create a static HTML presentation by generating multi-slide decks with reusable layouts, CSS theme tokens, and keyboard-first runtime navigation. Presenter mode and speaker scripts are supported using the presenter-mode-reveal template with aside notes elements.

What is the best way to build an HTML slide deck without starting from scratch?

The best way to build an HTML slide deck is using pre-built full-deck templates and single-page layouts. This provides consistent markup, shared styling tokens, and runtime.js behavior for immediate slide control and preview rendering.

Can I switch themes dynamically in an HTML presentation?

Yes, you can switch themes dynamically in your HTML presentation. The runtime supports instant theme cycling across 36 theme variants by switching CSS theme files, which can be triggered directly via the keyboard T shortcut.

Does this HTML presentation system support CSS and canvas animations?

Yes, this HTML presentation system supports both CSS and canvas animations. You can apply entry animations using the data-anim attribute and enrich visuals with canvas FX by configuring the data-fx attribute on slides.

How do I add speaker scripts to my HTML slides for talk delivery?

You add speaker scripts to HTML slides by inserting an aside class notes element per slide containing 150 to 300 words of speaker text, or by using the dedicated presenter-mode-reveal template for talk delivery.

What keyboard shortcuts are available for navigating HTML slide decks?

Keyboard shortcuts for navigating HTML slide decks include slide navigation controls, fullscreen, overview grid via O, notes drawer via N, and presenter mode via S. The runtime.js provides this keyboard-first behavior for presentation delivery.