Remotion Video Creation Skill 是 Everything Claude Code 针对 React + Remotion 视频创作场景打造的领域知识库，内置 29 条规则覆盖动画、音频、字幕、3D、数据可视化、Lottie、TailwindCSS 等核心环节。相比手动查阅 Remotion 文档或零散社区经验，Skill 体系将最佳实践结构化，支持 Claude Code、Codex、Cursor 等 AI 编程助手自动调用，极大提升视频项目的开发效率、可维护性与自动化水平。

Everything Claude Code Remotion Video Creation Skill：React 视频创作的 29 条领域规则覆盖动画、音频与字幕

Remotion Video Creation Skill 是 Everything Claude Code 插件体系下专为 React + Remotion 视频开发场景设计的专业技能集。它将 Remotion 生态中最常见、最易踩坑的 29 个细分领域知识，提炼为一套规则体系，涵盖动画、音频、字幕、3D、Lottie、TailwindCSS、数据可视化、转场、动态排版等。Skill 通过与 Claude Code 等 AI 编程助手深度集成，让开发者无需反复查文档或社区问答，在实际项目中即可获得结构化、可落地的最佳实践建议。

如果你初次接触 Everything Claude Code，可参考完全指南了解整体架构与 Skill/Agent/Hook/Rule 的协作模式。

1. 这个 Skill 解决了什么问题？

传统做法的痛点：

• Remotion 官方文档覆盖面有限，复杂场景（如 3D、音频剪辑、字幕导入）需自行摸索或查阅社区零散资料。
• 动画、音频、字幕、数据可视化等跨领域需求，缺乏一站式的最佳实践。
• AI 编程助手在处理 Remotion 代码时，容易遗漏细节或踩到性能/兼容性坑。
• 团队协作时，代码风格和实现方式不统一，维护成本高。

Remotion Video Creation Skill 的优势：

• 内置 29 条覆盖 Remotion 各核心环节的领域规则，涵盖 3D、动画、音频、字幕、Lottie、TailwindCSS、数据可视化、转场等。
• 每条规则都配有详细的使用说明和代码示例，AI 可自动调用或开发者手动查阅。
• 支持与其他 Claude Code Agent/Skill/Hooks 协同，实现自动化视频生成、字幕批量导入、音频剪辑、动态排版等高级场景。
• 适合从初学者到深度定制用户，极大提升 Remotion 项目的开发效率和质量。

2. 触发条件：什么时候会自动激活？

• 当 Claude Code、Codex、Cursor 等 AI 编程助手检测到你在编辑、生成或审查 Remotion 相关代码（如 .tsx 组件、remotion 目录、视频合成脚本等）时，会自动加载 remotion-video-creation Skill。
• 你也可以在 Claude Code 的 MCP（Multi-Component Pipeline）或 Agent 配置中，手动指定该 Skill 参与 Remotion 项目的代码生成、重构、审查等流程。
• 支持与PreToolUse / PostToolUse / Stop Hooks联动，实现自动化视频生成、渲染前检查、输出后校验等全流程自动化。

3. 实际项目中的使用流程（Step by Step）

步骤 1：Skill 自动加载/手动激活

• 在 Remotion 项目目录下编辑或生成代码时，Claude Code 自动检测并激活 remotion-video-creation Skill。
• 也可在 .claude/skills.json 或 MCP 配置中手动添加：

{
  "skills": [
    "remotion-video-creation"
  ]
}

步骤 2：AI 编程助手自动应用领域规则

• 你在 VSCode/Cursor 等编辑器中输入 Remotion 相关需求（如“为视频添加 TikTok 样式字幕”、“引入 Lottie 动画”、“音频自动剪辑到 30 秒”），AI 会自动检索 Skill 中的对应规则，生成最佳实践代码。
• 例如，添加字幕时，AI 会优先采用 display-captions、import-srt-captions、transcribe-captions 等规则，实现 TikTok 风格字幕、.srt 导入、自动语音转字幕等功能。

步骤 3：查阅/调用具体规则文档与示例

• Skill 内部将 29 条规则独立拆分为 Markdown 文件，可直接查阅详细说明与代码片段。例如：
  • 3D 内容集成：Three.js + React Three Fiber 如何在 Remotion 中渲染 3D。
  • 动画基础：Remotion 动画的基本模式与最佳实践。
  • 音频剪辑：音频导入、裁剪、变速、变调等高级用法。
  • [字幕导入与高亮](rules/display-captions.md, rules/import-srt-captions.md)：TikTok 风格字幕、.srt 文件导入、逐词高亮。
  • Lottie 动画：如何在 Remotion 中集成 Lottie 文件。
  • TailwindCSS：在 Remotion 中安全使用 TailwindCSS。
• 你也可以在 Claude Code 的命令面板输入“Remotion 视频最佳实践”，AI 会自动列出所有可用规则及其简要说明。

步骤 4：与其他 Agent/Skill 协同

• 常见配套 Agent：
  • Code Reviewer Agent：结合 remotion-video-creation Skill，对 Remotion 组件代码做动画、音频、字幕等专项审查，输出领域级改进建议（详见代码审查代理）。
  • Video Editing Skill：与 FFmpeg、ElevenLabs、fal.ai 等工具链协同，实现更复杂的视频剪辑与多模态处理（详见视频剪辑 Skill）。
  • Doc Updater Agent：自动将 Skill 规则变更同步到项目文档，保持团队知识一致性（详见文档自动更新代理）。
• 与Rules 体系集成，确保所有 Remotion 相关输出都符合统一的领域规范。

步骤 5：输出示例

示例 1：自动生成带 TikTok 风格字幕的视频组件

import { Caption, useCurrentFrame } from '@remotion/captions';

export const TikTokCaptionedVideo = ({ videoSrc, srtFile }) => {
  const frame = useCurrentFrame();
  return (
    <>
      <Video src={videoSrc} />
      <Caption
        src={srtFile}
        highlightWordAtFrame={frame}
        style={{ position: 'absolute', bottom: 40, width: '100%' }}
      />
    </>
  );
};

AI 会自动根据 Skill 规则选择最佳的字幕组件、样式和高亮逻辑。

示例 2：音频自动截断并淡入淡出

import { Audio } from 'remotion';

export const TrimmedAudio = ({ src }) => (
  <Audio
    src={src}
    startFrom={30} // 从第 30 帧开始
    endAt={450}    // 到第 450 帧结束
    volume={f => interpolate(f, [30, 60], [0, 1])} // 前 30 帧淡入
  />
);

Skill 会自动提示如何用 interpolate 实现音量淡入淡出。

示例 3：Lottie 动画集成

import { Lottie } from '@remotion/lottie';

export const AnimatedLogo = ({ lottieJson }) => (
  <Lottie animationData={lottieJson} width={200} height={200} />
);

Skill 指导如何配置 Lottie 动画参数，避免兼容性和性能陷阱。

4. 与其他 Skill 的协作关系

• 与Frontend Patterns Skill协作，统一 React 组件结构和动画实现风格。
• 与Video Editing Skill、Doc Updater Agent等配合，构建端到端的视频自动化生产线。
• 可结合Hooks 自动化体系，实现如“渲染前自动检查字幕同步”、“输出后自动生成视频元数据”等自动化流程。

FAQ

Q: Skill 能解决 Remotion 项目中哪些典型难题？
A: 包括动画与音频同步、字幕批量导入与高亮、3D 场景集成、Lottie 动画、TailwindCSS 样式、视频/音频裁剪、动态元数据计算、数据可视化等 Remotion 常见/高阶需求。

Q: 如何让 AI 编程助手自动用上这些规则？
A: 只要你的项目中出现 Remotion 相关代码，Claude Code 等助手会自动加载该 Skill。也可在 MCP/skills.json 手动指定，或通过命令面板主动调用。

Q: Skill 是否适合初学者？需要 Remotion 进阶经验吗？
A: Skill 适合所有层级用户。初学者可直接用“最佳实践”代码片段，进阶用户可查阅每条规则的详细说明与底层原理，支持深度定制和团队协作。

---