html-ppt

name	html-ppt
description	HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "Slides", "Speech Draft", "Create a PPT", "Create a slide deck", a reveal-style HTML deck, a Xiaohongshu Graphics, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "Slides", "Speech Draft", "Sharing Draft", "Xiaohongshu Graphics", "talk slides", "pitch deck", "tech sharing", "technical presentation".
triggers	["ppt","deck","slides","presentation","keynote","reveal","slideshow","slides","Speech draft","Presentation talk track","talk slides","pitch deck","tech sharing","technical presentation"]
od	{"mode":"deck","scenario":"marketing","upstream":"https://github.com/lewislulu/html-ppt-skill","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":false},"speaker_notes":true,"animations":true,"example_prompt":"Create a 12-page HTML presentation using html-ppt. First let's align on three things: content/page-count/audience, design theme (recommend 2-3 out of 36 sets), and the starting template (pitch-deck, tech-sharing, weekly-report, xhs-post, or presenter-mode-reveal). Once aligned, begin writing the slides."}

html-ppt — HTML PPT Studio

Author professional HTML presentations as static files. One theme file = one look. One layout file = one page type. One animation class = one entry effect. All pages share a token-based design system in assets/base.css.

Install

npx skills add https://github.com/lewislulu/html-ppt-skill

One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.

What the skill gives you

• 36 themes (assets/themes/*.css) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
• 15 full-deck templates (templates/full-decks/<name>/) — complete multi-slide decks with scoped .tpl-<name> CSS. 8 extracted from real-world decks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, presenter-mode-reveal — Dedicated Presenter Mode)
• 31 layouts (templates/single-page/*.html) with realistic demo data
• 27 CSS animations (assets/animations/animations.css) via data-anim
• 20 canvas FX animations (assets/animations/fx/*.js) via data-fx — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
• Keyboard runtime (assets/runtime.js) — arrows, T (theme), A (anim), F/O, S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards), N (notes drawer), R (reset timer in presenter)
• FX runtime (assets/animations/fx-runtime.js) — auto-inits [data-fx] on slide enter, cleans up on leave
• Showcase decks for themes / layouts / animations / full-decks gallery
• Headless Chrome render script for PNG export

When to use

Use when the user asks for any kind of slide-based output or wants to turn text/notes into a presentable deck. Prefer this over building from scratch.

🎤 Presenter Mode (Presenter Mode + Verbatim Transcript)

If the user mentions any of: Speech / Sharing / Keynote / Transcript / speaker notes / presenter view / Presenter View / Teleprompter, or says things like "I need to present xxx to my team", "I want to do a tech sharing session", "I'm worried about not speaking smoothly", "I want a PPT with speaker transcripts" — use the presenter-mode-reveal full-deck template and write 150–300 words of speaker transcript in each slide's <aside class="notes">.

See references/presenter-mode.md for the full authoring guide including the 3 rules of speaker script writing:

1. Not a script, but visual cues — bold key terms + make transition sentences independent paragraphs
2. 150–300 words per page — maintaining a pace of 2–3 minutes per page
3. Use conversational language, not formal prose — "therefore" → "so", "this solution" → "this way"

All full-deck templates support the S key presenter mode (it's built into runtime.js). S opens a new popup window with 4 magnetic cards:

• 🔵 CURRENT — pixel-perfect iframe preview of the current slide
• 🟣 NEXT — pixel-perfect iframe preview of the next slide
• 🟠 SPEAKER SCRIPT — large-font verbatim transcript (scrollable)
• 🟢 TIMER — elapsed time + slide counter + prev/next/reset buttons

Each card is draggable by its header and resizable by the bottom-right corner handle. Card positions/sizes persist to localStorage per deck. A "Reset layout" button restores the default arrangement.

Why the previews are pixel-perfect: each preview is an <iframe> that loads the actual deck HTML with a ?preview=N query param; runtime.js 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 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. The two windows also stay in sync via BroadcastChannel.

Only presenter-mode-reveal is designed from the ground up around the feature with proper example speaker transcript on every slide.

Keyboard in presenter window: ← → navigate (syncs audience) · R reset timer · Esc close popup. Keyboard in audience window: S open presenter · T cycle theme · ← → navigate (syncs presenter) · F fullscreen · O overview.

Before you author anything — ALWAYS ask or recommend

Do not start writing slides until you understand three things. Either ask the user directly, or — if they already handed you rich content — propose a tasteful default and confirm.

1. Content & audience. What's the deck about, how many slides, who's watching (engineers / execs / Xiaohongshu readers / students / VCs)?
2. Style / theme. Which of the 36 themes fits? If unsure, recommend 2-3 candidates based on tone:
   • Business / investor pitch → pitch-deck-vc, corporate-clean, swiss-grid
   • Tech sharing / engineering → tokyo-night, dracula, catppuccin-mocha, terminal-green, blueprint
   • Xiaohongshu Graphics → xiaohongshu-white, soft-pastel, rainbow-gradient, magazine-bold
   • Academic / report → academic-paper, editorial-serif, minimal-white
   • Edgy / cyber / launch → cyberpunk-neon, vaporwave, y2k-chrome, neo-brutalism
3. Starting point. One of the 14 full-deck templates, or scratch? Point to the closest templates/full-decks/<name>/ and ask if it fits. If the user's content suggests something obvious (e.g. "I want to host a product launch" → product-launch), propose it confidently instead of asking blindly.

A good opening message looks like:

I can build this PPT for you! First, let's confirm three things:

1. Outline content / page count / who is the audience?
2. Style preference? I recommend choosing one of these 3 themes: tokyo-night (looks great by default for tech sharing), xiaohongshu-white (Xiaohongshu style), corporate-clean (formal reporting).
3. Do you want to bootstrap with my existing tech-sharing full-deck template?

Only after those are clear, scaffold the deck and start writing.

Quick start

1. Scaffold a new deck. From the repo root:

   ./scripts/new-deck.sh my-talk
   open examples/my-talk/index.html
   

2. Pick a theme. Open the deck and press T to cycle. Or hard-code it:

   <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
   

   Catalog in references/themes.md.
3. Pick layouts. Copy <section class="slide">...</section> blocks out of files in templates/single-page/ into your deck. Replace the demo data. Catalog in references/layouts.md.
4. Add animations. Put data-anim="fade-up" (or class="anim-fade-up") on any element. On <ul>/grids, use anim-stagger-list for sequenced reveals. For canvas FX, use <div data-fx="knowledge-graph">...</div> and include <script src="../assets/animations/fx-runtime.js"></script>. Catalog in references/animations.md.
5. Use a full-deck template. Copy templates/full-decks/<name>/ into examples/my-talk/ as a starting point. Each folder is self-contained with scoped CSS. Catalog in references/full-decks.md and gallery at templates/full-decks-index.html.
6. Render to PNG.

   ./scripts/render.sh templates/theme-showcase.html       # one shot
   ./scripts/render.sh examples/my-talk/index.html 12      # 12 slides
   

Authoring rules (important)

• Always start from a template. Don't author slides from scratch — copy the closest layout from templates/single-page/ first, then replace content.
• Use tokens, not literal colors. Every color, radius, shadow should come from CSS variables defined in assets/base.css and overridden by a theme. Good: color: var(--text-1). Bad: color: #111.
• Don't invent new layout files. Prefer composing existing ones. Only add a new templates/single-page/*.html if none of the 30 fit.
• Respect chrome slots. .deck-header, .deck-footer, .slide-number and the progress bar are provided by assets/base.css + runtime.js.
• Keyboard-first. Always include <script src="../assets/runtime.js"></script> so the deck supports ← → / T / A / F / S / O / hash deep-links.
• One .slide per logical page. runtime.js makes .slide.is-active visible; all others are hidden.
• Supply notes. Wrap speaker notes in <div class="notes">…</div> inside each slide. Press S to open the overlay.
• NEVER put presenter-only text on the slide itself. Descriptive text like "This page displays..." or "Speaker: You can supplement here..." or small explanatory captions aimed at the presenter MUST go inside <div class="notes">, NOT as visible <p> / <span> elements on the slide. The .notes class is display:none by default — it only appears in the S overlay. Slides should contain ONLY audience-facing content (titles, bullet points, data, charts, images).

Writing guide

See references/authoring-guide.md for a step-by-step walkthrough: file structure, naming, how to transform an outline into a deck, how to choose layouts and themes per audience, how to do a Chinese + English deck, and how to export.

Catalogs (load when needed)

• references/themes.md — all 36 themes with when-to-use.
• references/layouts.md — all 31 layout types.
• references/animations.md — 27 CSS + 20 canvas FX animations.
• references/full-decks.md — all 15 full-deck templates.
• references/presenter-mode.md — Presenter Mode + speaker notes Writing Guide (Must-Read for Tech Sharing/Presentations).
• references/authoring-guide.md — full workflow.

File structure

html-ppt/
├── SKILL.md                 (this file)
├── references/              (detailed catalogs, load as needed)
├── assets/
│   ├── base.css             (tokens + primitives — do not edit per deck)
│   ├── fonts.css            (webfont imports)
│   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
│   ├── themes/*.css         (36 token overrides, one per theme)
│   └── animations/
│       ├── animations.css   (27 named CSS entry animations)
│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│   ├── deck.html                  (minimal 6-slide starter)
│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
│   ├── layout-showcase.html       (iframe tour of all 31 layouts)
│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
│   ├── full-decks-index.html      (gallery of all 14 full-deck templates)
│   ├── full-decks/<name>/         (14 scoped multi-slide deck templates)
│   └── single-page/*.html         (31 layout files with demo data)
├── scripts/
│   ├── new-deck.sh                (scaffold a deck from deck.html)
│   └── render.sh                  (headless Chrome → PNG)
└── examples/demo-deck/            (complete working deck)

Rendering to PNG

scripts/render.sh wraps headless Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome. For multi-slide capture, runtime.js exposes #/N deep-links, and render.sh iterates 1..N.

./scripts/render.sh templates/single-page/kpi-grid.html        # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 slides, custom dir

Keyboard cheat sheet

←  →  Space  PgUp  PgDn  Home  End    navigate
F                                       fullscreen
S                                       open presenter window (magnetic cards: current/next/script/timer)
N                                       quick notes drawer (bottom overlay)
R                                       reset timer (in presenter window)
?preview=N                              URL param — force preview-only mode (single slide, no chrome)
O                                       slide overview grid
T                                       cycle themes (reads data-themes attr)
A                                       cycle demo animation on current slide
#/N in URL                              deep-link to slide N
Esc                                     close all overlays

License & author

MIT. Copyright (c) 2026 lewis <[e-mail]>.