# remotion-video-toolkit

A skill that teaches your AI agent to write Remotion code: animations, timing, MP4 rendering, captions, charts and 3D. Useful when video comes from data instead of a timeline editor.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 779 installs · ★ 25
- Author: shreefentsar
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/shreefentsar/remotion-video-toolkit/tree/HEAD/SKILL.md
- Updated: 2026-01-29
- HTML: https://affpapa.org/en/nevibecode/skills/remotion-video-toolkit

## What it does

The skill ships 29 rules split into files: compositions, rendering, animations, timing, transitions, text, media, captions, charts, 3D, Lottie, TailwindCSS, plus helpers for duration and dimensions. Your agent reads the rule it needs and writes React components that Remotion turns into a real MP4.

Rendering paths differ. You can go through the CLI, the Node.js API, AWS Lambda or Cloud Run, up to an HTTP endpoint that takes JSON and returns a video file. Captions come from Whisper, Deepgram or AssemblyAI, and existing .srt files load as well.

Before you start: Node.js 18+, React 18+ and Remotion itself, scaffolded with `npx create-video@latest`. FFmpeg needs no separate install because it comes with `@remotion/renderer`. Serverless rendering needs an AWS or GCP account, so decide where you render first — that choice is the one that bites later.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/remotion-video-toolkit/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/remotion-video-toolkit/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/remotion-video-toolkit/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/remotion-video-toolkit/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install shreefentsar/remotion-video-toolkit remotion-video-toolkit
```

2. **Manually: put the files in place**
- File: `.github/skills/remotion-video-toolkit/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/shreefentsar/remotion-video-toolkit
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/remotion-video-toolkit/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/shreefentsar/remotion-video-toolkit/tree/HEAD/SKILL.md

## When to use it
- produce an MP4 from React components without a video editor
- render one video per user from JSON props
- burn TikTok-style captions with word-by-word highlighting
- turn a metrics dashboard into an animated clip
- expose video rendering as an HTTP endpoint

## Example prompts
- build a Remotion composition with a title fade-in and render it to out/video.mp4
- add captions from audio via Whisper and show them with word-by-word highlighting
- set up rendering on AWS Lambda so it takes JSON props and returns the finished file

## Similar
- [remotion-video](https://affpapa.org/en/nevibecode/skills/remotion-video.md) — skill · 2600 installs
- [remotion-video-creation](https://affpapa.org/en/nevibecode/skills/remotion-video-creation.md) — skill · 4900 installs
- [yyl-remotion-video](https://affpapa.org/en/nevibecode/skills/yyl-remotion-video.md) — skill · 503 installs
- [video-toolkit](https://affpapa.org/en/nevibecode/skills/video-toolkit.md) — skill · 1100 installs
- [remotion-motion-graphics](https://affpapa.org/en/nevibecode/skills/remotion-motion-graphics.md) — skill · 1100 installs
- [remotion-markup](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-markup.md) — skill · 207700 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md