ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Remotion Agent Plugin(Cursor)安装与开发指南:让 AI 编码助手学会用 React 制作视频

Remotion Agent Plugin(Cursor)安装与开发指南:让 AI 编码助手学会用 React 制作视频 Remotion Agent PluginCursor安装与开发指南让 AI 编码助手学会用 React 制作视频【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion导读Remotion Agent Plugin 是 Remotion 官方维护的便携式portableAgent 插件它把用 React 编程式制作视频的领域知识——动画、音频、字幕、3D、转场、图表、文字特效与渲染——封装成可被兼容编码代理coding agent读取的技能包Skills。本文以仓库中面向 Cursor 的官方说明 packages/agent-plugin/README.cursor.md 为核心讲解该插件的两种安装路径Agent Plugins 市场安装与 Cursor 本地安装、安装后实际写入磁盘的文件结构以及如何以 Remotion monorepo 为唯一事实来源进行本地开发与验证。什么是 Remotion Agent Plugin根据 README.cursor.md 的定义该插件是Remotion 官方提供的便携式 Agent Plugin作用是教会兼容的编码代理如何用 React 创建视频覆盖能力包括动画animations音频audio字幕captions3D 场景转场transitions图表charts文字特效text effects渲染rendering它不是一段普通提示词而是一套按标准目录组织、带清单文件manifest的技能集合。仓库中的 packages/agent-plugin/plugin.json 给出了它的元信息字段值含义nameremotion插件在 Agent 客户端中的唯一标识version4.0.521与 package.json 中的remotion/agent-plugin版本保持一致descriptionRemotion video creation skills — best practices, animations, audio, captions, 3D, and more for building programmatic videos with React.面向市场展示的一行能力摘要authorRemotionhiremotion.dev维护方信息licenseMIT许可证keywordsremotion、video、react、animation、composition、rendering、ffmpeg、captions、audio便于检索的标签提示该清单遵循 agent-plugins.org 的1.0.0schema见plugin.json中的$schema字段版本号与包版本强一致这一约束同时由单元测试固定见下文测试验证。安装 Remotion Agent Plugin官方文档给出了两种安装途径。README.cursor.md 明确指出该便携式包面向 GitHub Copilot 与 Cursor 这类 Agent 客户端。方式一从兼容的 Agent Plugins 市场安装最直接的路径是从兼容的Agent Plugins marketplace中安装 Remotion。市场化的安装通常在客户端内部完成搜索插件 → 一键安装无需手动操作文件系统。仓库内附带的 packages/agent-plugin/marketplace.json 展示了市场清单的组织形态{ name: remotion, interface: { displayName: Remotion }, plugins: [ { name: remotion, source: { source: local, path: ./.codex/plugins/remotion }, policy: { installation: AVAILABLE, authentication: ON_INSTALL }, category: Design } ] }可以观察到几个设计决策policy.installation AVAILABLE插件允许被安装policy.authentication ON_INSTALL鉴权在安装时触发category Design在市场中归类于设计类。方式二在 Cursor 中本地安装官方为Cursor 本地开发给出了明确命令将插件克隆到 Cursor 的本地插件目录git clone cursor-plugin 发布仓库地址 ~/.cursor/plugins/local/remotion随后重启 Cursor即可生效。README.cursor.md 特别强调了这一点Restart Cursor after installing the local plugin.需要注意的目录约定Cursor 会把~/.cursor/plugins/local/下的每个子目录识别为一个本地插件插件目录名这里为remotion对应清单中的name因为克隆会带上仓库的版本文件本地安装适合跟随最新改动做体验/调试正式使用仍建议走市场安装以获取自动更新的版本。安装后你会得到什么技能目录结构仓库中的 packages/codex-plugin/skills/ 与 agent-plugin 的构建产物同源展示了技能包落地后的形态顶层每个技能目录内都有一份SKILL.md技能入口技能内部再细分为能力清单。以remotion-markup为例其目录中还包含按主题拆分的参考文档compositions.md、transitions.md、audio.md、timing.md、lottie.md、ffmpeg.md等。技能覆盖主题的完整清单可参考 packages/skills/README.md技能用途示例提示词/remotion-best-practices总入口不确定用哪个时选它——/remotion-create创建新的 Remotion 项目或 CompositionMake a promo video for a record store/remotion-markupRemotion React 标记编写最佳实践Composition、动画、排版、媒体、音视频、字体、时序Create an animated title card using Inter./remotion-studio启动 Studio 预览视频/remotion-studio/remotion-render渲染为视频或静帧/remotion-render/remotion-maps地图动画静态地图、路径动画、Mapbox/MapLibre/MapTiler、GeoJSON、CesiumJS 3D 飞行Animate a route from Los Angeles to New York.../remotion-captions字幕与说明文字——/remotion-saasRemotion 驱动应用的架构指引Turn my video into a SaaS./remotion-interactivityStudio 中元素可编辑性——/remotion-docs检索 Remotion 官方文档并以 Markdown 拉取页面How to set up Remotion Lambda?/remotion-upgrade升级 Remotion 及关联技能/remotion-upgrade/remotion-multimedia浏览器端多媒体元数据处理——安装插件后Agent 会在需要时调用这些技能来指导写代码—预览—渲染的完整闭环。本地开发monorepo 是唯一事实来源README.cursor.md 的 Development 一节揭示了该项目一个关键工程约定This repository is generated from thepackages/agent-pluginpackage in the Remotion monorepo. Changes made directly in this repository will be overwritten by the release pipeline.即Cursor 插件发布仓库的内容是由 Remotion monorepo 中的packages/agent-plugin包生成的。若直接在发布仓库内修改改动会被发布流水线覆盖问题反馈与代码贡献应提交到 Remotion monorepo本仓库。换句话说你要改的不是某个 Cursor 专用副本而是 monorepo 里唯一的知识源。构建脚本一次构建适配多个客户端packages/agent-plugin/build.mts 是理解便携化的钥匙。它以--client区分目标客户端目前仅支持codex与cursor两个取值# 默认构建 Codex 版输出到 ./skills bun build.mts # 构建 Cursor 版并指定输出目录 bun build.mts --clientcursor --output./dist-cursor其核心逻辑是从packages/skills/skills/复制各技能目录 → 预处理内嵌技能prepareEmbeddedSkills→ 按客户端注入差异内容。两个客户端的行为差异由构建期改写实现Codex 专属向remotion-best-practices/SKILL.md追加 Codex troubleshooting 章节指导用npx remotion studio --no-open启动 Studio、用--webpack-poll 1000规避EMFILE: too many open files, watch文件监听上限对应 build.mtsCursor/通用版不含 Codex 专属排错章节且remotion-create技能被改写为默认启动预览服务器并在 Agent 客户端可用的浏览器中打开精确 URL对应 build.mts。也就是说同一套知识在不同 Agent 上会呈现为适配各自交互习惯的行为Cursor 用户会体验到创建后自动在代理浏览器打开预览而不会被引导去操作 Codex 专属的系统浏览器开关。测试验证可移植构建的自动化保障仓库用一套 Bun 测试保证发布质量入口见 packages/agent-plugin/package.json 的test脚本与 test/plugin.test.ts。它验证的关键不变量包括清单版本一致性plugin.json与package.json的版本号、与 Codex 清单版本必须一致schema 完整性plugin.json顶层键集合必须精确等于 schema 规定的字段集合Vally 校验通过调用microsoft/vally的runLint检查技能包是否合规且lint出的技能名与构建产物目录一一对应目录/链接纪律只有顶层技能使用SKILL.md作为发现文件名内嵌技能改用REFERENCE.md技能内 Markdown 的相对链接不允许越出所属技能目录Cursor 可移植构建可过 lint真实执行bun build.mts --clientcursor --output临时目录并断言其不包含 Codex troubleshooting、且remotion-create含在 Agent 客户端浏览器打开精确 URL的指令显示名与斜杠命令一致每个技能的agents/openai.yaml中display_name必须形如/技能名。本地开发操作流若要在本仓库中开发并验证 Cursor 版插件可参考以下流程需先安装 Bun仓库根目录使用 bun.lock 锁定依赖# 1. 构建 Cursor 版技能包到临时目录 cd packages/agent-plugin bun build.mts --clientcursor --output/tmp/remotion-cursor-skills # 2. 运行格式 / Lint / 测试 bun run formatting bun run lint bun run test由于 build.mts 每次构建都会先清空并重建输出目录重复构建是幂等安全的产物目录默认packages/agent-plugin/skills只应作为生成物对待不应手工改动。与 Agent Skills 生态的关系README.cursor.md 强调的便携式并非孤例。Remotion 在 monorepo 中还维护了面向其他 Agent 的适配包例如packages/codex-plugin、packages/claude-code-plugin、packages/kimi-code-plugin它们与packages/agent-plugin共享同一套知识源packages/skills。这套技能同时以独立的 Agent Skills 形式分发见 packages/skills/README.md可通过npx skills add直接加入项目也可在bun create video创建新项目时按提示选择添加。因此可以这样理解本插件在整个体系中的位置知识层packages/skills唯一的技能内容源打包层packages/agent-plugin把技能编译为符合 Agent Plugins 规范的便携插件并按codex/cursor等客户端裁剪行为发布层cursor-plugin 等发布仓库README.cursor.md 就是随 Cursor 发布仓库附带的说明文件但其内容源头在本 monorepo。常见问题与注意事项本地安装后插件不生效按官方说明克隆到~/.cursor/plugins/local/remotion后必须重启 Cursor想改插件内容却找不到入口不要直接改发布仓库改动会被流水线覆盖应回到本仓库的packages/agent-plugin行为适配与packages/skills知识内容提交再经发布流程生成新的插件版本版本号对不上plugin.json与包的版本必须与package.json同步plugin.test.ts已把该约束固化为失败即报错的测试Cursor 与 Codex 行为为何不同这是设计使然——构建脚本会为 Codex 追加系统浏览器相关的排错指引而为 Cursor 生成在代理浏览器打开预览的默认行为Cursor 构建的产物已经过测试保证不含 Codex 专属内容。结语Remotion Agent Plugin 的工程实践值得借鉴它把AI 如何帮开发者做视频沉淀为单一知识源 按客户端裁剪 自动化校验的发布流水线。对使用者而言只需在 Agent Plugins 市场中安装、或在 Cursor 中克隆到~/.cursor/plugins/local/remotion并重启对二次开发者而言一切修改都应回到本仓库的 packages/agent-plugin 与 packages/skills再交由构建与测试管线产出稳定的便携插件。想深入探究清单结构、技能组织或 Cursor/Codex 行为差异的读者可直接阅读 plugin.json、marketplace.json、build.mts 与 test/plugin.test.ts。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表