Communitygithub.com

studio1111/remotion-video-production

使用 React 和 Remotion 构建帧精确、可重复的视频,包括合成、转场、动画文本、媒体、音频、字幕以及渲染验证。

remotion-video-production 是什么?

该技能旨在指导 AI 代理(如 Claude Code、Cursor 等)高效地利用 Remotion(一个基于 React 的视频渲染库)进行视频制作。它提供了一套结构化的开发工作流程,从项目初始化、合成定义到渲染验证,确保开发者能够创建帧精确、可重复播放的视频内容。技能支持核心的视频制作功能,包括合成(Compositions)、转场(Transitions)、动画文本、媒体文件处理、音频集成、字幕以及最终的渲染验证。该技能要求遵循 Remotion 的官方 API 最佳实践,例如使用 `useCurrentFrame()` 和 `useVideoConfig()` 等基于帧或时间的钩子,避免依赖不稳定的壁钟 CSS 动画。它还强调代码质量,如避免不必要的每帧重渲染、保持资源路径的可复现性,并验证最终的输出文件是否符合预期的时长、尺寸和帧率。支持平台包括任何可以执行 Node.js 和 React 脚本的环境,并强调了与官方 Remotion 技能集(remotion-dev/skills)的兼容性。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/studio1111/AI-Motion-Graphics-Studio/tree/main/.agents/skills/remotion-video-production

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Remotion 视频制作

上游

官方 Remotion 代理技能:https://github.com/remotion-dev/skills 官方文档:https://www.remotion.dev/docs/ai/skills

如需获取完整的官方技能集及其引用的规则文件,请在消费工作区中使用 npx skills add remotion-dev/skills 进行安装。本本地技能是一个工作流指南,并非上游发行版的逐字拷贝。

工作流

  1. 检查现有项目并保留用户所做的更改。
  2. 如果不存在项目,请使用官方创建工作流并验证包的兼容性。
  3. 明确指定合成 ID、尺寸、帧率 (FPS)、持续时间、属性 (props) 和资源位置。
  4. 使用基于帧/时间的 API,例如 useCurrentFrame() 和 useVideoConfig();不要依赖壁钟 CSS 动画来控制渲染时序。
  5. 使用插值/弹簧辅助函数,并酌情添加有意的缓动和裁剪范围。
  6. 排列场景和转场,使其帧计数和重叠产生预期的总持续时间。
  7. 使用支持的媒体组件和静态资源辅助函数;在渲染前等待异步资源加载完成。
  8. 在允许的环境下,启动 Studio 预览并在编辑或渲染前进行检查。
  9. 仅在用户请求时执行渲染,然后检查导出的文件,验证其持续时间、尺寸、帧率、音频和代表性帧。

质量规则

  • 避免不必要的每帧 React 工作和昂贵的副作用。
  • 保持字体、图像、音频和视频路径的可复现性。
  • 避免无效的帧计算、负数的持续时间、缺失的资源以及无界的插值。
  • 检查文本适配、从右到左 (RTL) 文本塑形、字幕时序以及视觉连续性。
  • 在部署前,验证当前的 Remotion 许可协议和商业使用条款。

相关技能