remotion-best-practices

## 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/SKILL.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/SKILL.md) ## React Markup Best Practices If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/SKILL.md) ## Maps For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/SKILL.md). ## Multimedia For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/SKILL.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/SKILL.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. Start the preview server after building the composition: ### If you have an in-app browser If you are e.g. Codex, GitHub Copilot or any other desktop agent with an in-app browser, run: ```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. You can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`. :::note The Studio supports WebMCP tools. ::: ### If you do not have an in-app browser This will open the Studio in the browser or-refocus it if it is already open. ```bash npx remotion studio ``` ### More options To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/SKILL.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/SKILL.md). For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/SKILL.md) ## Captions When working with Captions, load [Remotion Captions](./remotion-captions/SKILL.md). ## Creating a SaaS, automation or application Use the [Remotion SaaS skill](./remotion-saas/SKILL.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/SKILL.md). ## Upgrading To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/SKILL.md).