Remotion 技能的核心目标是指导开发者用 React 组件以编程方式创作视频。一个可渲染的视频由 Composition 定义，必须显式给出 width、height、fps 与 durationInFrames；所有动画都必须由 useCurrentFrame() 驱动，禁止使用 CSS 动画和 Tailwind 动画类，因为它们会导致渲染伪影。该技能适用于 Remotion 的合成、动画、音频、字幕、转场、媒体处理或渲染，不适用于一般性的 React UI 开发。
主要能力与常用模式
动画方面，基础动画使用 useCurrentFrame() 配合 interpolate()，并且始终用 extrapolateRight: 'clamp' 进行钳制；弹簧动画使用 spring({ frame, fps })，其中 { damping: 200 } 可获得平滑、无弹跳的运动。合成使用 <Composition id, component, durationInFrames, fps, width, height>，并且总是设置显式的尺寸；动态元数据通过 <Composition> 上的 calculateMetadata 在渲染前设置时长、尺寸与 props。
时间线编排方面，排序使用 <Sequence from, durationInFrames>，此时 useCurrentFrame() 返回的是从 0 开始的局部帧；系列使用 <Series> 搭配 <Series.Sequence> 进行顺序播放，负偏移可用于重叠；转场使用 <TransitionSeries> 搭配 fade()、slide()、wipe()，总时长等于各场景之和减去转场时长。
媒体与资源方面，音频与视频使用来自 @remotion/media 的 <Audio> / <Video>，本地资源使用 staticFile()；字幕使用 createTikTokStyleCaptions()，通过 page.tokens 实现词级高亮；图片使用来自 remotion 的 <Img>，绝不要使用原生 <img> 或 Next.js 的 <Image>；GIF 使用来自 remotion 的 <AnimatedImage>，它与时间线同步，并可通过 playbackRate 控制速度；字体使用 @remotion/google-fonts 或 @remotion/fonts，在顶层调用 loadFont()，它会阻塞渲染直至字体就绪。
进阶场景方面，3D 内容使用来自 @remotion/three 的 <ThreeCanvas>，必须设置 width/height，并且禁止使用来自 R3F 的 useFrame()；文本测量使用来自 @remotion/layout-utils 的 measureText()、fitText()，需先加载字体，并让测量与渲染使用相同属性；参数使用 <Composition schema> 上的 Zod schema，顶层必须是 z.object()，且需要精确匹配 Zod 版本（请查阅 Remotion 文档）；透明视频使用 --pixel-format=yuva420p --codec=vp9，浏览器用 WebM，剪辑软件用 ProRes 4444；地图使用 Mapbox 配合 useCurrentFrame()，设置 interactive: false、fadeDuration: 0，并用 --gl=angle --concurrency=1 渲染。
常见错误与纠正方式
不要使用 CSS 动画或 setTimeout，应使用 interpolate() 和 useCurrentFrame() 实现与时间线同步的动画；不要使用原生 <img>、<video>、<audio> 标签，应使用 Remotion 的 <Img>、<Video>、<Audio> 以获得正确的预加载；不要硬编码视频时长，应使用 calculateMetadata 根据内容动态设置时长；不要省略合成的 width/height，应始终定义显式尺寸以避免渲染问题；不要在 <ThreeCanvas> 中使用 React Three Fiber 的 useFrame()，应使用 Remotion 的 useCurrentFrame()；不要忘记序列上的 premountFor，应始终预挂载序列以便在播放前预加载组件；不要忘记钳制 interpolate() 的输出，应设置 extrapolateRight: 'clamp' 防止数值超出目标范围；不要把 <Sequence> 放进 <ThreeCanvas> 而不设置 layout="none"，此时应为 <Sequence> 设置 layout="none"。
委派与参考
技能提到可通过 Explore agent 搜索代码库中的合成定义与资源用法，以发现可用的 Remotion 组件及其 props；可通过 Task agent 逐步组合序列、转场与音轨来构建带转场和音频的多场景视频；可通过 Plan agent 设计参数化合成与渲染工作流的架构。参考资料主题包括：动画与计时（插值、弹簧、缓动、帧驱动动画模式）、合成与排序（定义合成、静帧、文件夹、序列、系列与裁剪）、媒体与资源（音频、视频、图片、GIF、字体与静态文件处理）、字幕与文本（转录、SRT 导入、TikTok 风格字幕与文本动画）、转场（fade、slide、wipe、flip 及时长计算）、进阶功能（3D 内容、图表、地图、参数、透明视频与 DOM 测量）。
限制与适用范围
该技能面向 Remotion 视频创作，不适用于一般性的 React UI 开发。本次资料未提供 Remotion 的收费方式、价格、平台支持范围、渲染性能数据或具体安装命令等事实，这些内容暂未提供。