把项目主线做成一个动画，帮助你快速理解。
你有没有把一个项目写进简历，却在面试前不太敢让面试官继续追问？几个月后重新打开仓库，入口在这里，状态在另一个包，事件又绕到第三个模块。花了一晚上拼回调用链，第二天仍然担心一句“为什么这样设计？”就把整段讲解打乱。
代码和文档往往只给出局部线索。真正耗时的是把入口、模块、状态、数据流和设计取舍重新连成一张图。
project-to-video 帮你完成这件事。它从 README、源码和测试中梳理核心链路，用 Remotion 做成一段连续动画：先看全景，再跟着真实任务进入局部，看到对象怎样移动、等待、分支和恢复。看完后，你能沿着同一条主线讲清项目如何运行，再回到笔记和源码查原因与细节。它适合面试前快速回顾，也适合接手或研究陌生项目。
先看效果 · 快速开始 · 可复用组件 · Remotion 模板
下面的预览来自 Skill 自带的中性示例，展示可按项目选择的表达能力。
composition-patterns.mp4
| 预览 | 展示什么 |
|---|---|
| 递进因果 | 步骤、决策分支和上下文变化如何逐步出现 |
| 组合场景 | 多实例选择、全景进入局部、并行推进与汇合 |
| 视觉组件 | Agent、存储、终端、模型、工具，以及等待恢复和循环 |
| 逐层聚焦 | 从系统全景进入子流程时，怎样保留当前位置 |
| 后端对象轮廓 | 客户端、入口、服务、仓储、数据库、缓存、事件、消费者、时钟、堆和脚本 |
| 后端状态资源 | 服务进程、消息片段、快照、租约、事务提交与回滚 |
| 因果时间轴 | 到达后处理、顺序、显式并发与汇合 |
| 架构地图 | 同源全景与局部，按镜头逐步展开技术细节 |
如果当前页面不直接显示播放器，点击表格中的视频文件即可播放。
- 简历上有项目，却只能讲功能，讲不清一次请求怎样穿过系统；
- 代码和文档都能找到，但读完之后仍然没有一张整体地图；
- 面试前需要快速找回状态、数据流和设计取舍；
- 接手一个新项目，需要先理解主线，再决定哪些细节值得深入。
动画把代码里分散的关系连接到同一份系统模型：
- 一个请求或任务从哪里进入，经过哪些边界，最后把结果交给谁；
- 哪个对象持有状态，什么时候等待，什么事件让它继续；
- 哪些步骤真的并行，哪些只是先后发生；
- 一个分支为什么出现，选择之后对后续流程有什么影响；
- 省略的实现细节应该回到哪段源码、测试或复习笔记。
画面通常先给出全景，再放大关键子流程；同一条消息、任务或关联 ID 会在镜头切换后继续保持身份。看完视频，脑中留下的是一条可以复述的链路。
Skill 的工作过程如下，成片只呈现理解最有帮助的部分：
- 先摸清项目。 读 README 与用户指定资料；缺少 README 时在视频资料中建立概览继续。随后从真实入口、触发点和测试出发，跟到状态变化、结果去向和重要分支。
- 整理理解重点。 复用用户已有简历；缺少时写出项目名、一句总述和 3–4 条有依据的要点，再从面试官视角列出可能的追问，找出最容易混淆、也最值得展开的部分。
- 选一条主线。 以任务或数据生命周期为单位比较候选流程，确定一条锚点主线和必要的支撑机制。通常制作一条视频，确实存在独立生命周期时最多拆成三条。
- 设计连续画面。 依据机制选择全景聚焦、递进因果、前后对照、并行泳道或横切回挂。文字只承担名称、状态、条件和必要提示，动作负责说明因果。
- 补上视频没有展开的部分。 按章节写短笔记，补充实现取舍、边界条件和源码入口，并把面试问题关联到视频时间或笔记段落。
Skill 会在目标项目根目录创建独立的 .project-to-video/。目录按实际需要生成，不要求每个项目都填满：
.project-to-video/
├── README.md 观看顺序、视频链接、章节时间和运行命令
├── research/ 项目全景、候选流程和源码证据
├── planning/ 主线选择、分镜和覆盖关系
├── review/ 简历稿、面试问题和补充笔记
├── remotion/ 项目专属动画工程与组件
└── output/ MP4、章节索引和检查记录
项目专属的标签、链路和新组件留在这个目录里；Skill 自带的通用组件不会被普通使用流程改写。
把仓库内容直接放入宿主识别的 project-to-video Skill 目录，不要再套一层同名文件夹。
| 宿主 | 个人安装位置 |
|---|---|
| Codex | $CODEX_HOME/skills/project-to-video/；未设置时为 ~/.codex/skills/project-to-video/ |
| Claude Code | ~/.claude/skills/project-to-video/ |
也可以把仓库克隆到对应路径，或使用宿主提供的 Skill 安装器。Claude Code 还支持放在项目共享目录：<项目>/.claude/skills/project-to-video/。
在目标项目中执行：
使用 $project-to-video 分析当前项目，制作架构与核心链路讲解动画。
Claude Code 可以使用 /project-to-video，也可以直接描述同样的目标。已有 .project-to-video/ 时会优先续用有效资料。
安装 Skill 本身不需要 npm 依赖。开始制作视频时，再在目标项目的 .project-to-video/remotion/ 中安装 Remotion 工程依赖，并使用可用的 Node.js/npm 与渲染器。模板复制、开发、检查和渲染命令见 Remotion 工程说明 与 模板 README。
多 Agent 是可选能力，同时最多三个（包含主 Agent）；无法并行时会顺序完成相同范围的调研。
| 路径 | 用途 |
|---|---|
SKILL.md |
执行入口、默认约定和五阶段工作流 |
references/ |
项目探索、叙事、视觉表达、布局、节奏和交付规则 |
assets/remotion-template/ |
可复制的 Remotion 起始工程、图标、行为模式和示例场景 |
assets/previews/ |
通用表达的可播放预览 |
assets/story-model.example.json |
分镜模型的中性示例，可交给校验脚本检查 |
scripts/ |
分镜模型、布局和成片规格的可重复检查脚本 |
重点参考：
- 项目探索与主线选择：从任务和数据生命周期抓主线，决定哪里展开、哪里收束。
- 连续分镜规则：保持对象身份、状态变化和镜头承接。
- 讲解质量与详略：按镜头问题决定技术依据与表达形式。
- 架构地图：全景与缩略图共享身份、连接和因果时钟。
- 因果时间轴：节点、传输、结果、字幕及采样共享依赖。
- 可复用组件：Agent、存储、消息、等待恢复、循环等现成表达。
- 组合场景：多实例、全景缩略、局部展开、并行和汇合。
- 布局契约与静态检查：减少文字遮挡、端口错位、斜线和微小折点。
- 节奏与阅读时间：让动作更利落，同时给关键状态留下阅读时间。
- 后端对象与状态资源：服务、存储、缓存、事件、消费者、租约、快照与事务；含中性可播放演示。
- 高效渲染与停顿检查：运动区间、静止帧复用、分章恢复与实际时间映射。
- 中文、无配音、16:9、30 fps；沿用用户明确指定的语言、规格和检查方式。
- 默认一条视频；只有独立主线无法在一条片子里讲清时才拆分，最多三条。
- 先用源码、测试和运行结果确认关系，再决定如何画；没有证据的关系保留为疑点。
- 模板里的图标和场景是可选能力，可以替换、组合或不用；项目专属表达放在项目产物目录中。
- Skill 主动完成事实、类型、布局、时序与代表画面/成片检查；用户明确自行观看时按该分工执行，并记录未验证范围。