remotion-interactivity — Claude Code skill: install and overview
Guides AI coding agents to structure Remotion markup for Remotion Studio editing. Useful when building video scenes with customizable text, styles, and timing.
npx skills add remotion-dev/skills --skill remotion-interactivity -a claude-codeWhat remotion-interactivity does
The skill outlines rules for Remotion Studio 4.0.538 interactivity. It teaches agents to use the Interactive wrapper, like Interactive.Div, so elements can be selected, moved, or styled directly in the visual editor. All editable CSS properties and fixed copy must remain inline on each component instance instead of constants or complex objects.
It details InteractivitySchema setup across supported field types, distinguishing keyframable types like number and color from static ones like font-family or asset. Built-in fragments such as Interactive.textSchema and Interactive.backgroundSchema handle standard styles, while standard transforms and opacity are omitted because Interactive.create() injects them automatically.
Install this skill if you develop Remotion video templates and need users or teammates to adjust titles, colors, and layout directly in Studio.
What it helps with
- structure Remotion JSX nodes for visual editing in Studio
- define call-site editable props with InteractivitySchema
- add pre-built schema fragments for typography, backgrounds, and borders
- convert standard HTML and SVG elements into interactive layers
Example prompts for the agent
- Make this Remotion title interactive so its font size and color can be edited in Studio
- Define an InteractivitySchema for a banner component using built-in style fragments
- Refactor this video scene to keep all styles and copy inline for Studio selection
How to install remotion-interactivity
1Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a claude-code2Manually: put the files in place
~/.claude/skills/remotion-interactivity/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/remotion-interactivity/
1Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a codex2Manually: put the files in place
.agents/skills/remotion-interactivity/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a cursor2Manually: put the files in place
.cursor/skills/remotion-interactivity/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install remotion-dev/skills remotion-interactivity2Manually: put the files in place
.github/skills/remotion-interactivity/SKILL.md1Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a gemini-cli2Platform CLI
gemini skills install https://github.com/remotion-dev/skills --path skills/remotion-interactivityManually: put the files in place
.devin/skills/remotion-interactivity/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set8
The whole set →Similar
Questions about remotion-interactivity
How do I install remotion-interactivity in Claude Code?
Run npx skills add remotion-dev/skills --skill remotion-interactivity -a claude-code.
What does remotion-interactivity do?
It guides the agent to format Remotion code and schemas so elements appear as editable timeline items inside Remotion Studio.
Do I need to declare transform and opacity fields in the schema?
No. Interactive.create() provides translate, scale, rotate, transformOrigin, and opacity automatically, so you should leave them out of your custom schema.
