skill
Remotion Best Practices
Router for all Remotion skills
About
## 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)
## Rendering
For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/REFERENCE.md)
## Opening Remotion Studio
To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/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).
Install
Run this command
git clone https://github.com/remotion-dev/skills && cp -r skills/skills/remotion-best-practices ~/.claude/skills/Works with
Manual steps
Clone the repository and copy the `skills/remotion-best-practices` folder into your Claude skills directory. Compatible with Claude Code, Cursor, Codex, and any Agent Skills-compatible agent.
Frequently asked questions
What is the Remotion Best Practices skill?
Router for all Remotion skills
How do I install Remotion Best Practices?
Run this in your terminal:
git clone https://github.com/remotion-dev/skills && cp -r skills/skills/remotion-best-practices ~/.claude/skills/Which AI tools does Remotion Best Practices work with?
It works with claude_app, claude_code, claude_api, cursor, codex, windsurf, cline, zed.
Who made Remotion Best Practices?
Remotion.
Is Remotion Best Practices free?
Yes, it is free to use.
npx skills add google/agents-cli
npx skills add google/agents-cli
npx skills add google/agents-cli
npx skills add google/agents-cli
npx skills add google/agents-cli
npx skills add prisma/skills
Audit before you install
Run any source through our checks - AI visibility, security, performance, and stack detection.
Automated Web Security Scan
security
PageSpeed Analyzer
performance
AI Content Quality Test
arabic content
AI Agent / MCP Server Tester
ai testing
Site Stack Detector
migration
AI SEO / AEO / GEO Audit
ai visibility
llms.txt Generator
ai visibility
Readability Score
arabic content
Schema / JSON-LD Builder
ai visibility
AI Cost Calculator
ai testing
Headline Analyzer
arabic content