html-ppt

Generate static HTML/CSS/JS slide decks with themes and presenter mode.

Updated May 13, 2026
One-click install
npx skills add https://github.com/Ricardo-Vae/codex-research-skills --skill html-ppt-ricardo-vae
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-ppt
Source: https://github.com/Ricardo-Vae/codex-research-skills/tree/main/skills/html-ppt-skill
Command: npx skills add https://github.com/Ricardo-Vae/codex-research-skills --skill html-ppt-ricardo-vae

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It solves the time-consuming, repetitive work of creating polished slide decks by hand, especially when you need consistent styling across many slides and want speaker notes and presenter mode.

Core Features & Use Cases

  • Template-driven HTML deck generation: build multi-slide presentations using pre-made full-deck templates and single-page layouts with a shared design system.
  • Theme + layout + animation system: switch among many CSS themes, reuse structured page layouts, and apply entry animations via data attributes.
  • Presenter Mode with pixel-perfect previews: use the built-in “S” presenter overlay with CURRENT/NEXT iframe previews, speaker script notes, and a timer for smooth two-window presenting.
  • Export support: render slides to PNG using a headless Chrome script for sharing or documentation.

Quick Start

Use the html-ppt skill to generate your deck from the presenter-mode-reveal template, then include 150-300 words of speaker notes inside each slide’s aside for “S” presenter mode.

Frequently Asked Questions about html-ppt

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

FAQPage Schema
How do I generate HTML presentations with keyboard navigation and speaker notes?

To generate HTML presentations with keyboard navigation and speaker notes, use a template-driven workflow that builds static HTML/CSS/JS slide decks. You add 150-300 words of speaker notes inside each slide's aside element to enable presenter mode.

What is the best way to add presenter mode to HTML slides?

The best way to add presenter mode to HTML slides is using a built-in presenter overlay triggered by the 'S' key. It provides synchronized CURRENT/NEXT iframe previews, speaker script notes, and a timer for smooth two-window presenting.

Can I export HTML slides to PNG for documentation?

Yes, you can export HTML slides to PNG for documentation. The deck uses a headless Chrome script to render individual slides into PNG images, making them suitable for sharing or embedding in static documentation.

Does the HTML presentation generator support theme switching and entry animations?

Yes, the HTML presentation generator supports theme switching and entry animations. You can switch among multiple CSS themes and apply entry animations to structured page layouts using data attributes without altering the core HTML.

How do I create a pitch deck with consistent styling across multiple slides?

You create a pitch deck with consistent styling by applying a shared design system across reusable single-page layouts. The template-driven generation applies a uniform CSS theme to all slides, ensuring visual consistency throughout the deck.

What are the limitations of building slide decks with static HTML instead of presentation software?

Building slide decks with static HTML requires manual integration of speaker notes within aside tags and relies on a headless Chrome script for PNG export. Complex native transitions are replaced by CSS data attributes, demanding basic HTML familiarity.