# Remotion AI Skill — Programmatic Video in React

> Official Remotion Agent Skill for Claude Code and Codex. 30+ rules covering animations, transitions, captions, FFmpeg, audio visualization, voiceover, 3D, and more.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npx skills add remotion-dev/skills
```

Or when creating a new Remotion project: `bun create video`

---

## Intro

The official Remotion Agent Skill — 37 rule files that teach Claude Code, Codex, and Cursor how to create programmatic videos in React. Covers animations, transitions, captions/subtitles, FFmpeg integration, audio visualization, voiceover generation, 3D with Three.js, charts, maps, text animations, and more. Works with the cross-platform [Agent Skills standard](https://agentskills.io).

**Best for**: Developers building video generation pipelines, social media content automation, or data visualization videos with React.
**Works with**: Claude Code, OpenAI Codex, Cursor
**Setup time**: 1 minute

---

## All 37 Rules

### Core Animation & Timing
- [Animations](https://tokrepo.com/en/workflows/a8e21ba7-a598-43cd-8bcb-b5af8c25c91a)
- [Timing](https://tokrepo.com/en/workflows/ee8f13ea-5f67-4a08-ae1d-3366b53e593f)
- [Sequencing](https://tokrepo.com/en/workflows/fda3b2ce-7591-4a64-aed6-4e6d8d93d4d0)
- [Trimming](https://tokrepo.com/en/workflows/de485e69-f6b1-41e6-8205-5f5de565e400)
- [Transitions](https://tokrepo.com/en/workflows/367ac310-39d6-44ca-8d72-ecc51453e140)

### Media
- [Videos](https://tokrepo.com/en/workflows/3260bbfa-8ec9-463a-9cba-3e03f8862984)
- [Audio](https://tokrepo.com/en/workflows/e92dc629-9a69-4a43-9143-6aec38691794)
- [Images](https://tokrepo.com/en/workflows/1a28261c-a575-4689-9773-7030db505890)
- [Gifs](https://tokrepo.com/en/workflows/274376eb-9460-4b36-8001-6a73e541cb8b)
- [Assets](https://tokrepo.com/en/workflows/5e7d0f33-7ea5-4ca6-b5f7-9719a99db833)
- [Fonts](https://tokrepo.com/en/workflows/a6c7b3ba-187a-4aed-a914-b443db058295)
- [Light Leaks](https://tokrepo.com/en/workflows/09654ac6-c3c9-4022-9c3d-110fed1880c0)
- [Transparent Videos](https://tokrepo.com/en/workflows/7eef8da9-746e-4941-b3cc-f5f2110d59e2)

### Text & Typography
- [Text Animations](https://tokrepo.com/en/workflows/29a4a1e6-f3d7-4c48-aa33-caddbd0bd35e)
- [Measuring Text](https://tokrepo.com/en/workflows/7c51fb5b-4260-455e-9f73-3d0b11015d99)

### Captions & Voiceover
- [Subtitles](https://tokrepo.com/en/workflows/d43f84af-1581-4b02-9c0e-b8fef366a8ca)
- [Display Captions](https://tokrepo.com/en/workflows/b95ee0ef-b7ad-44e4-8c80-88622f358da7)
- [Import Srt Captions](https://tokrepo.com/en/workflows/35ed666e-ab87-4ac0-9308-7ef73f9f0e9a)
- [Transcribe Captions](https://tokrepo.com/en/workflows/957e8918-a9ce-4b3e-97e1-6493d6ed75db)
- [Voiceover](https://tokrepo.com/en/workflows/47ec82a6-f5e7-4530-94cd-3de1508ccb43)
- [Sfx](https://tokrepo.com/en/workflows/5f35f2ac-67f8-4688-aeaa-5df2b5916dcf)

### Audio Visualization
- [Audio Visualization](https://tokrepo.com/en/workflows/27837b61-875d-44fc-90eb-125bcb646900)

### Data & Charts
- [Charts](https://tokrepo.com/en/workflows/82118e54-6262-49d6-941a-b6ea68fc991e)
- [Maps](https://tokrepo.com/en/workflows/acc76203-2142-455f-aa36-a8d6b7a9fa1f)

### 3D
- [3D](https://tokrepo.com/en/workflows/a2efc549-c6fa-4f43-8d75-01ab1e7d18ff)

### Video Processing
- [Ffmpeg](https://tokrepo.com/en/workflows/a9f7a7fe-e992-4448-806c-0c8775994e69)
- [Extract Frames](https://tokrepo.com/en/workflows/79efb497-1545-4cdd-8db6-b492cdd5e23f)
- [Get Video Duration](https://tokrepo.com/en/workflows/3ed09610-0041-40d0-8834-d19472bf8a2d)
- [Get Video Dimensions](https://tokrepo.com/en/workflows/e3257fe7-9ff7-49d7-a804-a914c52ce625)
- [Get Audio Duration](https://tokrepo.com/en/workflows/c14c3bd1-b513-4d4e-9194-0379445fe785)
- [Can Decode](https://tokrepo.com/en/workflows/366c9fbf-7d07-4a81-94d4-1ada04e4110a)

### Project Structure
- [Compositions](https://tokrepo.com/en/workflows/60f3daaa-297d-45d9-888a-858f19998212)
- [Calculate Metadata](https://tokrepo.com/en/workflows/994d2298-c7f5-4f57-a9e9-6a7d28dcc490)
- [Parameters](https://tokrepo.com/en/workflows/115784a3-0274-48af-9223-34bd2705a2e9)
- [Tailwind](https://tokrepo.com/en/workflows/316a889a-b1b8-4dc2-8cac-2aab8dfb07b9)
- [Measuring Dom Nodes](https://tokrepo.com/en/workflows/eebf5616-36b0-4c9b-8ae3-64a46d81ae8c)
- [Lottie](https://tokrepo.com/en/workflows/2348d25f-2fd3-43cf-9672-56dcf6010174)

## Key Rules

### All animations must use `useCurrentFrame()`
```tsx
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 60], [0, 1], { extrapolateRight: "clamp" });
```
CSS transitions, CSS animations, and Tailwind animation classes are **forbidden**.

### FFmpeg is built-in
```bash
bunx remotion ffmpeg -i input.mp4 output.mp3
```

### Captions use the `Caption` type
```typescript
type Caption = { text: string; startMs: number; endMs: number; timestampMs: number | null; confidence: number | null; };
```

### FAQ

**Q: What is the Remotion AI Skill?**
A: An official Agent Skill with 37 rule files that teach AI coding tools best practices for creating programmatic videos in React using Remotion.

**Q: Is Remotion free?**
A: Free for individuals and small teams. Companies above a revenue threshold need a license. The AI Skill itself is free and open-source.

**Q: How do I install the Remotion skill?**
A: Run `npx skills add remotion-dev/skills`.

---

## Source & Thanks

> Created by [Remotion](https://github.com/remotion-dev). Licensed under MIT.
> [remotion-dev/skills](https://github.com/remotion-dev/skills)
> [remotion.dev](https://remotion.dev)

---
Source: https://tokrepo.com/en/workflows/57997ead-c8fa-409c-916f-28bbc0adc8d9
Author: TokRepo Curated