以 skill 自身的术语
一个以路由为先的 skill，用于制作一段简短、以设计为主导、无旁白的动态图形——动态排版、数字滚动统计、图表命中、Logo 冲击动画、下标字幕、动态地图、推文或网页——时长通常在 10 秒以内，最长不超过约 30 秒，渲染为 MP4 或带透明通道的叠加层。
它以素材为先、以复用为先：第一个分支点在于该作品是否需要搜索——表单类别基于用户提供的内容运行，asset_needs 为空；搜索驱动的类别则依据返回的内容类型进行动画处理；Builder 会先组合目录中的模块，再手工编写空缺部分。工作流是自主的，最多提出一个澄清问题，但渲染始终需要用户确认，需先通过 lint、检查和校样快照。
它产出什么
- 先草稿再定稿的 shot-plan.json，保存 envelope、所选类别或搜索意图、asset_needs，以及 block、layout、motion 和 positions。
- compositions/index.html，遵循 HF 契约，在 window.__timelines 上有一个暂停的 GSAP timeline，具备 clip 类和稳定的 id，以及确定性的 tl.seek(0)。
- snapshots/ 目录下的联系表或快照表，用于检查校样时间点。
- renders/video.mp4，或在使用 webm 或 mov 格式渲染时输出带透明通道的叠加层。
工作方式
- 01初始化项目
步骤 0 会创建 PROJECT_DIR = videos/<project-name>/，并使用空白示例和该 skill 运行 hyperframes init；当 hyperframes.json 已存在时会完全跳过此步骤。
- 02规划并决定是否搜索
第一个分支点在于该作品是否需要搜索：否则为表单类别，asset_needs: []；是则将搜索查询写入 asset_needs[]。
- 03在需要时获取素材
步骤 2 通过 media-use 将素材解析为冻结的项目本地路径及一份台账；当 asset_needs 为空时，直接跳过此步骤进入设计阶段。
- 04围绕已有素材进行设计
第二次 Director 处理会围绕已解析的素材选取目录 block 和 hyperframes-animation 规则与 blueprint，然后完成 shot plan 的最终定稿。
- 05以复用为先进行组合
Builder 使用 npx hyperframes add 添加目录 block 并就地定制，仅手工编写空缺部分和素材融合功能点，生成 compositions/index.html。
- 06拍摄校样快照
选择能展示开场状态、标志性动作和最终定格的校样时间点，然后检查生成的联系表或快照表。