Remotion Best Practices 视频生成skill

Remotion Best Practices 是一款视频生成skill。只需要给Claude Code一句话，它能写出完整的React视频脚本，并渲染出MP4成片。

一、Remotion Best Practices 简介

Remotion Best Practices 是一本简明的、规则驱动的参考手册，用于使用 Remotion 和 React 构建程序化视频。在处理 Remotion 代码时可随时使用，获得关于合成（compositions）、资源（assets）、动画、音频处理、字幕/闭合字幕和元数据等领域的专门指导。它为 3D 内容（Three.js / React Three Fiber）、动画、导入图片/视频/音频/字体、处理 Lottie 和 GIF、以及创建图表和数据可视化提供了具体规则和代码示例。文档还介绍了用于解码检查、提取帧以及获取音视频尺寸和时长的 Mediabunny 工具，并提供关于动态合成元数据和默认 props 的指导。核心优势包括一致的、可用于生产的模式、减少跨浏览器陷阱、提升可访问性（字幕/caption）、以及加快为生成程序化视频内容的开发者入门速度。

二、核心功能

• 编程式视频创作：用 React 组件创建视频内容
• 参数化视频：通过传递数据实现动态内容
• 实时预览：Remotion Studio 提供可视化编辑
• 组件化开发：可复用的动画组件和效果
• 可扩展渲染：支持本地、服务端和无服务器渲染

三、安装与配置实战

安装很简单，一行命令搞定：

npx create-video@latest

或者用其他包管理器：

bunx create-video@latest
yarn create video@latest
pnpm create video@latest

安装完成后，项目结构大概是这样：

my-video/
 ├── public/           # 静态资源
 ├── src/
 │   ├── Root.tsx      # 根组件，定义所有组合
 │   ├── MyComp.tsx    # 视频组件
 │   └── index.ts      # 入口文件
 ├── package.json
 └── remotion.config.ts # 配置文件

验证安装：

npm start

浏览器会自动打开 Remotion Studio，你就能看到你的第一个视频了。

配置文件remotion.config.ts：

import { Config } from '@remotion/cli/config';

Config.setVideoImageFormat('jpeg');
Config.setOverwriteOutput(true);

说实话，默认配置就够用了，等熟悉了再根据需要调整。

四、相关资料

官网地址：https://www.remotion.dev/