@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

package/dist/__w3kits/assets/design-templates/html-ppt/README.zh-CN.md

@@ -0,0 +1,238 @@
+# html-ppt · HTML PPT 工作室
+
+> 一款专业级的 AgentSkill，让 AI 做出真正能打的 HTML 演示文稿。
+> **36 套主题**、**15 套完整 deck 模板**、**31 种页面布局**、**47 个动效**
+> (27 个 CSS + 20 个 Canvas FX)，加上全新的 **演讲者模式** —— 像素级
+> 完美预览 + 逐字稿提词器 + 计时器。纯静态 HTML/CSS/JS，无需构建。
+
+**作者：** lewis <sudolewis@gmail.com>
+**协议：** MIT
+**English docs:** [README.md](README.md)
+
+![html-ppt 封面 · 实时预览](docs/readme/hero.gif)
+
+> 一行命令装好 **36 主题 × 20 Canvas FX × 31 布局 × 15 完整 deck + 演讲者模式**。
+> 上图里的每一个预览都是真实的 iframe 加载真实模板文件 —— 不是截图，不是色卡。
+
+## 🎤 演讲者模式（全新）
+
+在任何 deck 里按 `S` 键，弹出一个独立的演讲者窗口，包含 4 个**可拖拽、
+可调整大小的磁吸卡片**：当前页预览、下一页预览、逐字稿、计时器。两个窗口
+通过 `BroadcastChannel` 双向同步翻页。
+
+![演讲者模式 · 4 个磁吸卡片](docs/readme/presenter-mode.png)
+
+**为什么预览是像素级完美的：** 每个卡片是一个 `<iframe>`，加载的是**同一
+份 deck HTML 文件**，只是 URL 多了 `?preview=N` 参数。runtime 检测到这个
+参数后，只渲染第 N 页并隐藏所有 chrome —— 所以预览使用**和观众视图完全相
+同的 CSS、主题、字体、viewport**，颜色和排版保证 100% 一致。
+
+**丝滑翻页（零闪烁）：** 翻页时演讲者窗口通过 `postMessage({type:'preview-goto',
+idx:N})` 通知 iframe，iframe 只是切换 `.is-active` class —— **不重新加载、
+不白屏、不闪烁**。
+
+**逐字稿 3 条铁律：**
+1. **提示信号，不是讲稿** — 关键词加粗，过渡句独立成段
+2. **每页 150–300 字** — 约 2–3 分钟/页的节奏
+3. **用口语，不用书面语** — "所以" 不是 "因此"，"这个" 不是 "该"
+
+详见 [`references/presenter-mode.md`](references/presenter-mode.md)，或直接复制
+`templates/full-decks/presenter-mode-reveal/` 这个现成模板 —— 每一页都带完整
+150–300 字的示例逐字稿。
+
+## 一行命令安装
+
+```bash
+npx skills add https://github.com/lewislulu/html-ppt-skill
+```
+
+装好后，任何支持 AgentSkill 的 agent（Claude Code / Codex / Cursor / OpenClaw 等）
+都能用这套能力做 PPT。对 agent 说：
+
+> "做一份 8 页的技术分享 slides，用 cyberpunk 主题"
+> "把这段 outline 变成投资人 pitch deck"
+> "做一个小红书图文，9 张，白底柔和风"
+> "做一份带演讲者模式的产品分享，我想要有逐字稿"
+
+## Skill 内容一览
+
+| | 数量 | 位置 |
+|---|---|---|
+| 🎤 **演讲者模式** | **新增** | `S` 键 / `?preview=N` |
+| 🎨 **主题** | **36** | `assets/themes/*.css` |
+| 📑 **完整 deck 模板** | **15** | `templates/full-decks/<name>/` |
+| 🧩 **单页布局** | **31** | `templates/single-page/*.html` |
+| ✨ **CSS 动画** | **27** | `assets/animations/animations.css` |
+| 💥 **Canvas FX 动画** | **20** | `assets/animations/fx/*.js` |
+| 🖼️ **Showcase deck** | 4 | `templates/*-showcase.html` |
+| 📸 **验证截图** | 56 | `scripts/verify-output/` |
+
+### 36 套主题
+
+`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`
+
+![36 主题 · 其中 8 个](docs/readme/themes.png)
+
+每个主题都是一份纯 CSS token 文件 —— 只需要换一行 `<link>` 就能给整份 deck
+换皮。在 `templates/theme-showcase.html` 里可以浏览全部（每一页用独立 iframe
+渲染，避免样式互相污染）。
+
+![15 套完整 deck 模板](docs/readme/templates.png)
+
+### 15 套完整 deck 模板
+
+8 个从真实作品提炼的视觉语言，7 个通用场景脚手架：
+
+**提炼款**
+- `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` — 投资人 pitch
+- `product-launch` — 产品发布会
+- `tech-sharing` — 技术分享
+- `weekly-report` — 周报
+- `xhs-post` — 小红书图文（9 页 3:4）
+- `course-module` — 教学模块
+- **`presenter-mode-reveal`** 🎤 — 完整分享模板，**每一页都带 150-300 字
+  的示例逐字稿**，围绕 `S` 键演讲者模式专门设计
+
+每个模板都是自包含的文件夹，用 scoped `.tpl-<name>` CSS，所以多个模板可以
+同时加载不会互相污染。在 `templates/full-decks-index.html` 可以看全套 gallery。
+
+![31 种单页布局](docs/readme/layouts.png)
+
+### 31 种单页布局
+
+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
+
+每个布局都带真实的示例数据，拖进 deck 立即看得到效果。
+
+![31 种布局通过真实模板文件自动循环播放](docs/readme/layouts-live.gif)
+
+*大 iframe 直接加载 `templates/single-page/<name>.html` 文件，每 2.8 秒
+自动切换到下一个布局。*
+
+![47 个动效 · 27 CSS + 20 Canvas FX](docs/readme/animations.png)
+
+### 27 个 CSS 动画 + 20 个 Canvas FX
+
+**CSS 动画（轻量）** — 方向性淡入、`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（电影级）** — `particle-burst`（粒子爆发）、`confetti-cannon`
+（彩带）、`firework`（烟花）、`starfield`（星空）、`matrix-rain`
+（代码雨）、`knowledge-graph`（力导向知识图谱）、`neural-net`（神经网络
+脉冲）、`constellation`（星座连线）、`orbit-ring`（轨道环）、
+`galaxy-swirl`（星系漩涡）、`word-cascade`、`letter-explode`、
+`chain-react`、`magnetic-field`、`data-stream`、`gradient-blob`、
+`sparkle-trail`、`shockwave`、`typewriter-multi`、`counter-explosion`。
+每一个都是手写的 canvas 模块，进入 slide 时由 `fx-runtime.js` 自动初始化。
+
+## 快速开始（手动 / 安装后 / git clone 后）
+
+```bash
+# 从 base 模板新建一个 deck
+./scripts/new-deck.sh my-talk
+
+# 浏览所有内容
+open templates/theme-showcase.html         # 全部 36 主题（iframe 隔离）
+open templates/layout-showcase.html        # 全部 31 布局
+open templates/animation-showcase.html     # 全部 47 动效
+open templates/full-decks-index.html       # 全部 15 个完整 deck
+
+# 用 headless Chrome 导出 PNG
+./scripts/render.sh templates/theme-showcase.html
+./scripts/render.sh examples/my-talk/index.html 12
+```
+
+## 键盘快捷键
+
+```
+← → Space PgUp PgDn Home End   翻页
+F                               全屏
+S                               打开演讲者窗口（磁吸卡片模式）
+N                               底部 notes 抽屉
+R                               重置计时器（演讲者窗口内）
+O                               slide 总览网格
+T                               切换主题（自动同步到演讲者窗口）
+A                               在当前 slide 循环演示一个动画
+#/N (URL)                       深链到第 N 页
+?preview=N (URL)                预览模式（只显示单页，隐藏 chrome）
+```
+
+## 项目结构
+
+```
+html-ppt-skill/
+├── SKILL.md                      agent 入口
+├── README.md                     英文 README
+├── README.zh-CN.md               本文件
+├── references/                   详细文档
+│   ├── themes.md                 36 主题 + 使用场景
+│   ├── layouts.md                31 布局
+│   ├── animations.md             27 CSS + 20 FX 目录
+│   ├── full-decks.md             15 完整 deck 模板
+│   ├── presenter-mode.md         🎤 演讲者模式 + 逐字稿指南
+│   └── authoring-guide.md        完整工作流
+├── assets/
+│   ├── base.css                  共享 tokens + 基础组件
+│   ├── fonts.css                 web 字体引入
+│   ├── runtime.js                键盘导航 + 演讲者模式 + 总览
+│   ├── themes/*.css              36 主题 token 文件
+│   └── animations/
+│       ├── animations.css        27 个命名 CSS 动画
+│       ├── fx-runtime.js         进入 slide 自动初始化 [data-fx]
+│       └── fx/*.js               20 个 Canvas FX 模块
+├── templates/
+│   ├── deck.html                 最小起步模板
+│   ├── theme-showcase.html       iframe 隔离的主题 tour
+│   ├── layout-showcase.html      全部 31 布局
+│   ├── animation-showcase.html   47 动画 slide
+│   ├── full-decks-index.html     15 deck gallery
+│   ├── full-decks/<name>/        15 个 scoped 多页 deck 模板
+│   └── single-page/*.html        31 个布局文件（带示例数据）
+├── scripts/
+│   ├── new-deck.sh               脚手架
+│   ├── render.sh                 headless Chrome → PNG
+│   └── verify-output/            56 张自测截图
+└── examples/demo-deck/           完整可运行的示例 deck
+```
+
+## 设计理念
+
+- **Token 驱动的设计系统。** 所有颜色、圆角、阴影、字体决策都在
+  `assets/base.css` + 当前主题文件里。改一个变量，整份 deck 优雅地重排。
+- **Iframe 隔离预览。** 主题 / 布局 / 完整 deck 的 showcase 都用 `<iframe>`，
+  确保每个预览都是真实、独立的渲染结果。
+- **零构建。** 纯静态 HTML/CSS/JS。只有 webfont / highlight.js / chart.js
+  (可选) 走 CDN。
+- **资深设计师的默认值。** 字号规律、间距节奏、渐变、卡片处理都有态度 ——
+  绝不是 "PowerPoint 2006" 那种味道。
+- **中英双语一等公民。** 预导入了 Noto Sans SC / Noto Serif SC。
+
+## 协议
+
+MIT © 2026 lewis &lt;sudolewis@gmail.com&gt;

package/dist/__w3kits/assets/design-templates/html-ppt/SKILL.md

@@ -0,0 +1,251 @@
+---
+name: html-ppt
+description: HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书 图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".
+triggers:
+  - "ppt"
+  - "deck"
+  - "slides"
+  - "presentation"
+  - "keynote"
+  - "reveal"
+  - "slideshow"
+  - "幻灯片"
+  - "演讲稿"
+  - "分享稿"
+  - "talk slides"
+  - "pitch deck"
+  - "tech sharing"
+  - "technical presentation"
+od:
+  mode: deck
+  scenario: marketing
+  featured: 19
+  upstream: "https://github.com/lewislulu/html-ppt-skill"
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: false
+  speaker_notes: true
+  animations: true
+  example_prompt: "用 html-ppt 做一份 12 页的 HTML PPT。先帮我确认三件事：内容/页数/受众、主题（从 36 套里推荐 2-3 个）、起点全 deck 模板（pitch-deck / tech-sharing / weekly-report / xhs-post / presenter-mode-reveal 任选一个），对齐之后再开始写 slides。"
+---
+
+# html-ppt — HTML PPT Studio
+
+Author professional HTML presentations as static files. One theme file = one
+look. One layout file = one page type. One animation class = one entry effect.
+All pages share a token-based design system in `assets/base.css`.
+
+## Install
+
+```bash
+npx skills add https://github.com/lewislulu/html-ppt-skill
+```
+
+One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.
+
+## What the skill gives you
+
+- **36 themes** (`assets/themes/*.css`) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/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
+- **15 full-deck templates** (`templates/full-decks/<name>/`) — complete multi-slide decks with scoped `.tpl-<name>` CSS. 8 extracted from real-world decks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, **presenter-mode-reveal** — 演讲者模式专用)
+- **31 layouts** (`templates/single-page/*.html`) with realistic demo data
+- **27 CSS animations** (`assets/animations/animations.css`) via `data-anim`
+- **20 canvas FX animations** (`assets/animations/fx/*.js`) via `data-fx` — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (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
+- **Keyboard runtime** (`assets/runtime.js`) — arrows, T (theme), A (anim), F/O, **S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards)**, N (notes drawer), R (reset timer in presenter)
+- **FX runtime** (`assets/animations/fx-runtime.js`) — auto-inits `[data-fx]` on slide enter, cleans up on leave
+- **Showcase decks** for themes / layouts / animations / full-decks gallery
+- **Headless Chrome render script** for PNG export
+
+## When to use
+
+Use when the user asks for any kind of slide-based output or wants to turn
+text/notes into a presentable deck. Prefer this over building from scratch.
+
+### 🎤 Presenter Mode (演讲者模式 + 逐字稿)
+
+If the user mentions any of: **演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器**, or says things like "我要去给团队讲 xxx", "要做一场技术分享", "怕讲不流畅", "想要一份带逐字稿的 PPT" — **use the `presenter-mode-reveal` full-deck template** and write 150–300 words of 逐字稿 in each slide's `<aside class="notes">`.
+
+See [references/presenter-mode.md](references/presenter-mode.md) for the full authoring guide including the 3 rules of speaker script writing:
+1. **不是讲稿，是提示信号** — 加粗核心词 + 过渡句独立成段
+2. **每页 150–300 字** — 2–3 分钟/页的节奏
+3. **用口语，不用书面语** — "因此"→"所以"，"该方案"→"这个方案"
+
+All full-deck templates support the S key presenter mode (it's built into `runtime.js`). **S opens a new popup window with 4 magnetic cards**:
+- 🔵 **CURRENT** — pixel-perfect iframe preview of the current slide
+- 🟣 **NEXT** — pixel-perfect iframe preview of the next slide
+- 🟠 **SPEAKER SCRIPT** — large-font 逐字稿 (scrollable)
+- 🟢 **TIMER** — elapsed time + slide counter + prev/next/reset buttons
+
+Each card is **draggable by its header** and **resizable by the bottom-right corner handle**. Card positions/sizes persist to `localStorage` per deck. A "Reset layout" button restores the default arrangement.
+
+**Why the previews are pixel-perfect**: each preview is an `<iframe>` that loads the actual deck HTML with a `?preview=N` query param; `runtime.js` 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 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**. The two windows also stay in sync via `BroadcastChannel`.
+
+Only `presenter-mode-reveal` is designed from the ground up around the feature with proper example 逐字稿 on every slide.
+
+Keyboard in presenter window: `← →` navigate (syncs audience) · `R` reset timer · `Esc` close popup.
+Keyboard in audience window: `S` open presenter · `T` cycle theme · `← →` navigate (syncs presenter) · `F` fullscreen · `O` overview.
+
+## Before you author anything — ALWAYS ask or recommend
+
+**Do not start writing slides until you understand three things.** Either ask
+the user directly, or — if they already handed you rich content — propose a
+tasteful default and confirm.
+
+1. **Content & audience.** What's the deck about, how many slides, who's
+   watching (engineers / execs / 小红书读者 / 学生 / VC)?
+2. **Style / theme.** Which of the 36 themes fits? If unsure, recommend 2-3
+   candidates based on tone:
+   - Business / investor pitch → `pitch-deck-vc`, `corporate-clean`, `swiss-grid`
+   - Tech sharing / engineering → `tokyo-night`, `dracula`, `catppuccin-mocha`,
+     `terminal-green`, `blueprint`
+   - 小红书图文 → `xiaohongshu-white`, `soft-pastel`, `rainbow-gradient`,
+     `magazine-bold`
+   - Academic / report → `academic-paper`, `editorial-serif`, `minimal-white`
+   - Edgy / cyber / launch → `cyberpunk-neon`, `vaporwave`, `y2k-chrome`,
+     `neo-brutalism`
+3. **Starting point.** One of the 14 full-deck templates, or scratch? Point
+   to the closest `templates/full-decks/<name>/` and ask if it fits. If the
+   user's content suggests something obvious (e.g. "我要做产品发布会" →
+   `product-launch`), propose it confidently instead of asking blindly.
+
+A good opening message looks like:
+
+> 我可以给你做这份 PPT！先确认三件事：
+> 1. 大致内容 / 页数 / 观众是谁？
+> 2. 风格偏好？我建议从这 3 个主题里选一个：`tokyo-night`（技术分享默认好看）、`xiaohongshu-white`（小红书风）、`corporate-clean`（正式汇报）。
+> 3. 要不要用我现成的 `tech-sharing` 全 deck 模板打底？
+
+Only after those are clear, scaffold the deck and start writing.
+
+## Quick start
+
+1. **Scaffold a new deck.** From the repo root:
+   ```bash
+   ./scripts/new-deck.sh my-talk
+   open examples/my-talk/index.html
+   ```
+2. **Pick a theme.** Open the deck and press `T` to cycle. Or hard-code it:
+   ```html
+   <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
+   ```
+   Catalog in [references/themes.md](references/themes.md).
+3. **Pick layouts.** Copy `<section class="slide">...</section>` blocks out of
+   files in `templates/single-page/` into your deck. Replace the demo data.
+   Catalog in [references/layouts.md](references/layouts.md).
+4. **Add animations.** Put `data-anim="fade-up"` (or `class="anim-fade-up"`) on
+   any element. On `<ul>`/grids, use `anim-stagger-list` for sequenced reveals.
+   For canvas FX, use `<div data-fx="knowledge-graph">...</div>` and include
+   `<script src="../assets/animations/fx-runtime.js"></script>`.
+   Catalog in [references/animations.md](references/animations.md).
+5. **Use a full-deck template.** Copy `templates/full-decks/<name>/` into
+   `examples/my-talk/` as a starting point. Each folder is self-contained with
+   scoped CSS. Catalog in [references/full-decks.md](references/full-decks.md)
+   and gallery at `templates/full-decks-index.html`.
+6. **Render to PNG.**
+   ```bash
+   ./scripts/render.sh templates/theme-showcase.html       # one shot
+   ./scripts/render.sh examples/my-talk/index.html 12      # 12 slides
+   ```
+
+## Authoring rules (important)
+
+- **Always start from a template.** Don't author slides from scratch — copy the
+  closest layout from `templates/single-page/` first, then replace content.
+- **Use tokens, not literal colors.** Every color, radius, shadow should come
+  from CSS variables defined in `assets/base.css` and overridden by a theme.
+  Good: `color: var(--text-1)`. Bad: `color: #111`.
+- **Don't invent new layout files.** Prefer composing existing ones. Only add
+  a new `templates/single-page/*.html` if none of the 30 fit.
+- **Respect chrome slots.** `.deck-header`, `.deck-footer`, `.slide-number`
+  and the progress bar are provided by `assets/base.css` + `runtime.js`.
+- **Keyboard-first.** Always include `<script src="../assets/runtime.js"></script>`
+  so the deck supports ← → / T / A / F / S / O / hash deep-links.
+- **One `.slide` per logical page.** `runtime.js` makes `.slide.is-active`
+  visible; all others are hidden.
+- **Supply notes.** Wrap speaker notes in `<div class="notes">…</div>` inside
+  each slide. Press S to open the overlay.
+- **NEVER put presenter-only text on the slide itself.** Descriptive text like
+  "这一页展示了……" or "Speaker: 这里可以补充……" or small explanatory captions
+  aimed at the presenter MUST go inside `<div class="notes">`, NOT as visible
+  `<p>` / `<span>` elements on the slide. The `.notes` class is `display:none`
+  by default — it only appears in the S overlay. Slides should contain ONLY
+  audience-facing content (titles, bullet points, data, charts, images).
+
+## Writing guide
+
+See [references/authoring-guide.md](references/authoring-guide.md) for a
+step-by-step walkthrough: file structure, naming, how to transform an outline
+into a deck, how to choose layouts and themes per audience, how to do a
+Chinese + English deck, and how to export.
+
+## Catalogs (load when needed)
+
+- [references/themes.md](references/themes.md) — all 36 themes with when-to-use.
+- [references/layouts.md](references/layouts.md) — all 31 layout types.
+- [references/animations.md](references/animations.md) — 27 CSS + 20 canvas FX animations.
+- [references/full-decks.md](references/full-decks.md) — all 15 full-deck templates.
+- [references/presenter-mode.md](references/presenter-mode.md) — **演讲者模式 + 逐字稿编写指南（技术分享/演讲必看）**.
+- [references/authoring-guide.md](references/authoring-guide.md) — full workflow.
+
+## File structure
+
+```
+html-ppt/
+├── SKILL.md                 (this file)
+├── references/              (detailed catalogs, load as needed)
+├── assets/
+│   ├── base.css             (tokens + primitives — do not edit per deck)
+│   ├── fonts.css            (webfont imports)
+│   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
+│   ├── themes/*.css         (36 token overrides, one per theme)
+│   └── animations/
+│       ├── animations.css   (27 named CSS entry animations)
+│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
+│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
+├── templates/
+│   ├── deck.html                  (minimal 6-slide starter)
+│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
+│   ├── layout-showcase.html       (iframe tour of all 31 layouts)
+│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
+│   ├── full-decks-index.html      (gallery of all 14 full-deck templates)
+│   ├── full-decks/<name>/         (14 scoped multi-slide deck templates)
+│   └── single-page/*.html         (31 layout files with demo data)
+├── scripts/
+│   ├── new-deck.sh                (scaffold a deck from deck.html)
+│   └── render.sh                  (headless Chrome → PNG)
+└── examples/demo-deck/            (complete working deck)
+```
+
+## Rendering to PNG
+
+`scripts/render.sh` wraps headless Chrome at
+`/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`. For multi-slide
+capture, runtime.js exposes `#/N` deep-links, and render.sh iterates 1..N.
+
+```bash
+./scripts/render.sh templates/single-page/kpi-grid.html        # single page
+./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 slides, custom dir
+```
+
+## Keyboard cheat sheet
+
+```
+←  →  Space  PgUp  PgDn  Home  End    navigate
+F                                       fullscreen
+S                                       open presenter window (magnetic cards: current/next/script/timer)
+N                                       quick notes drawer (bottom overlay)
+R                                       reset timer (in presenter window)
+?preview=N                              URL param — force preview-only mode (single slide, no chrome)
+O                                       slide overview grid
+T                                       cycle themes (reads data-themes attr)
+A                                       cycle demo animation on current slide
+#/N in URL                              deep-link to slide N
+Esc                                     close all overlays
+```
+
+## License & author
+
+MIT. Copyright (c) 2026 lewis &lt;sudolewis@gmail.com&gt;.

package/dist/__w3kits/assets/design-templates/html-ppt/assets/animations/animations.css

@@ -0,0 +1,138 @@
+/* html-ppt :: animations.css
+ * Apply by adding class="anim-<name>" or data-anim="<name>".
+ * Durations are deliberately snappy; tweak --anim-dur per element.
+ */
+:root{--anim-dur:.7s;--anim-ease:cubic-bezier(.4,0,.2,1)}
+
+/* ---------- FADE DIRECTIONALS ---------- */
+@keyframes kf-fade-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
+@keyframes kf-fade-down{from{opacity:0;transform:translateY(-32px)}to{opacity:1;transform:none}}
+@keyframes kf-fade-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
+@keyframes kf-fade-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
+.anim-fade-up{animation:kf-fade-up var(--anim-dur) var(--anim-ease) both}
+.anim-fade-down{animation:kf-fade-down var(--anim-dur) var(--anim-ease) both}
+.anim-fade-left{animation:kf-fade-left var(--anim-dur) var(--anim-ease) both}
+.anim-fade-right{animation:kf-fade-right var(--anim-dur) var(--anim-ease) both}
+
+/* ---------- RISE / DROP / ZOOM / BLUR / GLITCH ---------- */
+@keyframes kf-rise{from{opacity:0;transform:translateY(60px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
+@keyframes kf-drop{from{opacity:0;transform:translateY(-60px) scale(.97)}to{opacity:1;transform:none}}
+@keyframes kf-zoom{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
+@keyframes kf-blur{from{opacity:0;filter:blur(18px)}to{opacity:1;filter:none}}
+@keyframes kf-glitch{0%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0)}
+  20%{opacity:1;transform:translateX(-6px);clip-path:inset(20% 0 30% 0)}
+  40%{transform:translateX(4px);clip-path:inset(50% 0 10% 0)}
+  60%{transform:translateX(-3px);clip-path:inset(10% 0 60% 0)}
+  80%{transform:translateX(2px);clip-path:inset(0 0 0 0)}
+  100%{opacity:1;transform:none}}
+.anim-rise-in{animation:kf-rise .9s var(--anim-ease) both}
+.anim-drop-in{animation:kf-drop .8s var(--anim-ease) both}
+.anim-zoom-pop{animation:kf-zoom .7s cubic-bezier(.22,1.3,.36,1) both}
+.anim-blur-in{animation:kf-blur .8s var(--anim-ease) both}
+.anim-glitch-in{animation:kf-glitch .8s steps(5,end) both}
+
+/* ---------- TYPEWRITER ---------- */
+.anim-typewriter{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid currentColor;
+  width:0;animation:kf-type 2.4s steps(40,end) forwards, kf-caret 1s step-end infinite}
+@keyframes kf-type{to{width:100%}}
+@keyframes kf-caret{50%{border-color:transparent}}
+
+/* ---------- GLOW / SHIMMER / GRADIENT-FLOW ---------- */
+@keyframes kf-neon{0%,100%{text-shadow:0 0 8px var(--accent),0 0 20px var(--accent)}
+  50%{text-shadow:0 0 16px var(--accent),0 0 40px var(--accent),0 0 80px var(--accent)}}
+.anim-neon-glow{animation:kf-neon 2s ease-in-out infinite}
+
+.anim-shimmer-sweep{position:relative;overflow:hidden}
+.anim-shimmer-sweep::after{content:"";position:absolute;inset:0;
+  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
+  transform:translateX(-100%);animation:kf-shimmer 2.4s var(--anim-ease) infinite}
+@keyframes kf-shimmer{to{transform:translateX(100%)}}
+
+.anim-gradient-flow{background:linear-gradient(90deg,var(--accent),var(--accent-2,var(--accent)),var(--accent-3,var(--accent)),var(--accent));
+  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
+  animation:kf-gradflow 4s linear infinite}
+@keyframes kf-gradflow{to{background-position:300% 0}}
+
+/* ---------- STAGGER LIST ---------- */
+.anim-stagger-list > *{opacity:0;animation:kf-rise .65s var(--anim-ease) both}
+.anim-stagger-list > *:nth-child(1){animation-delay:.05s}
+.anim-stagger-list > *:nth-child(2){animation-delay:.15s}
+.anim-stagger-list > *:nth-child(3){animation-delay:.25s}
+.anim-stagger-list > *:nth-child(4){animation-delay:.35s}
+.anim-stagger-list > *:nth-child(5){animation-delay:.45s}
+.anim-stagger-list > *:nth-child(6){animation-delay:.55s}
+.anim-stagger-list > *:nth-child(7){animation-delay:.65s}
+.anim-stagger-list > *:nth-child(8){animation-delay:.75s}
+.anim-stagger-list > *:nth-child(n+9){animation-delay:.85s}
+
+/* ---------- COUNTER-UP (JS-driven, marker class only) ---------- */
+.counter{font-variant-numeric:tabular-nums}
+
+/* ---------- SVG PATH DRAW ---------- */
+.anim-path-draw path,.anim-path-draw line,.anim-path-draw polyline,.anim-path-draw circle,.anim-path-draw rect{
+  stroke-dasharray:1000;stroke-dashoffset:1000;animation:kf-draw 2s var(--anim-ease) forwards}
+@keyframes kf-draw{to{stroke-dashoffset:0}}
+
+/* ---------- PARALLAX TILT (hover) ---------- */
+.anim-parallax-tilt{transform-style:preserve-3d;transition:transform .4s var(--anim-ease)}
+.anim-parallax-tilt:hover{transform:perspective(900px) rotateX(6deg) rotateY(-8deg) translateZ(10px)}
+
+/* ---------- CARD FLIP 3D ---------- */
+@keyframes kf-flip{from{transform:perspective(1200px) rotateY(-90deg);opacity:0}
+  to{transform:perspective(1200px) rotateY(0);opacity:1}}
+.anim-card-flip-3d{animation:kf-flip .9s var(--anim-ease) both;transform-style:preserve-3d;backface-visibility:hidden}
+
+/* ---------- CUBE ROTATE 3D ---------- */
+@keyframes kf-cube{from{transform:perspective(1200px) rotateX(20deg) rotateY(-90deg) translateZ(-200px);opacity:0}
+  to{transform:perspective(1200px) rotateX(0) rotateY(0) translateZ(0);opacity:1}}
+.anim-cube-rotate-3d{animation:kf-cube 1s var(--anim-ease) both}
+
+/* ---------- PAGE TURN 3D ---------- */
+@keyframes kf-pageturn{from{transform:perspective(1600px) rotateY(-85deg);transform-origin:left center;opacity:0}
+  to{transform:perspective(1600px) rotateY(0);opacity:1}}
+.anim-page-turn-3d{animation:kf-pageturn 1s var(--anim-ease) both;transform-origin:left center}
+
+/* ---------- PERSPECTIVE ZOOM ---------- */
+@keyframes kf-pzoom{from{opacity:0;transform:perspective(1400px) translateZ(-400px) rotateX(12deg)}
+  to{opacity:1;transform:none}}
+.anim-perspective-zoom{animation:kf-pzoom 1s var(--anim-ease) both}
+
+/* ---------- MARQUEE SCROLL ---------- */
+.anim-marquee-scroll{display:flex;gap:48px;white-space:nowrap;animation:kf-marquee 20s linear infinite}
+@keyframes kf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
+
+/* ---------- KEN BURNS ---------- */
+@keyframes kf-kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.15) translate(-2%,-1%)}}
+.anim-kenburns{animation:kf-kenburns 14s ease-in-out infinite alternate}
+
+/* ---------- CONFETTI BURST (pseudo — pure CSS sparkles) ---------- */
+.anim-confetti-burst{position:relative}
+.anim-confetti-burst::before,.anim-confetti-burst::after{
+  content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;
+  background:var(--accent);box-shadow:
+    20px -30px 0 var(--accent-2,var(--accent)),-25px -20px 0 var(--accent-3,var(--accent)),
+    30px 20px 0 var(--good,#1aaf6c),-30px 25px 0 var(--warn,#f5a524),
+    40px -10px 0 var(--bad,#e0445a),-45px 0 0 var(--accent),
+    10px 40px 0 var(--accent-2,var(--accent)),-15px -40px 0 var(--accent-3,var(--accent));
+  opacity:0;animation:kf-confetti 1.2s var(--anim-ease) forwards}
+.anim-confetti-burst::after{animation-delay:.15s;transform:rotate(45deg)}
+@keyframes kf-confetti{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
+
+/* ---------- SPOTLIGHT ---------- */
+@keyframes kf-spot{0%{clip-path:circle(0% at 50% 50%)}100%{clip-path:circle(140% at 50% 50%)}}
+.anim-spotlight{animation:kf-spot 1.1s var(--anim-ease) both}
+
+/* ---------- MORPH SHAPE (SVG) ---------- */
+.anim-morph-shape path{animation:kf-morph 6s ease-in-out infinite alternate}
+@keyframes kf-morph{0%{d:path("M60,120 Q120,20 180,120 T300,120")}
+  100%{d:path("M60,120 Q120,220 180,120 T300,120")}}
+
+/* ---------- RIPPLE REVEAL ---------- */
+@keyframes kf-ripple{0%{clip-path:circle(0% at 20% 80%);opacity:.4}
+  100%{clip-path:circle(160% at 20% 80%);opacity:1}}
+.anim-ripple-reveal{animation:kf-ripple 1.2s var(--anim-ease) both}
+
+/* reduced motion */
+@media (prefers-reduced-motion: reduce){
+  [class*="anim-"]{animation:none!important;transition:none!important}
+}