remotion-render · 101-skills — Claude Code skill: video from TSX code
This skill sends a Remotion React component to inference.sh and gets back an MP4. Useful when video should come from code, not from a timeline editor.
npx skills add 101-skills/superpowers --skill remotion-render -a claude-codeWhat remotion-render does
You hand the skill TSX code for a component that exports a default component, and it renders through the belt CLI from inference.sh. The result is an MP4. Width, height, FPS, duration and codec are set in the same call, so the same component can be re-rendered for a vertical or square cut.
Your code can import from remotion and react: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence, Audio, Video, Img. Props can be passed to the component, which is how you feed changing data into a template.
Before the first render you need the belt CLI and a session from belt login. The skill allows only Bash(belt *), so rendering happens on inference.sh rather than on your machine — no access to that service means no output.
What it helps with
- turn a React component into an MP4 without a video editor
- animate text fading in frame by frame
- build a counter or progress bar that grows through the clip
- feed data into a template through props and render it
- stitch a scene from several timed fragments
Example prompts for the agent
- Render this Remotion component to MP4 at 1920x1080, 30 fps, 3 seconds
- Make a video where the title fades in with interpolate
- Build a clip from three scenes using Sequence, one second each
How to install remotion-render
1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill remotion-render -a claude-code2Manually: put the files in place
~/.claude/skills/remotion-render/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/remotion-render/
1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill remotion-render -a codex2Manually: put the files in place
.agents/skills/remotion-render/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill remotion-render -a cursor2Manually: put the files in place
.cursor/skills/remotion-render/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install 101-skills/superpowers remotion-render2Manually: put the files in place
.github/skills/remotion-render/SKILL.md1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill remotion-render -a gemini-cli2Platform CLI
gemini skills install https://github.com/101-skills/superpowers --path tools/video/remotion-renderManually: put the files in place
.devin/skills/remotion-render/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill remotion-render -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-render
How do I install remotion-render in Claude?
Run npx skills add 101-skills/superpowers --skill remotion-render -a claude-code. The skill lands at ~/.claude/skills/remotion-render/SKILL.md.
What does remotion-render do?
It takes TSX code for a Remotion component and renders it to video through inference.sh. You get an MP4 at the resolution, FPS, duration and codec you specify.
What do I need before using it?
The belt CLI from inference.sh and a login via belt login. Without access to that service the render will not run.
Similar skills
Everything for AI and ML →remotion-render by other authors comes first.
