Remotion Best Practices

Reviewed 2026-10-14mediaPrompt / Rule# remotion # video # react # animation # captions

Remotion's official agent skills: a router SKILL.md plus 11 bundled guides for building, previewing and rendering videos in React with Remotion.

Security Reviewed

Official Remotion guides with no hooks; the agent runs npx Remotion commands (scaffold, add, studio, render only on request), queries Remotion's docs search, and 2 optional scripts only process local map data.

Install Remotion Best Practices in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "Remotion Best Practices" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/remotion-best-practices.md (source: https://github.com/remotion-dev/skills/tree/main/skills/remotion-best-practices).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Download the repository
```
git clone --depth 1 https://github.com/remotion-dev/skills /tmp/remotion-skills && git -C /tmp/remotion-skills log -1 --format=%h
```
We reviewed commit 7ba4dcf; a different hash means the skills changed after our review (Remotion updates them often).
2. Copy the router skill into this project (workspace skill)
```
mkdir -p .agents/skills && cp -r /tmp/remotion-skills/skills/remotion-best-practices .agents/skills/
```
Run from your project root. Copy only this folder: it already contains the other 11 skills as REFERENCE.md files (141 files, about 1.2 MB).
3. Or install it for all projects (global skill)
```
mkdir -p ~/.gemini/config/skills && cp -r /tmp/remotion-skills/skills/remotion-best-practices ~/.gemini/config/skills/
```
Use this instead of the previous step. For the Antigravity CLI the global folder is ~/.gemini/antigravity-cli/skills/.
4. Make sure Node.js is installed
```
node --version && git --version
```
remotion-create asks for Node.js and Git before scaffolding a project.
5. Check that Antigravity sees it
Antigravity 2.0 app: start a new conversation and ask "What skills do you have?" (the app has no /skills command). Antigravity CLI: run /skills; in a session that was already open, run /skills reload first. The skill is listed as remotion-best-practices.

The README documents npx skills add remotion-dev/skills and names Claude Code, Codex, Kimi Code and Cursor; it does not mention Antigravity. These steps copy the plain SKILL.md folder into Antigravity's standard skill folders. Update later by repeating the clone and copy, or ask the agent to run the remotion-upgrade guide.

Using Claude Code, Cursor or Codex? See other assistants below.

What is Remotion Best Practices?

For developers who make videos in code with Remotion (React) and want their agent to write compositions that actually render, start the preview, and only render when asked. This is Remotion's own skill set, published by the remotion-dev organization. remotion-best-practices is the entry point: a short router SKILL.md that sends the agent to the right guide for the task. What we counted at commit 7ba4dcf (2026-10-12, still the latest commit on 2026-10-14): the repo has 287 files and 12 skill folders; the remotion-best-practices folder alone holds 141 files / 1,179,803 bytes, because it bundles the other 11 skills as REFERENCE.md files (captions, create, docs, interactivity, maps, markup, multimedia, render, saas, studio, upgrade). The markup guide has 31 topic files (3d, audio, transitions, voiceover and others), the maps guide has 5 techniques (Cesium, Mapbox, MapLibre, MapTiler, static map), and the router declares version 4.0.535. The maps guide is bundled twice inside the folder (remotion-maps/ and remotion-markup/remotion-maps/), and each copy carries a 333,134-byte sample country-meta.json, so the two sample files alone are over half of the folder's size. Our earlier page described a community copy with 28 flat rule files; the official skill now looks quite different.

How to use Remotion Best Practices?

Copy the remotion-best-practices folder into Antigravity's skills folder and ask for Remotion work. Mention Remotion by name: the router's description is only "Router for all Remotion skills". Per the router, a request to make a video loads remotion-create (which scaffolds with npx create-video@latest --yes --blank --no-tailwind and npm i if no project exists), then starts the Studio preview with npx remotion studio and keeps it open while it edits. It renders (npx remotion render) only when you clearly ask for an export or MP4. The /remotion-create style names in the README are slash commands for agents that support them; in Antigravity, ask in plain words.

Key features of Remotion Best Practices

✓Router SKILL.md (109 lines) that loads only the guide a task needs
✓remotion-create: scaffolds a project in an empty folder or a new subfolder, checks hidden files before deciding
✓remotion-markup: 31 topic files on compositions, timing, sequencing, transitions, fonts, audio, voiceover, effects, 3D and more
✓remotion-maps: 5 map techniques with example components and 2 Node data-prep scripts
✓remotion-captions: .srt import, caption display, and transcription with @remotion/whisper-webgpu
✓remotion-docs: searches the Remotion docs through Algolia and fetches pages as Markdown
✓remotion-upgrade: npx remotion upgrade, or a manual version alignment plus npx skills update

When to use Remotion Best Practices

1Starting a new Remotion video from a short brief, with a live Studio preview
2Adding transitions, audio, captions or a voiceover to an existing composition
3Animated maps and route flyovers
4Looking up current Remotion APIs instead of relying on the model's memory
5Upgrading Remotion packages to one consistent version

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure Remotion Best Practices in your development environment.

Step 1: Claude Code / Cursor: skills CLI (README)claude

npx skills add remotion-dev/skills

The README says the skills are useful for Claude Code, Codex, Kimi Code or Cursor and installs them with this command. It does not give a folder path for each tool.

Step 2: New projects: create-video (README)all

bun create video

Per the README, creating a new Remotion project also offers to add the skills.

Usage Example & Verification

Prompt / Request Example

1) README example: /remotion-create Make a promo video for a record store (in Antigravity: "Using the Remotion skill, make a promo video for a record store")
-> What should happen: the router loads remotion-create; in an empty folder the agent runs npx create-video@latest --yes --blank --no-tailwind . and npm i, starts npx remotion studio, and builds the composition while the preview stays open. It does not render an MP4 unless you ask.

2) README example: /remotion-maps Animate a route from Los Angeles to New York and make the camera follow it.
-> What should happen: the router loads remotion-maps and the agent picks one of the 5 techniques. The Mapbox, MapTiler and Cesium city techniques need your own token in REMOTION_MAPBOX_TOKEN, REMOTION_MAPTILER_KEY or REMOTION_GOOGLE_MAPS_API_KEY; ask for the static-map or MapLibre route if you have no key.

3) Our example: "Using the Remotion skill, add captions from public/captions.srt with the current word highlighted, then render the video."
-> What should happen: the agent loads remotion-captions, installs @remotion/captions with npx remotion add if it is missing, writes the caption component, and, because you asked explicitly, runs npx remotion render.

Installation Confirmation Method

Ask "What skills do you have?" in a new Antigravity conversation (CLI: /skills) and look for remotion-best-practices. Then ask "Which guides can the Remotion skill load?": the router links 11 REFERENCE.md guides (create, markup, maps, multimedia, interactivity, studio, render, captions, saas, docs, upgrade).

Security Review

Static review

Reviewed Date

2026-10-14

Audited Ref / Commit

7ba4dcf8ebe1626b00baa41e1f2478113719b60b

Reviewer

antigravityskills.org (static code review)

Full review: scope, findings, risks

Audit Scope:Static review of remotion-dev/skills at commit 7ba4dcf (2026-10-12, HEAD on 2026-10-14): README.md, package.json, the full file list; skills/remotion-best-practices/SKILL.md, agents/openai.yaml, remotion-create, remotion-docs, remotion-upgrade and remotion-captions/transcribe-captions.md in full; both map scripts (prep-geo.mjs, prep-cesium-path.mjs) in full; grep of every file in the folder for URLs, API keys, environment variables and package commands; diff of the bundled REFERENCE.md copies against the 11 standalone skill folders. The repo's own scripts/ folder (README and sync tooling) was not reviewed. The other 31 markup topics were checked by grep only.

Key Findings:No hooks or install scripts. The skill tells the agent to run npx create-video@latest, npx remotion add <package>, npx remotion studio, npx remotion render and, for upgrades, npx remotion upgrade or npx skills update for all 12 skills. remotion-docs embeds Remotion's search-only Algolia key and sends queries to plsduol1ca-dsn.algolia.net, then fetches remotion.dev docs as Markdown. Examples load media from remotion.media and other public URLs. Optional keys: ELEVENLABS_API_KEY, REMOTION_MAPBOX_TOKEN, REMOTION_MAPTILER_KEY, REMOTION_GOOGLE_MAPS_API_KEY. The 2 map scripts use fs to read local GeoJSON and write JSON/GeoJSON outputs; no network calls. No telemetry.

Identified Operational Risks & Permissions:npm packages are fetched and run in your project (create-video@latest is unpinned). Studio runs as a long-lived local server and can write edits back to your code. Optional TTS and map providers receive your requests with your own keys. Updates are frequent, so the installed copy can drift from what we reviewed.

Static review at commit 7ba4dcf. skills/remotion-best-practices contains 141 files: 85 Markdown, 10 TSX and 6 TS example files, 8 JSON and 2 GeoJSON sample data files, 13 SVG icons, 13 agents/openai.yaml metadata files and 4 .mjs files (2 scripts, each present twice). The router SKILL.md tells the agent not to overwrite user edits, to start Studio (npx remotion studio, with --no-open for agents with an in-app browser), and to render only when explicitly asked. remotion-create scaffolds with npx create-video@latest --yes --blank --no-tailwind and npm i, removing only OS metadata files such as .DS_Store from the folder first. remotion-docs posts search queries to Remotion's Algolia index with a public search key embedded in the file and fetches https://www.remotion.dev/docs/*.md. remotion-upgrade runs npx remotion upgrade or, without @remotion/cli, npm view and npx skills update. remotion-markup/voiceover.md calls api.elevenlabs.io with ELEVENLABS_API_KEY; map techniques read REMOTION_MAPBOX_TOKEN, REMOTION_MAPTILER_KEY or REMOTION_GOOGLE_MAPS_API_KEY and load tiles from the provider. prep-geo.mjs and prep-cesium-path.mjs import fs (and @turf/turf), read GeoJSON from a configured local folder and write JSON outputs; they make no network calls. We found no credentials other than the public Algolia search key, and no telemetry.

Operational Notes & Known Limitations

Known Limitations

•Needs Node.js (and Git for new projects) on your machine; every command goes through npx, bunx, yarn or pnpm
•Optional features need your own keys: ElevenLabs for the voiceover guide (ELEVENLABS_API_KEY), Mapbox, MapTiler or Google Map Tiles for some map techniques
•The router description is five words long, so ask for "Remotion" by name; Antigravity picks skills by their description
•Written for agents with slash commands (README examples such as /remotion-create) and for Codex (each guide has an agents/openai.yaml); the repository never mentions Antigravity (we searched)
•Copying all 12 folders instead of just remotion-best-practices puts the same guides into your skills folder twice
•Studio is a long-running local server; the interactivity guide lets edits made in Studio write back to your code
•The 2 map data-prep scripts need your own GeoJSON input (they ship sample outputs instead) and import @turf/turf

Frequently Asked Questions

Is the Remotion skill safe?

In our static review of commit 7ba4dcf it is mostly Markdown plus example components. The agent is told to run npm packages (create-video, remotion add, remotion studio, remotion render), to query Remotion's docs search, and to load remote sample media. 2 optional Node scripts only read and write local GeoJSON/JSON files.

How do I install the Remotion skill in Antigravity?

Clone remotion-dev/skills and copy only skills/remotion-best-practices into .agents/skills/ (or ~/.gemini/config/skills/), then ask "What skills do you have?" (CLI: /skills). The README does not mention Antigravity.

Will it render videos without asking?

No. The router says to render only when you ask explicitly ("render", "export", "give me the MP4") and to show the Studio preview instead.

Does it need an API key?

Not for normal use. Voiceover (ElevenLabs) and some map techniques (Mapbox, MapTiler, Google Map Tiles) need your own key; captions transcription uses @remotion/whisper-webgpu, which runs locally.

Which skill folder should I copy?

Only remotion-best-practices. It bundles the other 11 skills; copying all 12 folders duplicates them.

Supported Platforms

antigravityclaudecursorcodex

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More media skills #remotion #video #react #animation Use cases

Related Skills

🎨

Google Veo

@alohc

Unofficial Python MCP server by Andrew Lo (alohc) that lets an AI assistant generate, animate and extend short Google Veo video clips with your Gemini API key and save them as local MP4 files.

Static reviewneeds API keynetwork accesswrites files

mediavideo

🎨