36ecd2cf30
Problem: pressing T in audience window only swapped the host page's
theme CSS link. Preview iframes in the presenter window stayed on the
theme that was active when the popup was opened (or the HTML default).
Fix: 3-hop theme propagation via message types
1. audience cycleTheme() → BroadcastChannel 'theme' message
2. presenter window receives BC msg → postMessage 'preview-theme'
to both iframes
3. iframe preview mode listens for 'preview-theme' → swaps its own
<link id='theme-link'> href
Also:
- Audience window listens for 'theme' BC events → applies theme
(so pressing T in one window cycles theme in BOTH)
- Presenter window captures audience's current theme at open time
(data-theme attr) and forwards it to each iframe on 'preview-ready'
so previews match audience from frame 1, even if audience had
already cycled theme before opening presenter
- preview mode auto-detects theme base path from existing
theme-link href (same logic as audience cycleTheme)
Verified in headless Chrome: BC msg {type:theme, name:dracula} →
both audience and preview iframes show data-theme=dracula with
matching colors.
|
||
|---|---|---|
| assets | ||
| docs/readme | ||
| examples/demo-deck | ||
| references | ||
| scripts | ||
| templates | ||
| .clawscan-allow | ||
| LICENSE | ||
| README.md | ||
| SKILL.md | ||
README.md
html-ppt — HTML PPT Studio
A world-class AgentSkill for producing professional HTML presentations in 36 themes, 14 full-deck templates, 31 page layouts, and 47 animations (27 CSS + 20 canvas FX) — all pure static HTML/CSS/JS, no build step.
Author: lewis <sudolewis@gmail.com> License: MIT
One command installs 36 themes × 20 canvas FX × 31 layouts × 14 full decks = 101 PPT skills. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.
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 张，白底柔和风"
What's in the box
| Count | Where | |
|---|---|---|
| 🎨 Themes | 36 | assets/themes/*.css |
| 📑 Full-deck templates | 14 | templates/full-decks/<name>/ |
| 🧩 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,
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).
14 Full-deck templates
Eight extracted from real-world decks, six generic scenario scaffolds:
Extracted looks
xhs-white-editorial— 小红书白底杂志风graphify-dark-graph— 暗底 + 力导向知识图谱knowledge-arch-blueprint— 蓝图 / 架构图风hermes-cyber-terminal— 终端 cyberpunkobsidian-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
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.
31 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 31 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
# Browse everything
open templates/theme-showcase.html # all 36 themes (iframe-isolated)
open templates/layout-showcase.html # all 31 layouts
open templates/animation-showcase.html # all 47 animations
open templates/full-decks-index.html # all 14 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
Keyboard cheat sheet
← → Space PgUp PgDn Home End navigate
F fullscreen
S speaker notes overlay
O slide overview grid
T cycle themes
A cycle a demo animation on current slide
#/N (URL) deep-link to slide N
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 14 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 31 layouts
│ ├── animation-showcase.html 47 animation slides
│ ├── full-decks-index.html 14-deck gallery
│ ├── full-decks/<name>/ 14 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>.