Reveal.js 演示文稿生成器

---
name: remotion-slides
description: 将主题/论文/内容转化为 Reveal.js HTML 演示文稿（用户自己上台讲）。触发：做演示文稿/幻灯片、Reveal.js、HTML幻灯片、文章转演示、做路演、pitch deck、商业演示、杂志风/editorial、/remotion-slides。适用：学术/技术/商业/教学演示，支持 Editorial Magazine 模式（WebGL流体背景）。
allowed-tools: Read Write Edit Bash Task Glob Grep WebSearch WebFetch
metadata:
  author: huanwang.org
  version: "3.0.0"
  domain: presentation
---

# Remotion Slides

将主题/论文/内容转化为 **Reveal.js HTML 演示文稿**。输出完整演示文件夹（index.html + 本地图片 + Reveal.js 离线副本），浏览器打开 index.html 即用，zip 打包分发。

## 与相关 Skill 的关系

| Skill | 输入 | 输出 | 动画机制 |
|-------|------|------|----------|
| `remotion-video` | 主题/论文/内容 | MP4 视频 | React 帧动画 |
| `remotion-excalidraw-video` | 同上 | MP4（手绘风） | rough.js + evolvePath |
| `markdown-to-slides` | Markdown 文档 | Markdown 幻灯片（中间格式） | 无动画 |
| **`remotion-slides`（本 skill）** | 主题/论文/内容 | **Reveal.js HTML** | fragments + auto-animate + 增强动画（3b1b/回形针/手绘） |

**与 markdown-to-slides 不同**：
- markdown-to-slides 输出中间 Markdown，需要另一个工具渲染
- remotion-slides 输出**最终 HTML**，打开即用，动画效果内置
- remotion-slides 继承 remotion-video 的内容规划方法论（认知阶梯、场景设计）

## 继承关系

本 skill **继承** remotion-video 的以下方法论（不继承技术栈）：

| 模块 | 来源 | 适用模式 | 说明 |
|------|------|---------|------|
| 认知阶梯 | remotion-video Phase 0 | 标准模式 | L1 故事→L2 概念→L3 细节→L4 数学 |
| 场景设计 | remotion-video Phase 1 | 标准模式 + 文章模式 | 信息密度控制、内容分段 |
| 学术定位 | remotion-video Phase 0 | 标准模式（论文类） | 论文类输入的根基/遗产/竞争分析 |

**不继承**：Remotion 框架、音频系统、渲染管线、项目结构。

> **文章模式说明**：文章模式跳过认知阶梯和学术定位，使用文章自身的叙事结构。场景设计中的信息密度控制仍然适用。

---

## 技术选型

| 决策 | 方案 | 原因 |
|------|------|------|
| 输出格式 | 文件夹（HTML + images/ + dist/） | 离线可用，zip 打包分发 |
| 幻灯片框架 | Reveal.js 5.2.1 本地 dist/ | 离线可用，功能完备 |
| 动画层 | fragments + auto-animate + transitions + 增强动画 | 基础三级 + 3b1b/回形针/手绘增强风格 |
| 图表方案 | 内联 SVG + fragment 分步 | 支持逐步揭示，矢量清晰 |
| 代码高亮 | highlight.js（Reveal 内置插件） | 支持逐行步进 |
| 数学公式 | KaTeX（Reveal 内置插件） | 自动从 CDN 加载 |
| 演讲者备注 | `<aside class="notes">` | 替代视频版的语音旁白 |

### 图片处理策略

所有图片统一保存到 `images/` 目录，HTML 中使用相对路径引用。