html-ppt

Convert outline content into static HTML decks with token-driven themes.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/enkayas/booth-affinity-108 --skill html-ppt-enkayas
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-ppt
Source: https://github.com/enkayas/booth-affinity-108/tree/main/.claude/skills/html-ppt
Command: npx skills add https://github.com/enkayas/booth-affinity-108 --skill html-ppt-enkayas

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill converts outline content into professional, static HTML decks using a token-driven design system. It eliminates the need for build steps by delivering ready-to-use presentations that are consistent across themes, layouts, and animations.

Core Features & Use Cases

  • 36 themes in assets/themes/*.css to skin decks with a single token-driven switch.
  • 15 full-deck templates under templates/full-decks/ for complete multi-slide experiences.
  • 31 single-page layouts under templates/single-page/*.html for versatile slide structures.
  • 27 CSS animations in assets/animations/animations.css for tasteful entry effects.
  • 20 canvas FX animations in assets/animations/fx/ for cinematic visuals.
  • Keyboard-driven runtime in assets/runtime.js with presenter mode and navigation.
  • Zero-build workflow: static HTML/CSS/JS with optional headless PNG rendering.
  • Showcase and render tooling: ready-to-run scripts for previews and PNG exports.

Quick Start

Scaffold a new deck with a single command, then open the generated index.html and begin replacing the demo content.

Use this skill when you need to produce polished, multi-page presentations or pitches quickly from templates, with consistent theming and presentation features like 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 convert an outline into an HTML presentation without a complex build step?

To generate static HTML presentations from outlines, this tool applies a zero-build workflow to produce ready-to-use HTML, CSS, and JS files, eliminating complex build steps entirely.

Can I use CSS themes to skin my HTML slides quickly?

Yes, you can skin HTML slides quickly using a token-driven design system. It provides 36 pre-built CSS themes, allowing you to switch the entire presentation's visual style with a single token change.

How do I add CSS animations to my static HTML deck?

Add CSS animations to static HTML decks by referencing the included libraries, which provide 27 CSS animations for slide entries and 20 canvas FX animations for cinematic visual effects.

Does this HTML presentation tool support presenter mode and keyboard navigation?

Yes, the HTML presentation tool supports presenter mode and keyboard navigation through an included runtime JavaScript file, enabling seamless slideshow controls and a dedicated presenter view.

What is the best way to export my HTML slides to PNG images?

Export HTML slides to PNG images using the provided headless rendering scripts, which are ready-to-run tools that capture static slide content as PNG files for easy sharing.

Static HTML presentations vs. other presentation frameworks: when should I choose a zero-build workflow?

Choose a zero-build workflow for static HTML presentations when you need quick, consistent multi-slide experiences without compilation overhead, ideal for pitches and bilingual showcases using theme-driven templates.