html-ppt-skill

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:

Agent	Project scope	Global scope
Claude Code	.claude/skills/html-ppt/	~/.claude/skills/html-ppt/
Codex	.agents/skills/html-ppt/	~/.codex/skills/html-ppt/
Cursor	.agents/skills/html-ppt/	~/.cursor/skills/html-ppt/
OpenCode	.agents/skills/html-ppt/	~/.config/opencode/skills/html-ppt/
Gemini CLI	.agents/skills/html-ppt/	~/.gemini/skills/html-ppt/
Windsurf	.windsurf/skills/html-ppt/	~/.codeium/windsurf/skills/html-ppt/

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

	Count	Where
🎤 Presenter mode	NEW	S key / ?preview=N
🎨 Themes	36	assets/themes/*.css
📑 Full-deck templates	15	templates/full-decks/<name>/
🧩 Single-page layouts	36	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, 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:

I have…	Layout
one screenshot / diagram / chart	image-single.html — letterboxed, never cropped
one photo that should carry the page	image-full-bleed.html — fills the slide, scrim keeps the title readable
one image plus an argument	image-text-split.html — 50/50, flip to swap sides
3–6 images	image-gallery.html — uniform grid, one caption each
a before and an after	image-compare.html — both sides identical size

They share one primitive from assets/base.css:

<figure class="img-frame"><img src="shot.png" alt=""></figure>          <!-- crops to fill -->
<figure class="img-frame contain"><img src="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="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.