Skill

用 React 代码程序化生成视频的框架，支持 CSS/Canvas/SVG/WebGL，可部署到 Lambda/Cloud Run 大规模渲染，适合创意视频生成、数据可视化视频和个性化视频批量生产

Security Scan

The skill is a documentation-style Remotion guide that mostly matches its stated purpose, but its runtime instructions ask the agent to configure cloud credentials and call external services (AWS, ElevenLabs, STT services) while the skill metadata declares no required environment variables — this mismatch and the fact the agent will run install / npx commands warrants caution.

Purpose & Capability

The name/description and the SKILL.md consistently document Remotion (React-based video rendering) and related workflows (local preview, cloud Lambda/Cloud Run). Required binaries/env in metadata are empty, which is plausible for an instruction-only doc, but the guide explicitly describes using AWS Lambda, Google Cloud Run and third-party services (ElevenLabs, Whisper/AssemblyAI) that normally require credentials — a modest mismatch between declared requirements and actions in the instructions.

Instruction Scope

The SKILL.md instructs the agent to run npx commands to create projects and run remotion (expected), but also shows explicit steps to export AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY for Lambda deployment (guides/03-advanced-usage.md). It also includes examples that fetch external APIs (e.g. fetch('https://api.example.com/data')) and references third‑party services (ElevenLabs, Whisper/AssemblyAI) which will cause network traffic and may require API keys. The skill's prose therefore asks the agent to read/use credentials and contact external endpoints that are not declared in the skill metadata.

Install Mechanism

No install spec and no code files—this is instruction-only. That reduces installer risk because nothing in the skill will be written to disk by the platform itself. The instructions do tell the agent to run npx/npm installs in the user's environment, which is expected for a framework guide but means the agent will execute package installs in your environment if allowed.

Credentials

The skill metadata declares no required environment variables, but the guide explicitly instructs exporting AWS credentials for Lambda rendering and mentions potential use of other API-backed services (ElevenLabs, STT providers). Requesting or using cloud credentials is proportionate to Lambda/Cloud Run deployment, but the omission from metadata is a transparency gap: the agent may ask for secrets at runtime even though none are declared up-front.

Persistence & Privilege

always:false and default autonomous invocation are set (normal). There is no install-time behavior that suggests the skill will persistently modify agent/system settings. The skill does instruct the agent to run user-side commands (npx, exports) but does not request always:true or any elevated/hidden persistence.

What to consider before installing

This appears to be a legitimate Remotion usage guide and is coherent with its stated purpose, but be cautious before letting an agent execute the listed commands. The guide will ask the agent to run npx/npm installs and may ask you to provide AWS credentials (AWS_ACCESS_KEY_ID / AWS_SECRET_ACCESS_KEY) or API keys for third-party services. Before installing or running anything: (1) do not hand over production credentials to the skill — use temporary or least-privilege IAM credentials if you must test Lambda deployment; (2) run generated commands and installs in an isolated environment or container; (3) inspect any generated scripts or package.json before executing to ensure they don't include unexpected network calls; (4) be aware components can fetch external data during render — avoid sending sensitive data to unknown endpoints; (5) if you want full assurance, prefer using the official remotion.dev repository and follow official docs rather than blindly running AI-generated setup steps.

Remotion — 用 React 写视频

Remotion 让开发者用 React 组件和 TypeScript 代码程序化创建视频，把视频创作变成软件工程问题。整个 Web 技术栈都可以用于视频：CSS 动画、Canvas 绘图、SVG、WebGL 特效，乃至调用外部 API 生成个性化内容。从本地预览到云端大规模渲染（AWS Lambda / Google Cloud Run），一套代码覆盖全流程。

核心使用场景

• 程序化视频生成：用数据驱动视频内容，批量生成个性化视频（如 GitHub Unwrapped 年报）
• 数据可视化视频：将图表、指标、实时数据渲染成动态视频
• 营销/社交媒体视频：用 React 组件快速生成品牌一致的视频素材
• 字幕与标注视频：用 @remotion/captions 自动生成带字幕的视频
• 云端大规模渲染：用 @remotion/lambda 在 AWS Lambda 上并行渲染，缩短渲染时间

AI 辅助使用流程

1. 初始化项目 — AI 执行 npx create-video@latest 创建项目并安装依赖
2. 编写 React 组件 — AI 根据需求生成视频组件，配置 <AbsoluteFill>、useCurrentFrame 等核心 API
3. 本地预览调试 — AI 启动 npx remotion studio 在浏览器中实时预览视频
4. 配置视频元数据 — AI 设置分辨率、帧率、时长等参数
5. 本地渲染导出 — AI 运行 npx remotion render 输出 MP4/WebM/GIF
6. 云端部署渲染 — AI 配置 Lambda 或 Cloud Run 进行大规模批量渲染

关键章节导航

• 安装指南 — 项目初始化、模板选择、环境配置
• 快速开始 — React 组件编写、核心 API、本地渲染
• 高级用法 — Lambda 渲染、批量生成、字幕、动态数据
• 故障排查 — 渲染错误、性能问题、云端部署问题

AI 助手能力

使用本技能时，AI 可以：

• ✅ 创建 Remotion 项目（npx create-video@latest）并选择合适模板
• ✅ 编写 React 视频组件，使用 useCurrentFrame、interpolate、spring 等动画 API
• ✅ 配置 <Composition> 的分辨率、帧率和时长
• ✅ 启动 Remotion Studio 进行本地预览（npx remotion studio）
• ✅ 执行本地渲染导出视频（npx remotion render）
• ✅ 配置 @remotion/lambda 在 AWS Lambda 上部署渲染服务
• ✅ 使用 @remotion/captions 生成带字幕的视频
• ✅ 实现数据驱动的个性化视频批量生成

核心功能

• ✅ React 视频组件 — 用 JSX 和 CSS 编写视频帧，完整 Web 技术栈支持
• ✅ 动画 API — interpolate、spring、useCurrentFrame 精确控制每一帧
• ✅ Remotion Studio — 浏览器内实时预览和时间轴编辑器
• ✅ 多格式输出 — MP4（H.264/H.265）、WebM、GIF、图片序列
• ✅ Lambda 渲染 — AWS Lambda 并行渲染，大幅缩短长视频渲染时间
• ✅ Cloud Run 渲染 — Google Cloud Run 渲染方案
• ✅ 字幕组件 — @remotion/captions 自动生成 SRT/VTT 格式字幕
• ✅ 动态数据 — 通过 props 注入外部数据，生成个性化内容
• ✅ GIF 支持 — @remotion/gif 在视频中嵌入 GIF 动画
• ✅ 字体支持 — @remotion/google-fonts 使用 Google Fonts
• ✅ Lottie 动画 — @remotion/lottie 嵌入 Lottie 动画文件
• ✅ 音频/视频合成 — <Audio> 和 <Video> 组件混合媒体

快速示例

# 创建新项目（选择模板）
npx create-video@latest

# 启动 Studio 预览
cd my-video
npx remotion studio

# 渲染视频
npx remotion render src/index.ts MyComposition out/video.mp4

# 渲染 GIF
npx remotion render src/index.ts MyComposition --output out/video.gif

// 基础视频组件
import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion'

export const MyVideo: React.FC = () => {
  const frame = useCurrentFrame()
  const opacity = interpolate(frame, [0, 30], [0, 1])
  
  return (
    <AbsoluteFill style={{ backgroundColor: 'white', opacity }}>
      <h1>Hello, Remotion!</h1>
    </AbsoluteFill>
  )
}

安装要求

依赖	版本要求
Node.js	>= 18.0
npm / pnpm / yarn	任意版本
FFmpeg	可选（本地渲染使用内置版本）

许可证注意： Remotion 对个人/学生免费，公司使用需要购买许可证。详见 remotion.dev/license。

项目链接

• GitHub：https://github.com/remotion-dev/remotion
• 文档：https://remotion.dev/docs
• API 参考：https://remotion.dev/api
• 展示作品：https://remotion.dev/showcase
• Discord：https://remotion.dev/discord