lewislulu/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 <[email protected]> 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 `` 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 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// | | 🧩 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 `` 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 — 方向键极简

• pitch-deck, product-launch, tech-sharing, weekly-report,

Each is a self-contained folder with scoped .tpl- 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/.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:

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 copy-paste:

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

← → 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)

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//        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