1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | remotion-interactivity-remotion-dev-skills |
| 作者/维护者 | Remotion（remotion-dev 官方团队，视频框架 Remotion 的所有者） |
| 来源链接 | https://github.com/remotion-dev/skills/tree/main/skills/remotion-interactivity |
| 许可证 | Remotion License（个人与小型公司可免费使用，达一定规模的商业机构需付费授权），GitHub API 未能自动识别为标准 SPDX 许可证，已直接读取主仓库 LICENSE.md 确认条款 |
| GitHub Stars | 4,205（合集仓库 remotion-dev/skills 整体数字，来自 GitHub API；该数字属整个技能合集，不代表本技能自身热度） |
| Forks | 484（同上，合集整体） |
| 最新版本 | 4.0.506（SKILL.md frontmatter 标注，随 Remotion 框架版本同步发布） |
| 安装方式 | 见第 10 章 |
2. 功能介绍与亮点
Remotion Studio 提供一个可视化编辑面板，能让开发者用鼠标直接拖拽、缩放、旋转视频里的元素，或在时间轴上编辑关键帧曲线，编辑结果会写回源代码。但这个能力依赖 Studio 对 JSX 结构做静态分析——代码写法不符合约定时，对应控件就会变灰不可编辑。remotion-interactivity 正是官方针对这套约定整理的编码规范：
Interactive组件包装：任意 HTML/SVG 元素（<div>等）用Interactive.Div等包装后即可在 Studio 中被选中、拖拽、缩放、旋转，并编辑其 CSS 样式与关键帧。- 内联优先原则：
style必须是字面量对象，禁止引用外部常量、对象展开或数学运算；interpolate()调用必须直接写在样式属性里，输出范围、缓动函数、外推方式都要硬编码，仅允许对frame、durationInFrames、fps等做有限的加减乘除。 - 属性选择建议：动画属性优先用
scale/translate/rotate，避免使用字符串拼接的transform，因为只有前者能被 Studio 识别为可编辑值。 - 合成元数据内联规则：
<Composition>的width/height/fps/durationInFrames/defaultProps需保持内联字面量而非提取变量，这样 Studio 的属性编辑器才能把可视化修改写回代码。 - 文档逐条给出“✅ 推荐写法“与”❌ 破坏可编辑性的写法“对照代码，覆盖
Interactive包装、内联样式、interpolate()、特效数组等场景。
3. 适用场景
所属分类：内容创作与知识管理（产出物是视频动画元素的编码规范，服务于视频内容创作实践本身，而非通用前端界面搭建）。
适用人群：使用 Remotion 编写程序化视频、且希望在 Studio 里用鼠标微调动画细节（而不是每次改数值都重新写代码再刷新预览）的开发者与内容团队；当元素在 Studio 中无法被选中或编辑变灰时，用它排查代码写法问题。
4. 跨 Agent 兼容性
| Agent 生态 | 结论 | 依据 |
|---|---|---|
| Claude Code | 原生支持 | 仓库 README 将 Claude Code 列为受支持 agent，技能以 /remotion-interactivity 斜杠命令触发，遵循标准 SKILL.md 格式 |
| Codex | 原生支持 | 仓库 README 同样将 Codex 列为受支持 agent，可通过同一套 npx skills add 安装 |
| OpenClaw | 未验证 | 已抓取材料（仓库 README、SKILL.md）未提及 OpenClaw |
| Hermes Agent | 未验证 | 已抓取材料未提及 Hermes Agent |
5. 推荐理由
程序化视频最容易被低估的坑不是“动画效果写对了没有”，而是“写对了但 Studio 编辑不了”——很多开发者第一次遇到元素变灰、无法拖拽调整时并不知道原因出在把样式提取成了常量或用了 transform 字符串拼接。remotion-interactivity 把 Studio 静态分析背后的约定整理成一份逐条对照的规范，让开发者一次性按官方约定写代码，后续调整动画细节时可以直接在可视化界面里拖拽完成，不必反复改代码、重新预览。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 8 | 官方 Remotion 团队直接出品；所属技能矩阵在 skills.sh 上有 12.6 万+ 次安装，为该平台全局安装量第 4 位、程序化视频类目第一；多家独立科技媒体/博客（Skywork、Gaga.art、Crepal 等）分别撰文介绍该技能矩阵；GitHub issue 区可见二十余位不同独立开发者提交的文档修正与功能建议 |
| 可用性 | 9 | 规则条目清晰、每条均配“推荐/禁止”代码对照，无需额外配置即可使用；该技能目录近 5 次提交横跨最近 5 天、几乎每日更新；个人与小型团队使用免费，无强制付费依赖 |
| 安全性 | 9 | 内容为纯技术写作指导与代码示例，未发现可疑指令，不涉及外部网络请求或凭据索取 |
安全检查清单： ① 是否执行 shell 命令：技能本身不引导执行任何 shell 命令，仅为代码编写规范 ② 运行时是否联网外发数据：不涉及 ③ 是否要求 API key/凭据：不涉及 ④ 可疑指令：未发现 ⑤ 作者/组织信誉：Remotion 官方团队，公开身份明确，无刷星或造假迹象 ⑥ License：Remotion License，条款明确（个人/小型公司免费，规模企业需付费） ⑦ 最近维护时间：该技能目录最近提交为近日，在近 3 个月维护窗口内且频率极高
7. 跟同类 Skills 相比的优势
| 竞品 | 定位 | 与本技能的差异 |
|---|---|---|
同合集的 remotion-markup |
覆盖动画驱动、媒体元素、字幕、3D、地图等几乎全部视频创作场景的综合写法指南 | 是一份广度优先的全场景参考手册；remotion-interactivity 只聚焦“如何让代码在 Studio 里可视化可编辑”这一个窄而深的问题，两者互为补充，实践中常配合使用 |
同合集的 remotion-best-practices |
Remotion 项目的通用入门与整体规范，官方建议“不确定用哪个技能时先看这个” | 是覆盖全局的入口技能，未展开 Studio 可视化编辑背后的静态分析约定；remotion-interactivity 专门解释这层容易被忽略的机制 |
8. 用户评价
该技能目前在第三方平台尚无专门针对交互式编辑功能本身的具名用户评价。GitHub issue 区可见多位独立开发者围绕整个技能矩阵提交的文档修正与功能建议，反映该技能集持续被使用与打磨。
9. 其他补充
remotion-interactivity 与同仓库的 remotion-markup（动画与媒体写法）、remotion-create（项目脚手架）等技能相互引用、职责分工明确，是一套架构统一、持续演进的官方技能矩阵的组成部分。
10. 安装使用方式
- 手动复制（推荐）：将
remotion-dev/skills仓库中skills/remotion-interactivity/目录克隆或下载后，复制到 Claude Code / Codex 的技能目录（如.claude/skills/remotion-interactivity/） - 官方一键安装：运行
npx skills add remotion-dev/skills安装整套 Remotion 技能合集（含本技能），或在新建 Remotion 项目时运行bun create video并按提示选择安装技能 - 安装后注意事项：安装后无需重启 agent；在 Remotion Studio 里元素无法被选中/编辑、或需要让动画参数支持可视化调整时会被自动匹配，也可用
/remotion-interactivity显式触发；使用前需已有可运行的 Remotion 项目环境（Node.js + Remotion 依赖）
11. 注意事项
- Remotion License 为个人/小型公司免费、达一定规模的商业机构需付费授权的双层许可，不是完全宽松的开源许可证，企业用户使用前应自行核实是否需要购买商业授权
- 官方一键安装命令
npx skills add所依赖的第三方安装器vercel-labs/skills存在两个尚未修复的公开 issue，分别指控其在未明确告知的情况下上传使用数据、以及审计上报机制不完全受禁用开关约束；选择该安装路径的用户可改用上文的手动复制方式规避此风险 - 合集仓库整体 4,205 星与 484 forks 属整个 remotion-dev/skills 技能矩阵，不代表本技能自身的独立采用热度
- 该技能高度绑定 Remotion Studio 的可视化编辑功能，若开发流程完全不使用 Studio 的拖拽/关键帧编辑面板，价值会大打折扣