Remotion 网页视频迁移助手
跨端通用把现有 Remotion React Composition 迁移为浏览器原生的 HTML、CSS 与 JavaScript 时间线视频工程。适合明确需要转换已有 Remotion 源码，而不是从参考视频重新创作。
复制一句话给 AI 安装
安装前请审阅 skill 内容：skill 会影响你的 AI 助手行为，仅安装你信任的来源。
不用安装 Node.js。复制后粘贴到本地 Agent 对话框，它会读取官方指南、安装并验收。
手动安装 / 高级选项
npx -y @huohuahub/cli@0.1.1 install remotion-to-web-video-converter --target auto --registry https://huohuahub.com跨平台 CLI 会校验 SHA256，并保护本地修改。旧脚本需要定向安装时，可在下面选择 AI。
不使用 npm？改用一键安装脚本
旧版脚本仅供人工兼容：它会备份并替换同名目录。请先确认没有需要保留的本地修改；AI 安装协议不会自动调用它。
curl -fsSL "https://huohuahub.com/api/skills/remotion-to-web-video-converter/install" | bash自动检测本机已装的 AI 工具：只有一个直接装，检测到多个会列出让你挑（回车 = 全部）。审阅脚本内容 ↗
Windows（PowerShell）命令
powershell -c "irm 'https://huohuahub.com/api/skills/remotion-to-web-video-converter/install.ps1' | iex"只想装某一个 AI？选择安装目标
普通聊天 AI：当 Prompt 试用（不是安装）
用 DeepSeek App、Kimi、豆包这类聊天 AI（没有 agent 端可装）？ 可以把内容直接复制成 Prompt 粘贴使用；附带脚本和资料不会安装：
Skill 内容
Remotion 网页视频迁移助手
这个 Skill 能做什么
把现有 Remotion React Composition 迁移为浏览器原生的 HTML、CSS 与 JavaScript 时间线视频工程。
完成任务时重点处理：
- Composition、帧率、尺寸和序列结构
- React 组件、动画、媒体和字体迁移
- 帧级对照、确定性和渲染兼容
最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。
什么时候使用
- 明确需要转换已有 Remotion 源码，而不是从参考视频重新创作。
- 用户需要把现有 Remotion React Composition 迁移为浏览器原生的 HTML、CSS 与 JavaScript 时间线视频工程。
- 任务需要同时控制Composition、帧率、尺寸和序列结构、React 组件、动画、媒体和字体迁移。
如果只有视频成品没有源码时改为重制任务并明确无法精确迁移，先处理前置条件，不要直接假装任务已经完成。
开始前需要什么
优先收集：
1. 目标、输入文件与预期输出 2. 运行环境、依赖、版本和目录约束 3. 已有代码、接口、样例和错误信息 4. 安全、性能、兼容性和测试要求 5. Remotion 项目源码、入口 Composition 和依赖 6. 目标网页视频运行时、输出规格与允许的替代实现
信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。
执行步骤
1. 确认迁移边界
只处理明确指定的 Composition、尺寸、帧率和时长。
2. 分析源结构
读取 Sequence、帧计算、插值、媒体、字体和组件依赖。
3. 建立对应表
把 React 组件与 Remotion 时间语义映射到 DOM 和确定性时间线。
4. 迁移视觉与资产
重建布局、样式、SVG、图片、视频、音频和字体。
5. 迁移动画
保持关键帧、缓动、序列边界和同一帧输出一致。
6. 帧级验证
对比代表帧、完整时长、音画同步和最终渲染。
输出格式
至少交付以下内容：
- **迁移映射**：源组件、时间语义、资产和目标实现
- **网页视频工程**：可运行的 HTML/CSS/JS 版本
- **对照报告**：关键帧差异、替代实现和未迁移能力
所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。
Releases
- v1.0.0最新下载
火花 Hub 官方内容库首发版本。
下载后放哪
解压后把 remotion-to-web-video-converter/ 整个目录放进对应位置即可。
需要单独安装
- Claude Code
~/.claude/skills/remotion-to-web-video-converter/ - Gemini CLI
~/.gemini/skills/remotion-to-web-video-converter/改动后在会话里执行 /skills reload - Qwen Code
~/.qwen/skills/remotion-to-web-video-converter/重启 CLI 生效 - iFlow
~/.iflow/skills/remotion-to-web-video-converter/需在 frontmatter 补 license 字段 - ZCODE
~/.zcode/skills/remotion-to-web-video-converter/
已装 Claude Code 或 Codex 的话，这些端不用管
它们同时也读 ~/.claude/skills/ 或 ~/.agents/skills/，解压到那两个目录就顺带覆盖了。
- Codex
~/.codex/skills/remotion-to-web-video-converter/也读标准目录 ~/.agents/skills/ - OpenClaw
~/.openclaw/skills/remotion-to-web-video-converter/ - Cursor
~/.cursor/skills/remotion-to-web-video-converter/ - Copilot CLI
~/.copilot/skills/remotion-to-web-video-converter/ - DeepSeek（Deep Code）
~/.agents/skills/remotion-to-web-video-converter/Deep Code 读标准目录 ~/.agents/skills/ - Kimi Code
~/.kimi-code/skills/remotion-to-web-video-converter/也读标准目录 ~/.agents/skills/ - OpenCode
~/.config/opencode/skills/remotion-to-web-video-converter/也读 ~/.claude/skills/ 与 ~/.agents/skills/
仅项目级
这两个端只支持项目内目录，家目录探测不到，只能手动放。
- Windsurf
.windsurf/skills/remotion-to-web-video-converter/在项目根目录执行
文件清单
点文件名就地展开内容，审阅后再安装 —— skill 会影响你的 AI 助手行为， 只安装你信任的来源。
讨论
这个 skill 的用法交流都在它的使用心得笔记里：去参与（0 赞 · 0 条评论）↗
发现违规、恶意或侵权内容？到来源笔记举报此 skill ↗（skill 从笔记涌现，笔记下架即 skill 下架）。
作者专区：安装量徽章（贴进你的 GitHub README / 博客）
[](https://huohuahub.com/skills/remotion-to-web-video-converter)