html-ppt — HTML PPT Studio

A world-class AgentSkill for producing professional HTML presentations in 36 themes, 15 full-deck templates, 36 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 × 36 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 <iframe> 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 https://github.com/lewislulu/html-ppt-skill

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 张，白底柔和风"

Offline / manual install

npx skills add <url> needs network on the target machine. Three alternatives, in decreasing order of how much network they need.

1. Install from a local copy. Fetch the repo anywhere, move the folder over (git, zip, USB), then point the CLI at the directory instead of the URL:

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

npx still downloads the skills package itself once. For a fully air-gapped machine, run npm i -g skills on a connected one first, or use method 2.

2. Copy it in by hand — no Node, no CLI. A skill is just a folder with SKILL.md at its root. Drop it in the directory your agent scans:

mkdir -p ~/.claude/skills
cp -R html-ppt-skill ~/.claude/skills/html-ppt
ls ~/.claude/skills/html-ppt/SKILL.md      # must exist

Only SKILL.md, assets/, templates/, references/ and scripts/ are needed at runtime. docs/ is ~4.6 MB of README artwork and can be dropped from an offline copy.

3. No agent at all. The templates are plain static files — usable directly:

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

Does it run without a network?

Yes, with one caveat. Themes, layouts, animations, presenter mode and PNG rendering are all local static HTML/CSS/JS with no build step and no runtime fetches. The single remote dependency is assets/fonts.css, which @imports Google Fonts.

Offline, those imports simply fail and the browser falls back to the system stack already declared in assets/base.css (-apple-system / Helvetica / Georgia / Menlo), so decks render correctly — just in different typefaces. To pin typography offline, replace assets/fonts.css with @font-face rules pointing at font files you ship yourself, or delete the imports and accept the system stack.

What's in the box

36 Themes

minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte, catppuccin-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.

Each is a pure CSS-tokens file — swap one <link> to reskin the entire deck. Browse them all in templates/theme-showcase.html (each slide rendered in an isolated iframe so theme ≠ theme is visually guaranteed).

15 Full-deck templates

Eight extracted from real-world decks, seven generic scenario scaffolds:

Extracted looks

• xhs-white-editorial — 小红书白底杂志风
• graphify-dark-graph — 暗底 + 力导向知识图谱
• knowledge-arch-blueprint — 蓝图 / 架构图风
• hermes-cyber-terminal — 终端 cyberpunk
• obsidian-claude-gradient — 紫色渐变卡
• testing-safety-alert — 红 / 琥珀警示风
• xhs-pastel-card — 柔和马卡龙图文
• dir-key-nav-minimal — 方向键极简

Scenario decks

• pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post (9-slide 3:4), course-module, presenter-mode-reveal 🎤 — complete talk template with full 150-300 word speaker scripts on every slide, designed around the S key presenter mode

Each is a self-contained folder with scoped .tpl-<name> CSS so multiple decks can be previewed side-by-side without collisions. Browse the full gallery in templates/full-decks-index.html.

36 Single-page layouts

cover · toc · section-divider · bullets · two-column · three-column · big-quote · stat-highlight · kpi-grid · table · code · diff · terminal · flow-diagram · timeline · roadmap · mindmap · comparison · pros-cons · todo-checklist · gantt · image-hero · image-grid · chart-bar · chart-line · chart-pie · chart-radar · arch-diagram · process-steps · cta · thanks

Every layout ships with realistic demo data so you can drop it into a deck and immediately see it render.

The big iframe is loading templates/single-page/<name>.html directly and cycling through all 36 layouts every 2.8 seconds.

27 CSS animations + 20 Canvas FX

CSS (lightweight) — directional fades, rise-in, zoom-pop, blur-in, glitch-in, typewriter, neon-glow, shimmer-sweep, gradient-flow, stagger-list, counter-up, path-draw, morph-shape, parallax-tilt, card-flip-3d, cube-rotate-3d, page-turn-3d, perspective-zoom, marquee-scroll, kenburns, ripple-reveal, spotlight, …

Canvas FX (cinematic) — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed physics), neural-net (signal 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. Each is a real hand-rolled canvas module auto-initialised on slide enter via fx-runtime.js.

Quick start (manual, after install or git clone)

# Scaffold a new deck from the base template
./scripts/new-deck.sh my-talk

# ...or from a full-deck template, into any directory you like.
# Asset paths are computed for wherever the deck lands, then verified.
./scripts/new-deck.sh my-talk ~/decks -t pitch-deck

# Browse everything
open templates/theme-showcase.html         # all 36 themes (iframe-isolated)
open templates/layout-showcase.html        # all 36 layouts
open templates/animation-showcase.html     # all 47 animations
open templates/full-decks-index.html       # all 15 full decks

# Render any template to PNG via headless Chrome
./scripts/render.sh templates/theme-showcase.html
./scripts/render.sh examples/my-talk/index.html 12

Images on a slide

Five layouts take real images — pick by how many the page has to carry:

They share one primitive from assets/base.css:

<figure class="img-frame"><img src="https://stargazers.cn/raw/lewislulu/html-ppt-skill/main/shot.png" alt=""></figure>          <!-- crops to fill -->
<figure class="img-frame contain"><img src="https://stargazers.cn/raw/lewislulu/html-ppt-skill/main/diagram.svg" alt=""></figure> <!-- letterboxed -->

The frame owns the aspect ratio (--img-ratio) and the crop, so you can drop in a portrait, square or ultrawide image without touching the layout. Placeholder artwork in assets/demo-images/ is hand-written SVG (~1 KB each) so every layout renders offline.

Custom logo

Brand a deck with one attribute — no per-slide <img> copy-paste:

<body data-logo="logo.svg" data-logo-position="bottom-right" data-logo-size="40px">

data-logo-position takes top-left / top-right / bottom-left / bottom-right (default top-right); data-logo-size sets the height. Skip it on a single slide with <section class="slide" data-no-logo> — handy for the cover. The logo also shows in the presenter preview, and on every page of a PDF export (skipping the data-no-logo ones).

Prefer to place it yourself? <img class="deck-logo" data-pos="top-left" src="https://stargazers.cn/raw/lewislulu/html-ppt-skill/main/logo.svg"> inside .deck works with no JS at all.

Keyboard cheat sheet

On a phone or tablet, swipe left for the next slide, right for the previous one — no keyboard needed. Pinch-zoom, vertical scrolling, the overview grid and the notes drawer are left alone.

← → Space PgUp PgDn Home End   navigate
swipe ← / →  (touch)           navigate
F                               fullscreen
S                               open presenter window (magnetic cards)
N                               quick notes drawer (bottom)
R                               reset timer (in presenter window)
O                               slide overview grid
T                               cycle themes (syncs to presenter)
A                               cycle a demo animation on current slide
#/N (URL)                       deep-link to slide N
?preview=N (URL)                preview-only mode (single slide, no chrome)

Project structure

html-ppt-skill/
├── SKILL.md                      agent-facing dispatcher
├── README.md                     this file
├── references/                   detailed catalogs
│   ├── themes.md                 36 themes with when-to-use
│   ├── layouts.md                31 layout types
│   ├── animations.md             27 CSS + 20 FX catalog
│   ├── full-decks.md             15 full-deck templates
│   └── authoring-guide.md        full workflow
├── assets/
│   ├── base.css                  shared tokens + primitives
│   ├── fonts.css                 webfont imports
│   ├── runtime.js                keyboard + presenter + overview
│   ├── themes/*.css              36 theme token files
│   └── animations/
│       ├── animations.css        27 named CSS animations
│       ├── fx-runtime.js         auto-init [data-fx] on slide enter
│       └── fx/*.js               20 canvas FX modules
├── templates/
│   ├── deck.html                 minimal starter
│   ├── theme-showcase.html       iframe-isolated theme tour
│   ├── layout-showcase.html      all 36 layouts
│   ├── animation-showcase.html   47 animation slides
│   ├── full-decks-index.html     15-deck gallery
│   ├── full-decks/<name>/        15 scoped multi-slide decks
│   └── single-page/*.html        31 layout files with demo data
├── scripts/
│   ├── new-deck.sh               scaffold
│   ├── render.sh                 headless Chrome → PNG
│   └── verify-output/            56 self-test screenshots
└── examples/demo-deck/           complete working deck

Philosophy

• Token-driven design system. All color, radius, shadow, font decisions live in assets/base.css + the current theme file. Change one variable, the whole deck reflows tastefully.
• Iframe isolation for previews. Theme / layout / full-deck showcases all use <iframe> per slide so each preview is a real, independent render.
• Zero build. Pure static HTML/CSS/JS. CDN only for webfonts, highlight.js and chart.js (optional).
• Senior-designer defaults. Opinionated type scale, spacing rhythm, gradients and card treatments — no "Corporate PowerPoint 2006" vibes.
• Chinese + English first-class. Noto Sans SC / Noto Serif SC pre-imported.

License

MIT © 2026 lewis <sudolewis@gmail.com>.