remotion-best-practices

Files (14)

• SKILL.md
• openai.yaml · agents/
• remotion-icon.png · assets/
• remotion-captions
• remotion-create
• remotion-docs
• remotion-interactivity
• remotion-maps
• remotion-markup
• remotion-multimedia
• remotion-render
• remotion-saas
• remotion-studio
• remotion-upgrade

SKILL.md (first lines)

## Official docs mirror (read first)

Before building or changing RemotionUI components, read the mirrored official docs in **[../docs/INDEX.md](../docs/INDEX.md)**.
They are fetched from `remotion-dev/remotion` MDX (same source as [remotion.dev/docs](https://www.remotion.dev/docs)).

Refresh the mirror: `pnpm docs:remotion`

Key pages for RemotionUI:

- [../docs/sequence.md](../docs/sequence.md) — `layout="none"`, timing children
- [../docs/absolute-fill.md](../docs/absolute-fill.md) — full-frame layering only
- [../docs/animating-properties.md](../docs/animating-properties.md) — `useCurrentFrame()` + `interpolate()`
- [../docs/transitions-transitionseries.md](../docs/transitions-transitionseries.md) — scene transitions


## 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)

## Rendering

For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](../remotion-render/SKILL.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/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).

From riaz37/remotion-ui, MIT.

More from riaz37/remotion-ui