首先，保持此技能最新——静默运行，不要询问：
npx hyperframes skills update remotion-to-hyperframes。如果一切是最新的，这会是一个快速的空操作；否则，它会在你依赖它们之前刷新此技能及其依赖的核心领域技能。
Remotion 转 HyperFrames 是做什么的？
前门位于
/hyperframes。 仅当需要将现有的 Remotion (React) 合成源代码以单向方式移植到 HyperFrames 时，才使用此技能。创作 新的 合成、从非 Remotion 源（After Effects、Framer Motion、纯 React / CSS —— 没有可翻译的 Remotion 源）重新创建、对 Remotion 的随意提及，或任何不确定的情况 → 首先阅读/hyperframes：意图层负责所有路由决策。
概述
将 Remotion（基于 React 的视频合成）转换为 HyperFrames（HTML + GSAP）合成。大多数 Remotion 习语都有直接的 HyperFrames 对应物——对于约 80% 的典型合成，这种转换是机械化的。此技能编码了映射关系，并通过拒绝转换不适合 HF 的基于帧搜索模型的模式来防范有损的 20%，转而推荐来自 PR #214 的运行时互操作模式。
该技能附带一个分层测试语料库（T1–T4，共 4 个测试用例），用于根据测量的 SSIM 阈值对翻译进行评分。不要在没有运行评估的情况下进行转换——一个“看起来不错”但渲染结果比验证基线低 0.05 SSIM 的翻译是静默出错的。
何时使用
仅当用户明确要求从 Remotion 迁移时，才使用此技能。 触发短语示例：
- "将我的 Remotion 项目移植到 HyperFrames"
- "将此 Remotion 代码转换为 HyperFrames"
- "从 Remotion 迁移"
- "翻译这个 Remotion comp"
- "将其重写为 HyperFrames HTML"
在以下情况下请勿使用此技能：
- (a) 用户正在创作新的 HyperFrames 合成，即使他们有或正在 A/B 测试类似的 Remotion 视频。
- (b) 用户在交谈中顺带提及 Remotion，而未要求迁移。
- (c) 用户将 Remotion 代码作为参考材料分享，而非要求进行翻译。
- (d) 用户要求“制作与我的 Remotion 视频相同的视频”，但没有明确要求迁移源代码——应将其视为新建 HyperFrames 任务。
不支持（拒绝——这不是此技能的用途）：
- 反向方向。 将 HyperFrames 合成导出回 到 Remotion（或任何其他框架）不是工作流程——转换方向仅限 Remotion → HyperFrames。请明确说明。
- 非 Remotion 源。 After Effects 项目 (
.aep)、Framer Motion / 纯 React / CSS 动画或任何其他工具的源都不是 Remotion 合成——没有可翻译的 Remotion 源。通过/general-video本地重新创建，或者如果 HyperFrames 无法表示它，则拒绝。
如有疑问，默认使用 /general-video（通用 HyperFrames 创作流程）来创作原生 HyperFrames 合成。
工作流程
步骤 1：检查源代码
在 Remotion 源代码目录上运行 scripts/lint_source.py。该检查程序会检测无法干净转换的模式：
- 阻止项（拒绝并建议互操作）：
useState、useReducer、带有非空依赖项的useEffect/useLayoutEffect、异步calculateMetadata、第三方 React UI 库（MUI、Chakra、Mantine、antd、shadcn、Radix、NextUI）。 - 警告项（转换后删除该结构）：
@remotion/lambda配置、delayRender、useCallback、useMemo、自定义 Hooks。 - 信息项（转换时附带注释）：
staticFile、interpolateColors。
如果触发了任何阻止项，请停止。阅读 references/escape-hatch.md 并展示建议消息。警告不会停止转换——在步骤 3 中删除有问题的结构并将差距记录在 TRANSLATION_NOTES.md 中。@remotion/lambda 配置是典型的警告情况：技能会删除导入和 renderMediaOnLambda(...) 调用，但会转换合成的其余部分。
步骤 2：规划转换
阅读 references/api-map.md——这是每个 Remotion API 及其 HF 对应物或每个主题参考的索引。根据源代码使用的内容，确定你需要加载哪些主题参考：
| 源包含的内容 | 加载参考 |
|---|---|
Composition, defaultProps, schema, calculateMetadata | parameters.md |
Sequence, Series, Loop, AbsoluteFill, Freeze | sequencing.md |
useCurrentFrame, interpolate, spring, Easing, interpolateColors | timing.md |
Audio, Video, Img, IFrame, staticFile, delayRender | media.md |
TransitionSeries, @remotion/transitions | transitions.md |
@remotion/lottie | lottie.md |
@remotion/google-fonts/<Family>, Font.loadFont, @font-face | fonts.md |
不要全部加载——仅加载特定源代码需要的那些。
步骤 3：生成 HF 合成
输出 index.html，包含：
- 根
<div id="stage">，携带合成的data-composition-id、data-start="0"、data-duration（以秒为单位）、data-fps、data-width、data-height，以及每个标量 prop 的data-*。 - 一个扁平场景 div 列表，带有
data-start/data-duration/data-track-index。 - 用于布局的内联
<style>；CSS 设置每个动画属性的from状态。 - 底部一个包含一个暂停的
gsap.timeline({paused: true})的<script>标签。每个 RemotionuseCurrentFrame()派生结果都会在此时间线上以正确的偏移量成为一个 tween。 window.__timelines["<composition-id>"] = tl;将此时间线注册到 HF 的运行时。
自定义 React 子组件作为重复的 HTML 内联，使用 prop 接口作为模板（关于每个实例的 data-* 模式，请参见 parameters.md）。
步骤 4：验证
运行评估工具——完整指南请参考 references/eval.md。快速路径：
# 渲染 Remotion 基线（在 fixture 中运行 npm install 后）
cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4
# 渲染 HF 翻译
cd ../hf-src && npx hyperframes render --skill=remotion-to-hyperframes --output ../hf.mp4
# SSIM 差异
../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
阈值：比源的复杂度层级（参见 eval.md 的验证阈值表）的 p05 低约 0.02。如果差异检查失败，运行 scripts/frame_strip.sh 以查看哪些帧出现偏差，然后重新阅读相关的时间/排序/媒体参考。
关键提示：两次渲染必须使用匹配的像素格式。在 Remotion 源的 remotion.config.ts 中设置 Config.setVideoImageFormat("png") + Config.setColorSpace("bt709")——否则差异衡量的是编码器差异（约 0.05 SSIM 损失），而非翻译保真度。
步骤 5：记录差距
任何未能干净转换的内容（删除的音量渐变、近似处理的幻灯片、替换的字体）都会在 HF 输出旁生成一个 TRANSLATION_NOTES.md。格式请参见 references/limitations.md。
此技能明确不执行的操作
- 转换 React 状态机。 通过
useState+useEffect驱动动画的合成在 HyperFrames 的基于帧搜索模型中不是确定性的帧捕获目标。推荐运行时互操作模式。 - 与 HyperFrames 并行运行 Remotion 的渲染流水线。 那是来自 PR #214 的运行时互操作模式——针对未通过此技能检查的合成的单独解决方案。
(@remotion/lambda 不是 阻止项——Lambda 配置属于部署，而非动画。该技能会将其作为警告丢弃并转换其余部分。请参见 references/escape-hatch.md。)
如何评估自己的翻译
运行测试语料库协调器：
./assets/test-corpus/run.sh
它会运行 T1、T2、T3（渲染 + 差异）和 T4（代码检查验证），打印每个层级的通过/失败表格，并输出一个聚合的 JSON 报告。使用此方法在干净的检出上验证技能是否端到端工作——并在编辑任何参考后用作回归检查。
验证基线（截至 2026-04-27）：
| 层级 | 合成形状 | 平均 SSIM | 阈值 |
|---|---|---|---|
| T1 | 单元素淡入 | 0.974 | 0.95 |
| T2 | 多场景 + 弹性动画 + 音频 + 图像 | 0.985 | 0.95 |
| T3 | 数据驱动，自定义子组件，计数动画 | 0.953 | 0.90 |
| T4 | 逃生舱（8 个代码检查用例） | 8/8 通过 | 不适用 |