Communitygithub.com

espennilsen/pi

Remotion 最佳实践——在 React 中创建视频

pi 是什么?

该技能为使用 Remotion 进行视频创作的开发者提供了全面的领域知识和最佳实践。它涵盖了从项目初始化、Studio 实时预览到单帧渲染检查的完整工作流。此外,还包括字幕处理、FFmpeg 视频操作、音频可视化、音效、3D 动画、图表、字体加载、Lottie 动画、关键帧提取等众多具体功能的详细规则和代码示例。该技能适用于 Cursor、Claude Code 等支持 .cursorrules 或类似规则文件的 AI 编码助手,通過引用独立的规则文件(如 rules/subtitles.md)来获取特定功能的详细信息,从而减少上下文窗口占用。用户只需在需要时加载相应的规则文件即可获得针对性的指导。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/espennilsen/pi/tree/HEAD/skills/remotion

在你喜欢的 AI 中提问

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

文档

何时使用

当您在处理 Remotion 代码时,使用此技能可以获取领域特定知识。

新项目初始化

当您位于空文件夹或没有现有 Remotion 项目的工作区时,请使用以下命令搭建一个新项目:

npx create-video@latest --yes --blank --no-tailwind my-video

将 my-video 替换为合适的项目名称。

启动预览

启动 Remotion Studio 来预览视频:

npx remotion studio

可选:单帧渲染检查

您可以通过 CLI 渲染单帧来检查布局、颜色或时间是否正确。 对于琐碎的编辑、纯重构或当您已从 Studio 或先前的渲染中获得足够信心时,可以跳过此步骤。

npx remotion still [composition-id] --scale=0.25 --frame=30

在 30 fps 下,--frame=30 是 1 秒标记(--frame 从零开始)。

字幕

处理字幕或副标题时,请加载 ./rules/subtitles.md 文件以获取更多信息。

使用 FFmpeg

对于某些视频操作(例如修剪视频或检测静音),应使用 FFmpeg。请加载 ./rules/ffmpeg.md 文件以获取更多信息。

静音检测

当需要检测并修剪视频或音频文件中的静音片段时,请加载 ./rules/silence-detection.md 文件。

音频可视化

当需要可视化音频(频谱条、波形、低音反应效果)时,请加载 ./rules/audio-visualization.md 文件以获取更多信息。

音效

当需要使用音效时,请加载 ./rules/sfx.md 文件以获取更多信息。

如何使用

阅读各个规则文件以获取详细的说明和代码示例:


来源:remotion-dev/skills

相关技能