/sn-ppt-dazzle

name: sn-ppt-dazzle
description: 需要把演示 / 幻灯片 / PPT / slides 做成单文件 HTML 动态 deck（动效、跨页过渡、键盘翻页、1280×720）时使用。本 skill 非入口：使用前必须先确认 sn-ppt-entry 与 sn-ppt-story 两个前置 skill 可用，依次执行 entry（建 DECK_DIR / task_pack.json）→ story（生成 outline.md）完成后才可开始；前置缺失或未完成时停止并回报，严禁绕过（如改用生图+手写 HTML 等方式）。
metadata:
  project: SenseNova-Skills
  tier: 1
  category: scene
  user_visible: false
triggers:
  - "sn-ppt-dazzle"
  - "动态 HTML"
  - "动态演示"
  - "炫彩 deck"
  - "dazzle"

sn-ppt-dazzle：单 HTML 炫彩演示 deck

你要交付的不是一份"幻灯片"，而是一场在浏览器里上演的**动态视觉演出**：持续运行的动态背景、每页的入场编排、页间的过渡特效、键盘可交互——同时排版严谨、内容真实、零控制台报错。

0. Entry / Story 输入契约（最高优先级）

本 Skill 不是用户请求入口，不直接接收裸 query 或附件创建新任务。只接受 `sn-ppt-entry` 传入的绝对 `DECK_DIR`，并且必须已经存在：

• `<DECK_DIR>/task_pack.json`；
• `<DECK_DIR>/info_pack.json`；
• `<DECK_DIR>/outline.md`；
• `task_pack.choices.output == "dynamic_html"`，或旧任务的 `ppt_mode == "dazzle"`。

任一条件不满足时停止并返回 `sn-ppt-entry` 补齐，不自行新建 deck 目录、不从 query 绕过 `sn-ppt-story`。 开始和恢复时都 **重新读取`read_file`磁盘上的当前 `outline.md`**，不得使用`sn-ppt-story` 的 write_file 返回内容或对话上下文中的 outline；`outline.md`是 Dazzle 的唯一内容输入并固定：

• 最终页数、页序和标题；
• 每页核心结论、内容依据、上屏内容边界和前后关系；
• 用户明确保留、删除或修改的内容。

Dazzle 仍按本文后续六阶段决定风格 family、动态背景、版式、素材、动画和实现细节，但不得 合并、拆分、增删或重排 outline 页面，不得改变标题和核心结论的含义，不得恢复用户删除的 内容，也不得自行 Research 或补造事实。事实不足时停止相关页面并返回 Entry / Story。

`DECK_DIR` 只能取 `task_pack.deck_dir` 的绝对路径，所有任务产物都写入该目录。当前 Skill 目录只读并记为 `SKILL_ROOT`；references 和渲染脚本只从 `SKILL_ROOT` 读取。

1. 产物与边界

• 最终产物：`<DECK_DIR>/deck.html`（如用了生成图则外加 `<DECK_DIR>/assets/`，图片在 HTML 中仍用相对路径 `assets/img_NN.png` 引用；没有生成图时 `deck.html` 就是唯一演示交付物）。
• 画布 **1280×720（16:9）**，固定设计画布 + JS 等比缩放适配屏幕（见 §4 契约）。
• CSS / JS 全部内联在 `<style>` / `<script>`。允许 CDN：**Three.js r128**、GSAP、ECharts、D3、Google Fonts。**禁止外链图片 URL**（图片只能来自 assets/ 下的本地文件）。
• `DECK_DIR` 内文件：`plan.md`（你的规划）、`deck.html`、`assets/`（可选）、`shots/`（渲染截图输出）。

只在现有阶段边界同步 `task_pack.json`，不改变后续阶段的执行内容：

• 进入阶段 1：`current_stage="output.dynamic_html.plan"`、`status="generating"`；`plan.md`

完成后把绝对路径写入 `state.artifacts.plan`。

• 进入阶段 3：`current_stage="output.dynamic_html.build"`；阶段 4 每完成并看图确认一页，把

页号追加到 `state.artifacts.dynamic_pages_completed`。

• 阶段 6 完成：把 `deck.html`、`shots/`、`shots/render.json` 和可用的

`shots/contact_sheet.png` 的绝对路径分别写入 `state.artifacts.deck_html`、`shots`、 `render_manifest`、`contact_sheet`；把 `dynamic_html` 加入 `completed_stages`。全部页面通过时 写 `current_stage="complete"`、`status="completed"`；仍有已如实报告的缺陷时写 `status="partial"` 和 `last_error`，保留全部可用产物。

2. 工作流（六阶段）

**必须先渲后看：只读代码不算自检。** 渲染统一用 bash 执行 skill 自带脚本：

python "$SKILL_ROOT/scripts/render_deck.py" "$DECK_DIR/deck.html" "$DECK_DIR/shots/" --page N  # 渲染第 N 页
python "$SKILL_ROOT/scripts/render_deck.py" "$DECK_DIR/deck.html" "$DECK_DIR/shots/" --all     # 全部页 + contact_sheet.png

成功时 stdout 每行一个 PNG 路径（告警以 `[console]/[static]/[blank]/[nav]` 前缀打在路径之前）；渲染元数据写 `$DECK_DIR/shots/render.json`（console_errors / static_pages / blank_pages / 页数 / 导航方式）。截图后用 `vision_analyze` 查看。

阶段 0 —— 读取 outline.md 与定调

**第一步必须是完整读取`read_file`当前 `outline.md`，不得先生成 plan.md 或 deck.html。** `task_pack.request.query` 只补充场景和用户明确风格偏好，不能覆盖 outline 的内容决定：

• 页数、页序、标题和每页核心结论：严格取自连续的 `## 第 N 页`，不得再按 8–12 页自行决定。
• 语言、受众和场景：优先取 outline；outline 未明确时读取 `task_pack.params` 和`task_pack.request.query`，不得改变 outline 内容。
• **先判使用场景的庄重度**（§3 场景适配），据此圈定风格候选域与动画密度档。
• **风格必须点名**：读取 `$SKILL_ROOT/references/style-families.md`，选定一个与主题、场景都契合的 family（outline 或 `task_pack.request.query` 带了风格倾向则在其方向内落到具体 family）。
• 读取 `$SKILL_ROOT/references/fancy-cookbook.md`，为本 deck 挑 2–3 个技法配方（全局背景选一种、入场编排选一种、过渡/彩蛋按需）。
• **定一个"招牌视觉"**：每个 deck 要有一处配得上题材的招牌手法。**选最贴本题材的技术——CSS/SVG/Canvas-2D/shader/代码 3D 平权，有创意、有题材绑定就是满分 fancy**（纯 CSS 几何、Canvas-2D 概念可视化也能很惊艳）。**fancy ≠ 3D**，评判看"有想法 vs 平庸套路"，不是用没用 3D。**分清 3D/shader 的两种用法**：① **灵动背景层**（shader 流场 / 节点球 / Fresnel 辉光球 / 粒子流 / 3D 氛围层）——背景默认就该"活"（持续微动），这类背景层**对任何题材都可用、科技抽象数据网络类尤其加分，不算"硬套 3D"**，鼓励上；② **沉浸漫游场景**（把整套 deck 架在可巡游的 3D 世界 + 翻页相机运镜）——这个才只给有空间主体的题材（建筑、天体、地形地貌等；分子晶体、实体产品三维也算）。**别为"避免 3D"把背景做成静态死平面。两种坍缩都要防**：别不分题材默认"canvas 粒子背景+编辑排版"，也别默认"沉浸漫游+翻页相机翻转"——都是套路。

阶段 1 —— 写 plan.md

**第二步必须是写plan.md，不得先生成 deck.html。** 一次 write_file 写出完整规划，包含：

1. **场景判断**：本 deck 用于什么场景、庄重度档位（庄重/自由/题材）、动画密度档位、为何选这个 family——把适配理由写明白。 2. **设计系统**：family 名；精确 palette（`--bg / --ink / --accent / --accent-2` 的 hex）；display + body 字体（含中文字体兜底）；全局背景层方案（**CSS/Canvas-2D 程序化纹理 / 粒子流场 / shader 噪声 / 代码搭 3D 场景 / 每页多场景，按招牌视觉选一**——别条件反射默认某一种）；通用过渡方案。

2b. **招牌视觉（必填一行）**：本 deck 的招牌手法 + 为何契合题材/场景；选了 3D/沉浸/shader 要写明用什么搭。**定了就必须真做出来**（见 §5 招牌兑现）。 3. **页序表**：**与 `outline.md` 的页面逐页一一对应**，每页一行 `NN | 页型 | 一句话内容 | 本页 fancy 手法 | 版面骨架`；NN、顺序、一句话结论必须服从 outline。页型从：封面 / 议程 / 观点 / 数据 / 对比 / 流程 / 案例 / 架构 / 时间线 / 总结 中选，相邻页不重复同一页型；fancy 手法不要超过 2 页雷同。**「版面骨架」一栏先想清楚这页怎么分区、主视觉摆哪、余量留给谁**（如"左叙事右大图 / 居中单 hero / 四等卡一行 / 满屏场景 / 上标题下两栏对比"）——分几区不限，但要让留白是有意的构图、不是排完剩下的边角料（见 §7 布局与留白）；并列项预想好怎么等高对齐。布局在 plan 里想透，初稿就少返工。 4. **素材清单**（如需）：逐页判断"摄影刚需"（§6），需要的写出生图 prompt 草稿与用途。**同组并列对象（N 枚卡片 / 一排同类）整组决策**：把 N 个成员列全，整组选"全真实图"或"全代码绘制"——选真图就 N 个各列一行，绝不能页序表写 4 枚卡片、清单只列 2 张（见 §6）。

规划自检：页数、页序、标题、核心结论和依据是否逐页对应当前 outline？palette 是不是精确 hex？有没有滑回暖米黄/奶油底？页型有变化吗？内容是否只使用 outline 已支持的真实主体与真实数据、没有占位词或新增事实？

阶段 2 —— 生成素材（仅当确需真实图片）

按 §6 的纪律生图：生成 → `vision_analyze` 核对（内容对不对 / 色调搭不搭 / 有无文字水印）→ 不合格改 prompt 重生，**绝不硬用**；确切路径记入 plan.md。没有摄影刚需的 deck 跳过本阶段（多数 deck 应该跳过）。

阶段 3 —— 写全局骨架 shell（只写骨架，不写页面内容）

一次 write_file 写出**完整可运行但页面为空**的 `$DECK_DIR/deck.html` 骨架（结构契约见 §4）：

• head（Google Fonts / CDN）→ `:root` design tokens → 全部基础 CSS（.deck/.slide/.active/导航 UI/通用 keyframes 库/通用过渡）→ `#bg-layer` 全局动态背景（**完整实现并运行**，不是占位）→ N 个空 `<section class="slide">`（仅含 `<!-- SLIDE NN: 页型 + 一句话 -->` 注释，**不写任何真实内容**；封面页可先放最小标题文字保证 smoke 有内容可看，其余页一律保持空）→ 导航控制器 JS → 页码 + 进度条。

**硬性纪律：骨架这一次 write_file 里，除封面外的 section 必须是空的（只有注释）。不要在骨架阶段就把多页内容一次性写满**——那会让一整批未经单页验证的页面同时落地，错误跨页累积、后面更难收拾，也丢掉了逐页"渲染即验证"的全部价值。

然后 smoke 验证：`render --page 1` + 看图——封面可见、页码/进度条在、背景层在动（看 stdout 的 [static] 与 [console]）、零报错。骨架不过关先修骨架，再进入逐页填充。

阶段 4 —— 逐页填充（一页一个循环，不要跳步）

按页序**一页一页**来，每页走完一个完整的"填充→渲染→看图"小循环再进入下一页：

1. `edit` 把**该一页*