Agent Native

remotion-best-practices

This skill routes Remotion video creation tasks to specialized sub-skills for different aspects of video production.

by RemotionOfficial publisherNot reviewed

Identity proven by GitHub's verified organisation badge (remotion-dev)

Agents
Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode
License
MIT (permissive)
Pin
46517e1pinned Oct 9, 2026
Context cost
about 1,100 tokenswhen the skill loads
GitHub stars
26on remotion-dev/codex-plugin
Scripts
10 scripts

What it does

“Router for all Remotion skills”
The author's description, from SKILL.md

Generated summary from the skill's own text

This skill routes Remotion video creation tasks to specialized sub-skills for different aspects of video production. It guides agents through project setup, composition creation, multimedia handling, maps, captions, interactivity, and rendering workflows.

When to use it

  • Starting a new Remotion video project from scratch
  • Working with maps, captions, or interactive video elements
  • Deciding whether to preview or render a video
  • Upgrading Remotion and related packages

When not to

  • Looking up specific Remotion API documentation directly
  • Building a Remotion-based SaaS or web application
  • Need detailed guidance on a single video technique

Install

These commands install from the publisher's repository and need no account.

skills CLI

npx skills add remotion-dev/codex-plugin --skill remotion-best-practices

Installs from the repository's default branch, which may have changed since the commit we checked.

GitHub CLI 2.90 or later

gh skill install remotion-dev/codex-plugin remotion-best-practices@46517e19c8967ec0e75b798d363168380bda89a8

Installs the commit we checked (46517e1).

Copy by hand

Download the folder at 46517e1 and put it in .claude/skills/remotion-best-practices for Claude Code and in .agents/skills/remotion-best-practices for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

Skill folder on GitHub at 46517e1

Copy for your agent

A prompt for any coding agent. It installs this skill from GitHub at the pinned commit, copies the files as they are, and runs nothing unless you ask.

Prompt

Install the agent skill "remotion-best-practices" by Remotion.

Source, pinned to commit 46517e19c8967ec0e75b798d363168380bda89a8:
https://github.com/remotion-dev/codex-plugin/tree/46517e19c8967ec0e75b798d363168380bda89a8/skills/remotion-best-practices

1. Download that folder at exactly this commit. Do not use the default branch.
2. Copy every file unchanged, keeping the folder structure, into .claude/skills/remotion-best-practices/ for Claude Code and .agents/skills/remotion-best-practices/ for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. Create the folders if they do not exist.
3. Do not edit the files, and do not run any script in the folder unless I ask you to.
4. When you are done, list the files you copied and where you put them.

Listing and checks: https://www.agentnative.dev/skills/remotion/remotion-best-practices

SKILL.md at the pin

---
name: remotion-best-practices
description: Router for all Remotion skills
version: 4.0.534
---

## Preserve user changes

Users may make edits in the code outside of the conversation.

If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.

## Creating a video

If the user asks to make, create, or build a new video or composition, load [Create a new Remotion video](./remotion-create/REFERENCE.md), whether or not a Remotion project already exists.

## New project setup

If no Remotion project currently exists, load [Create a new Remotion project](./remotion-create/REFERENCE.md)

## React Markup Best Practices

If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/REFERENCE.md)

## Maps

For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).

## Multimedia

For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/REFERENCE.md)

## Improving Interactivity

By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: [Interactivity Best Practices](./remotion-interactivity/REFERENCE.md)

## Open the preview

If the user asks to "make" a video, "create" a video, etc.
Don't render the video by default unless they are very explicit. They want to instead see an interactive preview.
As soon as the project can run, start Studio and open the preview in the browser before building or editing the composition. Keep it open while you work so the user can watch progress and steer.

To start the preview server by default without opening the system browser, pass `--no-open`:

```bash
npx remotion studio --no-open
```

This will start a long-running process and print the server URL for the preview.
If the server is already started, it will print the URL.
Open the exact URL in the Codex in-app browser. Verify that Studio loads. Once a composition exists, verify that its video preview loads. If the in-app browser is not available, keep the preview server running and provide the URL to the user.
You can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`.

:::note
The Studio supports WebMCP tools.
:::

### More options

To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/REFERENCE.md).

## Render the video

Only render if the user is very explicit in asking for it.  
E.g. "Render the video", "Export", "Give me the MP4".

The preview also has a more intuitive rendering interface, so consider using it instead of the command line for rendering.

```
npx remotion render
```

For more options, see [Rendering](./remotion-render/REFERENCE.md).

For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/REFERENCE.md)

## Captions

When working with Captions, load [Remotion Captions](./remotion-captions/REFERENCE.md).

## Creating a SaaS, automation or application

Use the [Remotion SaaS skill](./remotion-saas/REFERENCE.md) for knowledge about Remotion-powered SaaS apps, such as `<Player>`, rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.

## Looking up Remotion APIs and documentation

To find and read current Remotion documentation, load [Remotion Docs](./remotion-docs/REFERENCE.md).

## Upgrading

To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/REFERENCE.md).


## Codex troubleshooting

When running inside Codex, first try starting the Remotion Studio without opening the system browser:

```bash
npx remotion studio --no-open
```

Only if that fails with file watcher limits such as `EMFILE: too many open files, watch`, retry with polling and without opening a browser from Codex:

```bash
npx remotion studio --no-open --webpack-poll 1000
```

If Studio still fails to start from Codex, ask the user to start it manually from their macOS Terminal and then continue using the already-running Studio. Sandbox errors while launching Chromium from Codex are likely caused by the Codex/macOS sandbox rather than the Remotion project.

From remotion-dev/codex-plugin at 46517e1, shown as plain text under its license: MIT (permissive). The license text is in LICENSE.

View SKILL.md on GitHub at 46517e1

Files

131 files, 1.1 MB in total. Each file has a sha256 in the pin's manifest; the first 12 characters are shown.

Skill folder on GitHub at 46517e1
All 34 skills from Remotion

More from Remotion

  • remotion-best-practices

    This skill routes the agent through Remotion's specialized knowledge bases for video creation, editing, and deployment.

    Contains scripts

    Claude Code, Codex, Cursor +3 · about 920 tokens · pinned 6 days ago

  • remotion-best-practices

    This skill routes the agent to specialized Remotion sub-skills based on the user's task, covering video creation, project setup, React markup, maps…

    Claude Code, Codex, Cursor +3 · about 1K tokens · pinned 6 days ago

  • remotion-captions

    This skill enables video caption workflows including transcribing audio to generate captions, displaying captions in videos, and importing captions from SRT…

    Claude Code, Codex, Cursor +3 · about 220 tokens · pinned 6 days ago

  • remotion-captions

    This skill enables the agent to work with captions in Remotion videos by transcribing audio to generate captions, displaying them in videos, and importing…

    Claude Code, Codex, Cursor +3 · about 270 tokens · pinned 6 days ago

  • remotion-create

    This skill scaffolds a new Remotion video project, opens the browser-based Studio for live preview, and guides composition development using React markup.

    Claude Code, Codex, Cursor +3 · about 680 tokens · pinned 6 days ago

  • remotion-create

    This skill guides agents through creating a new Remotion video project by scaffolding a starter template, setting up dependencies, and establishing a React…

    Claude Code, Codex, Cursor +3 · about 730 tokens · pinned 6 days ago

All Media and creative skills

Related in Media and creative

  • remotion-best-practices

    This skill routes the agent to specialized Remotion skills based on the user's task, such as creating videos, handling captions, working with maps, or setting…

    by RemotionOfficial publisher

    Contains scripts

    Claude Code, Codex, Cursor +3 · about 1K tokens · pinned 6 days ago

  • product-launch-video

    Creates cinematic product launch videos using Remotion with React.

    by memex-labCommunity

    Claude Code, Codex, Cursor +4 · about 11.9K tokens · pinned 6 days ago

  • remotion-markup

    This skill provides guidance for writing Remotion React markup to create animated videos programmatically.

    by RemotionOfficial publisher

    Contains scripts

    Claude Code, Codex, Cursor +3 · about 2.9K tokens · pinned 6 days ago

  • remotion-markup

    This skill provides markup authoring guidelines for Remotion React components used in video composition.

    by RemotionOfficial publisher

    Claude Code, Codex, Cursor +3 · about 4.5K tokens · pinned 6 days ago

  • remotion-multimedia

    This skill provides the agent with capabilities to query multimedia files using Mediabunny, a browser-based multimedia library.

    by RemotionOfficial publisher

    Claude Code, Codex, Cursor +3 · about 150 tokens · pinned 6 days ago

  • remotion-multimedia

    This skill enables the agent to retrieve metadata from audio and video files using the Mediabunny multimedia library.

    by RemotionOfficial publisher

    Claude Code, Codex, Cursor +3 · about 150 tokens · pinned 6 days ago

The skills listed here are third-party software, collected from public GitHub repositories as a catalog of recent skills and provided as is. Agent Native does not write or control them and is not responsible for any harm, loss or damage caused by installing or using them. Labels and checks describe what we saw at one commit and are not a guarantee. Read a skill's files before you run it. Terms of use