本技能用于指导编写 Remotion 的 React 标记（Markup），聚焦内容、动画与特效的最佳实践。若场景不相关，应改用 Remotion Best Practices。
用途：为 Remotion 视频合成提供标记编写规范，确保动画、时序与特效在 Studio 中可正确编辑和渲染。
主要能力与规则：
- 保留用户在对话外所做的代码修改，检测到意外改动时不要覆盖，应视为有意或先确认。
- 在合成或场景组件内，用 useVideoConfig() 获取 fps，所有秒到帧的换算（from、trimBefore、durationInFrames、premountFor 等）都基于它，表达式保留在 JSX 节点上，如 trimBefore={4 * fps}。
- 用 useCurrentFrame() 和 interpolate() 驱动动画；CSS transition/animation 与 Tailwind 动画类不会正确渲染，需重构。
- 用 Easing.bezier() 和 Easing.spring() 自定义时序。
- 可编辑属性的场景优先用 Interactive.withSchema({wrapInSequence: true, layout: 'absolute-fill'})，内部可返回 fragment；可复用场景注册为 connected compositions。
- 时序直接放在支持该属性的组件上，避免冗余 <Sequence> 包裹；支持 premountFor 的组件给一秒预挂载 premountFor={fps}，包括媒体、交互组件、<Sequence>、<TransitionSeries.Sequence>、<TransitionSeries.Overlay> 及嵌套项。
- Studio 编辑创建条目的 JSX 源节点，每个应独立编辑的注册、片段、场景、图层、序列都应是独立 JSX 节点，属性内联。
- interpolate() 调用内联在 style 中，优先用 scale、translate、rotate 而非 transform；scale 动画用 output: 'perceptual-scale'。
- 资源放在项目根 public/ 目录，用 staticFile() 引用；视频音频用 @remotion/media 的 <Video>、<Audio>，图片用 <CanvasImage>，动图用 <AnimatedImage>（非 Chrome 用 @remotion/gif）。
- 特效可直接应用于 <Img>、<CanvasImage>、<AnimatedImage>、<Solid>、<HtmlInCanvas>、<Video>、<Gif>、<RemotionRiveCanvas> 及 @remotion/shapes 组件；普通 HTML、<Interactive.*>、<AbsoluteFill>、<Sequence> 不直接接受特效，需包在 <HtmlInCanvas> 中。
- 内置特效来自 @remotion/effects，涵盖颜色色调、模糊拖尾、光照、扭曲变换、纹理图案、边缘、像素化与转场等类别。
- 安装模块用 npx remotion add，如 npx remotion add @remotion/media。
适用场景：Remotion 视频合成中的标记编写、动画时序、媒体嵌入、特效应用、场景结构与可编辑性设计。
限制：CSS 动画与 Tailwind 动画类不可用；部分组件不支持直接特效；具体参数、导入与设置需参考对应文档（effects.md 等）。