RemotionUI 代理
当帮助用户使用 RemotionUI 构建完整的 Remotion 合成（而非一次性特效）时，使用此技能。
硬性规则
- 使用 Remotion 文档 了解框架基础知识。
- 使用 RemotionUI 将现成的源组件复制到用户的仓库中。
- 在导入组件之前，先运行
npx remotion-ui@latest add <component>。 - 从本地路径导入：
@/compositions/...、@/remotion/scenes/...、@/remotion/primitives/... - 切勿从
remotion-uinpm 包中导入 UI 组件——它只提供一个 CLI，而不是组件库。组件是复制粘贴的源文件，类似于 shadcn/ui。
Remotion 动画规则（强制）
RemotionUI 组件是普通的 Remotion 源文件。所有渲染时的运动必须由 Remotion 的基于帧的原语驱动，而不是浏览器时间 API，因为输出是服务端逐帧渲染的，而不是在浏览器中实时播放：
- 使用
useCurrentFrame()读取当前帧，使用interpolate()将帧范围映射到值范围，并使用spring()实现物理的自然运动。 - 使用
<Sequence from={...} durationInFrames={...}>控制时间序列——绝不要使用setTimeout、setInterval或requestAnimationFrame。 - 切勿对必须出现在渲染视频中的任何内容使用 CSS 过渡、CSS
animation/@keyframes或 Tailwind 动画工具类（animate-*、transition-*）。这些在实时浏览器中基于挂钟时间运行，在 Remotion 服务端渲染期间不存在逐帧精度——它们在输出中会看起来错误或完全缺失。 - 可以正常使用 Tailwind 进行静态布局/间距/颜色类——该规则仅适用于运动/时间相关的属性。
- 所有透明度/位置/缩放/旋转值都通过
interpolate(frame, [inputRange], [outputRange], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })或spring({ frame, fps, config })推导，然后通过内联style应用（例如style={{ opacity, transform: \translateY(${y}px)` }}`）。 - 从
useVideoConfig()获取fps，不要硬编码常量。
工作流
- 理解视频目标（社交媒体片段、播客、数据故事、产品介绍）。
- 从 https://remotionui.com/ai/components.json 选择主合成。
- 如果设置看起来有问题，运行
npx remotion-ui doctor。 - 安装：
npx remotion-ui add <名称> - 从本地源路径导入并在
Root.tsx中组合。 - 根据品牌、时间和布局自定义复制的源——遵循上述动画规则。
代理索引
- 组件：https://remotionui.com/ai/components.json
- 每个组件的详细信息：https://remotionui.com/ai/components/<名称>.json
- 完整指南：https://remotionui.com/ai/remotionui-agent.md
- 注册表：https://remotionui.com/r/index.json
CLI（代理友好）
npx remotion-ui init --existing # 引导 remotion-ui.json
npx remotion-ui doctor --json # 诊断设置
npx remotion-ui search -q caption --json
npx remotion-ui view social-clip --json
npx remotion-ui list --json
npx remotion-ui add social-clip caption-highlight
现有的 Remotion 项目
cd your-remotion-project
npx remotion-ui init --existing
npx remotion-ui add social-clip
npm run dev
合成优先默认配置
| 目标 | 主合成 |
|---|---|
| 9:16 社交媒体片段 | social-clip |
| 创作者短片 | creator-reel |
| 播客片段 | podcast-clip |
| 数据解释器 | data-story |
| 产品发布 | intro |