# Sn Ppt Dazzle

需要把演示 / 幻灯片 / PPT / slides 做成单文件 HTML 动态 deck（动效、跨页过渡、键盘翻页、1280×720）时使用。本 skill...

- Repository: https://github.com/OpenSenseNova/SenseNova-Skills (6002 stars)
- Category: Documents
- License: MIT
- Last updated: 2026-10-29
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-ppt-dazzle -g -a claude-code -y`
Codex: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-ppt-dazzle -g -a codex -y`
Cursor: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-ppt-dazzle -g -a cursor -y`
Gemini CLI: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-ppt-dazzle -g -a gemini-cli -y`

## 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 等方式）。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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. 工作流（六阶段）

The rest: https://github.com/OpenSenseNova/SenseNova-Skills/blob/HEAD/skills/sn-ppt-dazzle/SKILL.md