remotion-dev/skills: Best-Practice Skills for Remotion Video Projects

Remotion is the React-based video framework. Working well in a Remotion project means following project-specific conventions — markup patterns, render configuration, captions timing, map animations — that are not generic React best practice. remotion-dev/skills packages 12 skills from the Remotion team itself so you do not have to remember every convention in your head.

Why This Skill Matters

The repo ships 12 skills: remotion-best-practices (the umbrella skill if you are not sure which one to use), remotion-create (project scaffolding), remotion-markup (animated markup patterns), remotion-studio (Studio debugging), remotion-render (rendering configuration), remotion-maps (animated map sequences), remotion-captions (caption timing and styling), remotion-saas (Remotion SaaS integration), remotion-interactivity (interactive video elements), remotion-docs (documentation retrieval), remotion-upgrade (version migration), and remotion-multimedia (audio/video assets). Compatible agents explicitly named: Claude Code, Codex, Cursor, Kimi Code.

The repository has 4.4k stars, 71 commits on main, 10 open issues, and 11 open pull requests — actively maintained. No LICENSE file is present at the repo root; treat reuse rights as unclear until upstream clarifies.

Installation

The standard install works across supported agents:

npx skills add remotion-dev/skills

If you are scaffolding a brand-new Remotion project, the upstream offering suggests:

bun create video

Pick the install path that matches your project state.

Real Workflow: Scaffold a Promo Video With /remotion-create

You want a short promo video for a record store and you have never built a Remotion project before. The remotion-create skill scaffolds the project structure from a one-line intent.

Step 1. Open your agent (Claude Code, Cursor, or Codex) in an empty directory with the skill installed. Run:

/remotion-create Make a promo video for a record store

Step 2. The skill reads the request, scaffolds a Remotion project (package.json, src/ tree, a default Composition, and an entry point), and seeds the record-store intent into the composition's data.

Step 3. Open the project locally and run the dev server:

bun install
bun run start

The Remotion Studio opens in your browser with the live preview.

Step 4. Iterate by editing the composition or asking the agent to extend the scaffold (more shots, longer duration, custom fonts). The skill does the project-shape work so you stay focused on the visuals.

Step 5. When ready to ship, use remotion-render to export the video — see the next workflow.

Real Workflow: Add Animated Captions and Export With /remotion-render

You have a Remotion project with a few shots, but the video needs captions and a final render. The remotion-captions skill handles the caption layer; remotion-render handles the export.

Step 1. Add captions to the project:

/remotion-captions Add SRT-style captions to the existing composition using the audio file at public/voiceover.mp3.

The skill reads the audio, generates caption timings, and renders a Captions component into the project tree using Remotion's caption conventions.

Step 2. Verify the captions in Remotion Studio. Adjust any timings the skill got wrong by hand.

Step 3. Render the final video:

/remotion-render Render the current composition to out/promo.mp4 at 1080p.

The skill sets up the render command, runs it, and reports the output path. For longer videos it may use server-side rendering or chunked local rendering; check the skill's render output for the actual command used.

Step 4. If you are upgrading from an older Remotion version, use remotion-upgrade to walk through the breaking changes:

/remotion-upgrade Migrate the project from Remotion 3 to Remotion 4.

The skill reads the current code, identifies deprecated APIs, and patches them to the latest equivalents, surfacing any patterns that need manual review.

Tips

• Start with /remotion-best-practices if you are not sure which skill applies — the README says it is the umbrella.
• Use /remotion-create only for greenfield projects. For existing projects, start with /remotion-upgrade and then /remotion-markup for any patterns you want to clean up.
• The /remotion-captions skill assumes you have an audio track. Generate or record the voiceover first; captions are derived from the audio.
• If you ship SaaS-rendered Remotion videos (Remotion Lambda's), pair /remotion-saas with /remotion-render and verify on a short sample before committing to a full render.
• Treat the lack of a LICENSE file as a real signal: before reusing these skill files in a closed-source product, ask the Remotion team for explicit reuse terms.

When Not to Use This

If you are not building Remotion video, none of these skills apply. Even within the Remotion ecosystem, the umbrella remotion-best-practices skill loads a lot of context — if you only need one feature (say, captions), load just remotion-captions rather than the umbrella plus captions.

See the leaderboard for more skill collections.