Remotion 视频开发助手

Remotion 是一款用 React 代码构建视频的开源工具，让开发者可以用熟悉的 Web 技术创建动态视频内容。但 Remotion 项目在动画时序、媒体处理、字幕和渲染模式上有不少坑，缺少经验的情况下很容易写出难以维护或渲染出错的视频代码。本 Skill 提供 Remotion 专项规则，指导 Coding Agent 产出更高质量的 React 视频代码。

适用场景

• 制作产品介绍视频：用 Remotion 创建包含时序场景、媒体图层、字幕和动画 UI 元素的 10 秒产品开场视频。
• 优化现有 Remotion 项目：审查已有 composition 的时序序列、媒体处理、动画时点和动态元数据模式，针对性改进。
• 原型数据驱动视频：基于数据构建动画图表、动态文字效果和元数据驱动的视频输出，适合数据可视化类视频内容。

核心能力

• 说明如何定义 Remotion compositions、静态帧、文件夹、props 和动态元数据，建立规范的组件结构。
• 提供图片、视频、音频、GIF、Lottie 动画、字体和静态资源的标准处理模式。
• 覆盖时间线控制，包括 Sequence 序列、trim 裁剪、transition 转场、interpolation 插值、spring 弹簧和 easing 缓动曲线。
• 引导字幕导入、显示样式、听写工作流和按词时间轴的文字动画实现。
• 包含媒体检查辅助函数的使用方法，获取视频时长、尺寸、解码信息和帧提取。
• 提供可复用的 TSX 代码示例，覆盖图表组件和动态文字动画两大高频场景。

使用限制

• 提供指导原则和示例代码，不自动渲染视频，项目需自行配置 Remotion 依赖、资源和构建方式。
• 远程媒体示例需要有效 URL、CORS 访问权限和网络可用性，缺一不可。
• 生成代码需要根据具体项目调整帧率、尺寸、props 和资源路径，不适合直接复制使用。
• 建议对生成代码进行项目相关的性能和安全评审，特别是涉及远程媒体和用户输入的场景。

实用价值

本 Skill 将 Remotion 这款 React 视频工具的最佳实践封装为 Coding Agent 可直接调用的专项规则。对于需要用代码精确控制视频内容、需要 AI 辅助开发动画和媒体组件、或希望用熟悉的 React 技术栈替代传统视频编辑工具的开发者，这个 Skill 提供了可操作的时序控制模式、媒体处理规范和渲染注意事项，减少在 Remotion 项目中的摸索成本。