本技能用于在 Remotion 中按特定方式编写标记（markup），让 Remotion Studio 能够识别代码结构并使其可交互。其适用前提是上游工作流与用户目标一致，且任务需要该技能中记录的流程。
主要能力 按规范编写标记后，Remotion Studio 可实现：点击选中元素、拖拽、缩放与旋转、编辑 CSS 样式、让关键帧和缓动值可编辑。若标记对 Studio 而言过于复杂，相应值会置灰。
版本与片段范围 需使用与这些 Studio 功能匹配的已安装 Remotion 版本；示例省略导入与应用辅助函数。calculateMetadata 必须是函数，而不是由 async useMemo 工厂返回的 Promise。应先在 Composition 上提供其 props 要求的静态回退 width/height，再返回动态覆盖值。保存覆盖源码前，应检查 Studio 实际的编辑差异。
使 HTML 元素可交互 除 <Img>（本身已可交互）外，每个 HTML 和 SVG 元素（如 <div>）都可通过 Interactive 转为可交互，例如 <Interactive.Div name="Greeting card" style={{fontSize: 80, padding: 24}}>Hello</Interactive.Div>。这样即可在 Studio 中设置样式与关键帧。需注意合理使用：若一个组件元素过多，时间线可能变得杂乱。
优先内联文本 若文本固定且仅使用一次，应直接写在交互元素内部，而非提取为常量；仅当文本动态或复用时才使用 prop 或变量。
为交互元素提供描述性名称 给元素添加 name prop 以便识别，避免计算名称，应硬编码。示例中为 Interactive.Div、Img、Video、Sequence 分别设置 name。
保持所有 CSS 样式内联 最佳方式是直接向 style 传入普通对象，不引用常量、不做对象展开、不做数学运算。非内联样式、展开、引用常量、数学运算均不受支持。
使用 interpolate() 做动画 动画应写成针对变化属性的内联 interpolate() 调用。输出范围、缓动、外推和输出属性应使用硬编码值。输入范围可额外使用直接从 useVideoConfig() 解构的 durationInFrames、fps、width 和 height。支持裸标识符（如 durationInFrames）、与数字相乘（如 2 * fps 或 fps * 2）、减去数字（如 durationInFrames - 1）。示例展示了 scale、rotate、translate 的内联 interpolate 用法。将插值结果存入变量、在任意变量上做数学运算、对非 frame 变量插值均不受支持。
使用 scale、translate、rotate CSS 属性 避免使用 transform CSS 属性；如有可能，使用 scale、rotate 和 translate，因为只有它们可交互编辑。
保持 composition 元数据内联 搭建 composition 时，width、height、fps、durationInFrames 和 defaultProps 应内联，且不做类型断言。当 defaultProps 是 <Composition> 或 <Still> 上的内联对象字面量时，Props 编辑器可将可视化编辑保存回代码。动态部分仅使用 calculateMetadata()。不应提取 defaultProps，也不应使用不必要的 useMemo 或类型断言。
effects 也应内联 effects 数组不应计算生成。设置关键帧的规则与 interpolate() 相同：所有值应硬编码，包括输入范围、输出范围、缓动、外推和输出属性。示例展示了内联参数与稳定数组形状；条件 effect、非内联值不可动画。若某版本需要 effects 而另一版本不需要，应渲染为不同元素。
使自定义组件可交互 使用 Interactive.withSchema() 时，应在 schema 中包含 Interactive.baseSchema，以保留修剪和可见性等标准时间线控件。使自定义用户态组件可交互的方法需参考“Make a component interactive”。
视频编辑 若 Remotion 组件主要由视频和音频剪辑构成，可参考视频编辑相关最佳实践，以结构化标记使剪辑在时间线中可交互编辑。
限制 该技能为导入的上游技能；执行前需核实凭据、权限和安全边界。它不能替代针对具体环境的验证、测试或维护者审核。