remotion-video-toolkit — Claude Code skill: React video
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.
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a claude-codeWhat remotion-video-toolkit 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.
What it helps with
- 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 for the agent
- 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
How to install remotion-video-toolkit
1Skills CLI (Vercel)
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a claude-code2Manually: put the files in place
~/.claude/skills/remotion-video-toolkit/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/remotion-video-toolkit/
1Skills CLI (Vercel)
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a codex2Manually: put the files in place
.agents/skills/remotion-video-toolkit/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a cursor2Manually: put the files in place
.cursor/skills/remotion-video-toolkit/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install shreefentsar/remotion-video-toolkit remotion-video-toolkit2Manually: put the files in place
.github/skills/remotion-video-toolkit/SKILL.md1Skills CLI (Vercel)
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a gemini-cli2Platform CLI
gemini skills install https://github.com/shreefentsar/remotion-video-toolkitManually: put the files in place
.devin/skills/remotion-video-toolkit/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about remotion-video-toolkit
How do I install remotion-video-toolkit in Claude?
Run npx skills add shreefentsar/remotion-video-toolkit --skill remotion-video-toolkit -a claude-code. The skill lands in ~/.claude/skills/remotion-video-toolkit/SKILL.md.
What does remotion-video-toolkit do?
It gives your agent 29 Remotion rules covering compositions, animations, timing, transitions, text, media, captions, charts, 3D and rendering through CLI, Node.js, Lambda or Cloud Run.
What do I need to run it?
Node.js 18+, React 18+ and Remotion, scaffolded with npx create-video@latest. FFmpeg is not a separate install, but Lambda or Cloud Run rendering requires an AWS or GCP account.
