html-ppt

Generate static HTML presentation decks from theme and layout templates.

Updated May 20, 2026
One-click install
npx skills add https://github.com/tuanhqv123/slideai --skill html-ppt-tuanhqv123
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-ppt
Source: https://github.com/tuanhqv123/slideai/tree/main/skill
Command: npx skills add https://github.com/tuanhqv123/slideai --skill html-ppt-tuanhqv123

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It removes the repetitive, time-consuming work of designing slide decks by hand, especially the hard parts like consistent styling, layout variety, and presentation-ready interactions.

Core Features & Use Cases

  • Template-driven decks: Build professional multi-slide presentations using pre-made full-deck templates and reusable single-page layouts.
  • Token-based theming: Reskin an entire deck by switching a theme (CSS variables), keeping typography, spacing, and visual hierarchy consistent.
  • Presenter-ready mode + speaker notes: Use the S-key presenter view with pixel-perfect iframe previews, a timer, and slide-by-slide speaker scripts.
  • Rich motion effects: Apply named CSS animations and optional canvas FX effects via markup attributes.
  • Exportable workflow: Render slide(s) to PNG using the provided headless Chrome script for sharing, verification, or publishing.

Quick Start

Generate a complete deck by asking the skill to create a presentation from your topic and outline, then choose a suitable theme and layout, and include speaker notes using the presenter-mode template when you need an S-key run of show.

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 speaker notes and keyboard navigation?

Generate HTML presentations by applying pre-made full-deck templates and reusable layouts. The output includes keyboard-first runtime navigation, an S-key presenter view with timer, and slide-by-slide speaker scripts for pitch or talk scenarios.

Can I reskin an entire HTML slide deck using token-based theming?

Yes, you can reskin an entire HTML slide deck using token-based theming. Switching a theme via CSS variables updates typography, spacing, and visual hierarchy consistently across all slides without altering the underlying layout structure.

What is the best way to export HTML slide decks to PNG for distribution?

Exporting HTML slide decks to PNG is handled via deterministic rendering using a provided headless Chrome script. This workflow captures pixel-perfect slide images for sharing, verification, or publishing without manual screenshotting.

How do you add animations and canvas FX effects to HTML slide decks?

Add animations and canvas FX effects to HTML slide decks via markup attributes. The system applies named CSS animations and optional canvas FX effects directly within the static HTML presentation generation process.

Does the presenter mode workflow support pixel-perfect slide previews?

Yes, the presenter mode workflow supports pixel-perfect slide previews. Activated by the S-key, it displays iframe previews alongside a timer and speaker scripts to facilitate live talk delivery.

What are the limitations of using static HTML for presentation slide decks?

Static HTML presentation slide decks require a headless Chrome script for PNG export and rely on keyboard-first runtime navigation. They are generated from templates, meaning highly custom freeform layouts outside the provided templates are not natively supported.