html-ppt — HTML PPT Studio

A world-class AgentSkill for producing professional HTML presentations in 36 themes, 15 full-deck templates, 31 page layouts, 47 animations (27 CSS + 20 canvas FX), and a true presenter mode with pixel-perfect previews + speaker script + timer — all pure static HTML/CSS/JS, no build step.

Author: lewis <sudolewis@gmail.com> License: MIT 中文文档: README.zh-CN.md

One command installs 36 themes × 20 canvas FX × 31 layouts × 15 full decks + presenter mode. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.

🎤 Presenter Mode (new!)

Press S on any deck to pop open a dedicated presenter window with four draggable, resizable magnetic cards: current slide, next slide preview, speaker script (逐字稿), and timer. Two windows stay in sync via BroadcastChannel.

Why previews are pixel-perfect: each card is an `` that loads the same deck HTML with a ?preview=N query param. The runtime detects this and renders only slide N with no chrome — so the preview uses the same CSS, theme, fonts and viewport as the audience view. Colors and layout are guaranteed identical.

Smooth (no-reload) navigation: on slide change, the presenter window sends postMessage({type:'preview-goto', idx:N}) to each iframe. The iframe just toggles .is-active between slides — no reload, no flicker.

Speaker script rules (3 golden):

1. Prompt signals, not lines to read — bold the keywords, separate transition sentences into their own paragraphs
2. 150–300 words per slide — that's the ~2–3 min/page pace
3. Write it like you speak — conversational, not written prose

See references/presenter-mode.md for the full authoring guide, or copy the ready-made template at templates/full-decks/presenter-mode-reveal/ which ships with full 150-300 word speaker scripts on every slide.

Install (one command)

npx skills add 

That registers the skill with your agent runtime. After install, any agent that supports AgentSkills can author presentations by asking things like:

"做一份 8 页的技术分享 slides，用 cyberpunk 主题" "turn this outline into a pitch deck" "做一个小红书图文，9 张，白底柔和风"

What's in the box

| | Count | Where | |---|---|---| | 🎤 Presenter mode | NEW | S key / ?preview=N | | 🎨 Themes | 36 | assets/themes/*.css | | 📑 Full-deck templates | 15 | templates/full-decks// | | 🧩 Single-page layouts | 31 | templates/single-page/*.html | | ✨ CSS animations | 27 | assets/animations/animations.css | | 💥 Canvas FX animations | 20 | assets/animations/fx/*.js | | 🖼️ Showcase decks | 4 | templates/*-showcase.html | | 📸 Verification screenshots | 56 | scripts/verify-output/ |

36 Themes

minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, `sunse