{
  "markdown": "# html-ppt — HTML PPT Studio\n\n> A world-class AgentSkill for producing professional HTML presentations in\n> **36 themes**, **15 full-deck templates**, **31 page layouts**,\n> **47 animations** (27 CSS + 20 canvas FX), and a **true presenter mode**\n> with pixel-perfect previews + speaker script + timer — all pure static\n> HTML/CSS/JS, no build step.\n\n**Author:** lewis &lt;sudolewis@gmail.com&gt;\n**License:** MIT\n**中文文档:** [README.zh-CN.md](README.zh-CN.md)\n\n![html-ppt — cover with live previews](docs/readme/hero.gif)\n\n> One command installs **36 themes × 20 canvas FX × 31 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.\n\n## 🎤 Presenter Mode (new!)\n\nPress `S` on any deck to pop open a dedicated presenter window with four\ndraggable, resizable **magnetic cards**: current slide, next slide preview,\nspeaker script (逐字稿), and timer. Two windows stay in sync via\n`BroadcastChannel`.\n\n![Presenter mode with 4 magnetic cards](docs/readme/presenter-mode.png)\n\n**Why previews are pixel-perfect:** each card is an `<iframe>` that loads the\nsame deck HTML with a `?preview=N` query param. The runtime detects this and\nrenders only slide N with no chrome — so the preview uses the **same CSS,\ntheme, fonts and viewport** as the audience view. Colors and layout are\nguaranteed identical.\n\n**Smooth (no-reload) navigation:** on slide change, the presenter window\nsends `postMessage({type:'preview-goto', idx:N})` to each iframe. The iframe\njust toggles `.is-active` between slides — **no reload, no flicker**.\n\n**Speaker script rules (3 golden):**\n1. **Prompt signals, not lines to read** — bold the keywords, separate\n   transition sentences into their own paragraphs\n2. **150–300 words per slide** — that's the ~2–3 min/page pace\n3. **Write it like you speak** — conversational, not written prose\n\nSee [`references/presenter-mode.md`](references/presenter-mode.md) for the\nfull authoring guide, or copy the ready-made template at\n`templates/full-decks/presenter-mode-reveal/` which ships with full 150-300\nword speaker scripts on every slide.\n\n## Install (one command)\n\n```bash\nnpx skills add https://github.com/lewislulu/html-ppt-skill\n```\n\nThat registers the skill with your agent runtime. After install, any agent\nthat supports AgentSkills can author presentations by asking things like:\n\n> \"做一份 8 页的技术分享 slides，用 cyberpunk 主题\"\n> \"turn this outline into a pitch deck\"\n> \"做一个小红书图文，9 张，白底柔和风\"\n\n## What's in the box\n\n| | Count | Where |\n|---|---|---|\n| 🎤 **Presenter mode** | **NEW** | `S` key / `?preview=N` |\n| 🎨 **Themes** | **36** | `assets/themes/*.css` |\n| 📑 **Full-deck templates** | **15** | `templates/full-decks/<name>/` |\n| 🧩 **Single-page layouts** | **31** | `templates/single-page/*.html` |\n| ✨ **CSS animations** | **27** | `assets/animations/animations.css` |\n| 💥 **Canvas FX animations** | **20** | `assets/animations/fx/*.js` |\n| 🖼️ **Showcase decks** | 4 | `templates/*-showcase.html` |\n| 📸 **Verification screenshots** | 56 | `scripts/verify-output/` |\n\n### 36 Themes\n\n`minimal-white`, `editorial-serif`, `soft-pastel`, `sharp-mono`, `arctic-cool`,\n`sunset-warm`, `catppuccin-latte`, `catppuccin-mocha`, `dracula`, `tokyo-night`,\n`nord`, `solarized-light`, `gruvbox-dark`, `rose-pine`, `neo-brutalism`,\n`glassmorphism`, `bauhaus`, `swiss-grid`, `terminal-green`, `xiaohongshu-white`,\n`rainbow-gradient`, `aurora`, `blueprint`, `memphis-pop`, `cyberpunk-neon`,\n`y2k-chrome`, `retro-tv`, `japanese-minimal`, `vaporwave`, `midcentury`,\n`corporate-clean`, `academic-paper`, `news-broadcast`, `pitch-deck-vc`,\n`magazine-bold`, `engineering-whiteprint`.\n\n![36 themes · 8 of them](docs/readme/themes.png)\n\nEach is a pure CSS-tokens file — swap one `<link>` to reskin the entire deck.\nBrowse them all in `templates/theme-showcase.html` (each slide rendered in an\nisolated iframe so theme ≠ theme is visually guaranteed).\n\n![14 full-deck templates](docs/readme/templates.png)\n\n### 15 Full-deck templates\n\nEight extracted from real-world decks, seven generic scenario scaffolds:\n\n**Extracted looks**\n- `xhs-white-editorial` — 小红书白底杂志风\n- `graphify-dark-graph` — 暗底 + 力导向知识图谱\n- `knowledge-arch-blueprint` — 蓝图 / 架构图风\n- `hermes-cyber-terminal` — 终端 cyberpunk\n- `obsidian-claude-gradient` — 紫色渐变卡\n- `testing-safety-alert` — 红 / 琥珀警示风\n- `xhs-pastel-card` — 柔和马卡龙图文\n- `dir-key-nav-minimal` — 方向键极简\n\n**Scenario decks**\n- `pitch-deck`, `product-launch`, `tech-sharing`, `weekly-report`,\n  `xhs-post` (9-slide 3:4), `course-module`,\n  **`presenter-mode-reveal`** 🎤 — complete talk template with full 150-300\n  word speaker scripts on every slide, designed around the `S` key presenter mode\n\nEach is a self-contained folder with scoped `.tpl-<name>` CSS so multiple\ndecks can be previewed side-by-side without collisions. Browse the full\ngallery in `templates/full-decks-index.html`.\n\n![31 single-page layouts](docs/readme/layouts.png)\n\n### 31 Single-page layouts\n\ncover · toc · section-divider · bullets · two-column · three-column ·\nbig-quote · stat-highlight · kpi-grid · table · code · diff · terminal ·\nflow-diagram · timeline · roadmap · mindmap · comparison · pros-cons ·\ntodo-checklist · gantt · image-hero · image-grid · chart-bar · chart-line ·\nchart-pie · chart-radar · arch-diagram · process-steps · cta · thanks\n\nEvery layout ships with realistic demo data so you can drop it into a deck\nand immediately see it render.\n\n![31 layouts auto-cycling through real template files](docs/readme/layouts-live.gif)\n\n*The big iframe is loading `templates/single-page/<name>.html` directly and cycling through all 31 layouts every 2.8 seconds.*\n\n![47 animations — 27 CSS + 20 canvas FX](docs/readme/animations.png)\n\n### 27 CSS animations + 20 Canvas FX\n\n**CSS (lightweight)** — directional fades, `rise-in`, `zoom-pop`, `blur-in`,\n`glitch-in`, `typewriter`, `neon-glow`, `shimmer-sweep`, `gradient-flow`,\n`stagger-list`, `counter-up`, `path-draw`, `morph-shape`, `parallax-tilt`,\n`card-flip-3d`, `cube-rotate-3d`, `page-turn-3d`, `perspective-zoom`,\n`marquee-scroll`, `kenburns`, `ripple-reveal`, `spotlight`, …\n\n**Canvas FX (cinematic)** — `particle-burst`, `confetti-cannon`, `firework`,\n`starfield`, `matrix-rain`, `knowledge-graph` (force-directed physics),\n`neural-net` (signal pulses), `constellation`, `orbit-ring`, `galaxy-swirl`,\n`word-cascade`, `letter-explode`, `chain-react`, `magnetic-field`,\n`data-stream`, `gradient-blob`, `sparkle-trail`, `shockwave`,\n`typewriter-multi`, `counter-explosion`. Each is a real hand-rolled canvas\nmodule auto-initialised on slide enter via `fx-runtime.js`.\n\n## Quick start (manual, after install or git clone)\n\n```bash\n# Scaffold a new deck from the base template\n./scripts/new-deck.sh my-talk\n\n# Browse everything\nopen templates/theme-showcase.html         # all 36 themes (iframe-isolated)\nopen templates/layout-showcase.html        # all 31 layouts\nopen templates/animation-showcase.html     # all 47 animations\nopen templates/full-decks-index.html       # all 14 full decks\n\n# Render any template to PNG via headless Chrome\n./scripts/render.sh templates/theme-showcase.html\n./scripts/render.sh examples/my-talk/index.html 12\n```\n\n## Keyboard cheat sheet\n\n```\n← → Space PgUp PgDn Home End   navigate\nF                               fullscreen\nS                               open presenter window (magnetic cards)\nN                               quick notes drawer (bottom)\nR                               reset timer (in presenter window)\nO                               slide overview grid\nT                               cycle themes (syncs to presenter)\nA                               cycle a demo animation on current slide\n#/N (URL)                       deep-link to slide N\n?preview=N (URL)                preview-only mode (single slide, no chrome)\n```\n\n## Project structure\n\n```\nhtml-ppt-skill/\n├── SKILL.md                      agent-facing dispatcher\n├── README.md                     this file\n├── references/                   detailed catalogs\n│   ├── themes.md                 36 themes with when-to-use\n│   ├── layouts.md                31 layout types\n│   ├── animations.md             27 CSS + 20 FX catalog\n│   ├── full-decks.md             14 full-deck templates\n│   └── authoring-guide.md        full workflow\n├── assets/\n│   ├── base.css                  shared tokens + primitives\n│   ├── fonts.css                 webfont imports\n│   ├── runtime.js                keyboard + presenter + overview\n│   ├── themes/*.css              36 theme token files\n│   └── animations/\n│       ├── animations.css        27 named CSS animations\n│       ├── fx-runtime.js         auto-init [data-fx] on slide enter\n│       └── fx/*.js               20 canvas FX modules\n├── templates/\n│   ├── deck.html                 minimal starter\n│   ├── theme-showcase.html       iframe-isolated theme tour\n│   ├── layout-showcase.html      all 31 layouts\n│   ├── animation-showcase.html   47 animation slides\n│   ├── full-decks-index.html     14-deck gallery\n│   ├── full-decks/<name>/        14 scoped multi-slide decks\n│   └── single-page/*.html        31 layout files with demo data\n├── scripts/\n│   ├── new-deck.sh               scaffold\n│   ├── render.sh                 headless Chrome → PNG\n│   └── verify-output/            56 self-test screenshots\n└── examples/demo-deck/           complete working deck\n```\n\n## Philosophy\n\n- **Token-driven design system.** All color, radius, shadow, font decisions\n  live in `assets/base.css` + the current theme file. Change one variable,\n  the whole deck reflows tastefully.\n- **Iframe isolation for previews.** Theme / layout / full-deck showcases all\n  use `<iframe>` per slide so each preview is a real, independent render.\n- **Zero build.** Pure static HTML/CSS/JS. CDN only for webfonts, highlight.js\n  and chart.js (optional).\n- **Senior-designer defaults.** Opinionated type scale, spacing rhythm,\n  gradients and card treatments — no \"Corporate PowerPoint 2006\" vibes.\n- **Chinese + English first-class.** Noto Sans SC / Noto Serif SC pre-imported.\n\n## License\n\nMIT © 2026 lewis &lt;sudolewis@gmail.com&gt;.\n",
  "bytes": 10129,
  "sha": "c416aff4e9d3ef9cd1fe74e492e80a28274333b3d4bd2085482b0fe517d42b3c",
  "repo_slug": "lewislulu/html-ppt-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_lewislulu_html_ppt_skill_html_ppt_ec2f558e/readme"
}