让 AI 掌握 React 视频制作 Remotion 最佳实践

解决 React 视频开发痛点：当需要利用 Remotion 框架高效生成专业视频时，AI 提供针对 Three.js 3D 内容、关键帧提取、字幕合成、音频处理及 TailwindCSS 样式应用的行业级最佳实践与代码规范。

为什么需要这个技能

Remotion 是将 React 组件与视频合成引擎完美结合的工具，允许开发者像写页面一样写视频。然而，框架涉及复杂的渲染循环、帧率控制、材质加载及音频混合机制。

单纯依靠通用编程知识往往难以处理特定的渲染细节，例如如何利用 Mediabunny 检查浏览器解码能力，或通过规则动态计算 Composition 时长。本技能提供特定领域的 Domain-Specific Knowledge（领域知识），确保视频输出在格式、画质及逻辑上符合预期，避免合成错误。

AI 通过调用一系列预设规则文件来指导代码编写：

场景与 3D 内容：引用 rules/3d.md 和 rules/compositions.md，确保 Three.js 场景正确渲染，并合理定义 Composition 的默认属性和动态元数据。
动画与时间控制：参考 rules/animations.md 和 rules/timing.md，选择线性、缓动或弹簧插值曲线，并掌握动画的延迟、修剪及序列化处理。
多媒体资产集成：利用 rules/assets.md、rules/fonts.md 及 rules/images.md 规范，指导 AI 正确加载 Google Fonts、本地字体及嵌入视频/图片资源。
音频与字幕处理：依据 rules/audio.md、rules/captions.md 及 rules/transcribe-captions.md，实现音频导入、音量控制、SRT 字幕导入及语音转录生成字幕。
特效与提取：使用 rules/extract-frames.md 在特定时间戳提取帧，或利用 rules/gifs.md 在时间轴上同步显示 GIF。
样式与布局：结合 rules/tailwind.md 应用样式类，并利用 rules/measuring-dom-nodes.md 测量元素尺寸以适应容器。

通过阅读具体规则文件（如 rules/trimming.md 或 rules/text-animations.md），开发者可将复杂的视频逻辑拆解为可复用的代码片段。

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。

暂无推荐