remotion-interactivity Skill for Claude: What It Does and How to Install It

Makes Claude structure Remotion video code so you can select, move, trim and restyle items in Studio and have the edits saved to code.

Installs: 241.2K; on skills.sh
Stars: 6K; on GitHub
Files: 4; besides SKILL.md
Updated: Oct 2026; last repo commit

remotion-interactivity tells Claude to shape Remotion markup around what you should be able to edit in Remotion Studio. Every item you may change on its own gets its own JSX node, and its editable values stay inline on that node: inline text, inline CSS styles and inline interpolate() calls. Studio can then write your changes back to the source.

It covers schema fields that Studio can read and edit (string, number, boolean, color, enum, array and asset among them), the Interactive wrapper for HTML elements, editable SVG paths and path morphing, and keeping composition metadata and effects inline. SKILL.md also refers to guidance on connected compositions and video editing that is not in its own folder, so install the whole Remotion set. The folder has 5 files, including two guides on timeline structure and inline effects, and no scripts.

Good for

Developers making Remotion videos others will tweak
Editors who want to adjust text, timing and styles in Studio

Install remotion-interactivity

Claude Code

Copy this prompt.

Install the remotion-interactivity skill in Claude Code. Run this command:

npx skills add remotion-dev/skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Install the whole set, not just remotion-interactivity. SKILL.md refers to connected compositions and video editing guidance that is not in its own folder, and the README says the set works with Claude Code, Codex, Kimi Code and Cursor.

From the project README. Source.

What's in the skill

When it loads

Structure Remotion markup for interactivity

Sections in SKILL.md

Choose schema fields
Make an HTML element interactive using Interactive
Prefer inline text
Give interactive elements a descriptive name
Keep all CSS styles inline
Animate using interpolate()
Keep SVG paths editable with Interactive.Path
Morph paths using inline interpolatePaths()
Use scale, translate, rotate CSS properties
Keep composition metadata inline
Effects should be inline too
Making your own component interactive
Video editing

Key facts

Author: remotion-dev
Repo: remotion-dev/skills (skills/remotion-interactivity)
Installs on skills.sh: 241,189 (Nov 2026)
GitHub stars: 6,037 (Nov 2026)
Last repo commit: Oct 26, 2026
Files in the skill folder: 5 including SKILL.md
skills.sh audits: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass

What it includes

Choose which props Studio can edit, such as string, number, color, enum and asset
Schema fields
Wrap HTML elements so they appear as editable items in Studio
Write · Interactive elements
Keep text, CSS styles and interpolate() calls inline on each instance
Write · Inline everything
Use Interactive.Path and inline interpolatePaths() for morphs
Write · Editable SVG paths
Plan editing units, tracks and shared timing before writing scenes
Editable timeline structure
Structure footage-based compositions so clips are editable on the timeline
Video editing

From the official docs

Questions

How do I install remotion-interactivity?

Use the install box above. It installs the whole Remotion set, because SKILL.md refers to connected compositions and video editing guidance that is not in this skill's folder.

What does it change about how Claude writes Remotion code?

Claude keeps each editable value inline on the JSX node that creates a timeline item, so Studio can edit it. SKILL.md says props that are not in the schema still work but cannot be edited in Studio.

Does it work without Remotion Studio?

The skill is built around Studio edits, so it matters most if you use Studio to adjust the video.

Does it need an API key or scripts?

It bundles two guides (timeline-structure.md and inline-effects.md) and an icon, with no scripts. SKILL.md mentions no API key.

How is it different from remotion-markup?

remotion-markup covers how to write video content and effects. remotion-interactivity covers how to structure that code so items are editable in Studio.

Information

updated Nov 2, 2026

Repository: remotion-dev/skills
Folder: skills/remotion-interactivity

remotion-dev/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

remotion-dev/skills README · github.com
remotion-interactivity SKILL.md · github.com