用途
Remotion 技能用于在 React 中创建视频，覆盖从创意构思到代码实现的完整工作流。它适用于以下场景：从零创建新的 Remotion 视频、为内容资产生成视频简报变体、修改现有 Remotion 合成、调试 Remotion 动画或渲染问题、使用 Remotion 特定 API 或组件，以及在视频中展示真实网站、工具或产品 UI（需遵循 rules/site-ui-from-code.md）。
主要能力
该技能提供一套结构化的视频创建流程，包含 8 个步骤：
- 品牌识别：确定视频所属品牌。若品牌为 MIA，使用内置 MIA 主题；否则要求用户提供品牌网站 URL 或品牌指南，提取背景色、主强调色、次强调色、文本颜色、字体和主题（亮/暗）。
- 创意简报：锁定目的、受众、核心信息、内容类型、渠道、CTA、源资产、语气和品牌。
- 概念选择：从概念目录（references/concept-catalog.md）中选取 3-5 个推荐概念。目录包含 18 个主概念、8 种视觉风格修饰符和 5 种冷受众钩子模式。选择时需根据简报评分，并应用冷受众过滤器。
- 格式与规格：根据渠道确定尺寸、时长和帧率。默认帧率 30，仅在平滑运动关键时使用 60。
- 场景分解（审批门）：在编写代码前定义每个场景，包括时间、文案、动画和目的。
- 视觉设计（审批门）：锁定调色板、排版和动画风格。
- 架构决策：根据场景复杂度选择单文件或多文件结构，始终使用集中式时间常量。
- 实现与输出文档：编写代码并生成参考文档。
此外，技能包含详细的技术参考，涵盖核心动画与计时、媒体处理、文本与字幕、合成与元数据、高级功能（3D、图表、Lottie、Tailwind）、媒体工具（Mediabunny）和布局测量。
使用方式
该技能以规则文件和参考文档的形式组织。用户需阅读相关规则文件获取 API 细节和代码示例。关键规则包括：
- 所有动画必须由 useCurrentFrame() 驱动，禁止使用 CSS 过渡、Tailwind animate-* 或 transition-* 类，以及 React Three Fiber 的 useFrame()。
- 使用 Remotion 组件（<Img>、<Video>、<Audio>）而非原生 HTML 元素。
- 使用 staticFile() 处理 public/ 文件夹中的所有资源。
- 时间以秒为单位时，需乘以 useVideoConfig() 中的 fps 转换为帧。
- 禁止使用第三方动画库驱动运动。
生产规则适用于任何有配音或参考匹配的视频：先录制或生成语音轨道，场景计时跟随语音；使用 Whisper 生成逐词字幕；音乐在语音下压低；硬切和关键屏幕变化添加音效；最终混音响度约 -16 LUFS；颜色必须来自产品屏幕或品牌套件。
适用场景
- 创建新的 Remotion 视频
- 生成视频简报变体
- 修改现有 Remotion 合成
- 调试动画或渲染问题
- 在视频中展示真实网站或产品 UI
- 需要冷受众优化的营销视频
限制
- 所有动画必须遵循 Remotion 规则，违反将产生错误输出。
- 每个概念必须自解释，假设冷受众，除非简报明确说明受众为暖受众。
- 颜色必须来自产品屏幕或品牌套件，不得凭空创造调色板。
- 字幕不得覆盖面部，9:16 画面底部五分之一需保持空白。
- 未提供具体收费、价格或平台支持信息。