Remotion Skills
This skill is a router for all Remotion video-creation operations. It mirrors the upstream remotion-dev/skills repository. Based on user intent, read the corresponding sub-skill SKILL.md before executing.
Sub-skills are authoritative. The files under each sub-skill directory are upstream content kept verbatim — do not edit them; re-sync from upstream instead. The table below is the index, the sub-skill SKILL.md is the instruction.
Sub-skill Index
| Sub-skill |
Entry |
Use When |
| New Project |
remotion-create/remotion-create.md |
Scaffold a new Remotion project (npx create-video), design a video, start the Studio preview |
| React Markup |
remotion-markup/remotion-markup.md |
Writing Remotion React markup — the core: animations, media, sequences, timing, fonts, effects, maps, Lottie, DOM measurement, transitions, trimming |
| Rendering |
remotion-render/remotion-render.md |
Rendering videos and stills (npx remotion render/still), transparent videos |
| Captions |
remotion-captions/remotion-captions.md |
Transcribing, importing SRT, and displaying captions/subtitles |
| Interactivity |
remotion-interactivity/remotion-interactivity.md |
Making animations editable in Remotion Studio Visual Mode |
| SaaS / Apps |
remotion-saas/remotion-saas.md |
Building video apps — <Player>, rendering on Lambda/Vercel/Cloudflare/Node, client-side rendering, choosing a framework |
| Mediabunny |
mediabunny/mediabunny.md |
Multimedia handling in the browser — get audio/video duration, get video dimensions |
How to route
- Identify the user's intent against the Use When column.
- If the task spans several domains (e.g. "build a Remotion SaaS that renders captions"), load each relevant sub-skill in the order the task needs them.
- Read the sub-skill's entry file (
<name>/<name>.md, denested from SKILL.md so sub-skills are not auto-discovered), then follow any references/-style .md files it points to (each sub-skill folder carries its own detail files).
- Sub-skills reference each other via relative paths like
../remotion-markup/remotion-markup.md — these resolve within this remotion/ directory.
Notes on cross-references
Some upstream sub-skill files contain links like [Remotion Best Practices](../remotion-best-practices/remotion-best-practices.md). remotion-best-practices/ is a local shim (not an upstream sub-skill) that forwards to this top-level router — treat those links as "go back to the Remotion router" (i.e. this file). All other sibling cross-references (../remotion-markup/remotion-markup.md, ../remotion-captions/remotion-captions.md, etc.) resolve correctly.
1---2name: remotion3description: Programmatic video creation in React with Remotion. Use this skill whenever the user writes Remotion, npx create-video, remotion studio/render/still, useCurrentFrame/interpolate/Sequence, Composition, Mediabunny, or any React-driven video/animation/caption/motion-graphics task — including scaffolding a project, writing markup, rendering/exporting (incl. transparent), adding captions/subtitles, making Studio-editable animations, building a Remotion SaaS (Player/Lambda/Vercel/Cloudflare), or getting media metadata. Do NOT use for ffmpeg-only pipelines, video.js/players, WebRTC live streaming, framer-motion web animation, or After Effects.4---56# Remotion Skills78This skill is a router for all Remotion video-creation operations. It mirrors the upstream `remotion-dev/skills` repository. Based on user intent, read the corresponding sub-skill `SKILL.md` before executing.910**Sub-skills are authoritative.** The files under each sub-skill directory are upstream content kept verbatim — do not edit them; re-sync from upstream instead. The table below is the index, the sub-skill `SKILL.md` is the instruction.1112## Sub-skill Index1314| Sub-skill | Entry | Use When |15|-----------|-------|----------|16| New Project | [`remotion-create/remotion-create.md`](remotion-create/remotion-create.md) | Scaffold a new Remotion project (`npx create-video`), design a video, start the Studio preview |17| React Markup | [`remotion-markup/remotion-markup.md`](remotion-markup/remotion-markup.md) | Writing Remotion React markup — the core: animations, media, sequences, timing, fonts, effects, maps, Lottie, DOM measurement, transitions, trimming |18| Rendering | [`remotion-render/remotion-render.md`](remotion-render/remotion-render.md) | Rendering videos and stills (`npx remotion render/still`), transparent videos |19| Captions | [`remotion-captions/remotion-captions.md`](remotion-captions/remotion-captions.md) | Transcribing, importing SRT, and displaying captions/subtitles |20| Interactivity | [`remotion-interactivity/remotion-interactivity.md`](remotion-interactivity/remotion-interactivity.md) | Making animations editable in Remotion Studio Visual Mode |21| SaaS / Apps | [`remotion-saas/remotion-saas.md`](remotion-saas/remotion-saas.md) | Building video apps — `<Player>`, rendering on Lambda/Vercel/Cloudflare/Node, client-side rendering, choosing a framework |22| Mediabunny | [`mediabunny/mediabunny.md`](mediabunny/mediabunny.md) | Multimedia handling in the browser — get audio/video duration, get video dimensions |2324## How to route25261. Identify the user's intent against the **Use When** column.272. If the task spans several domains (e.g. "build a Remotion SaaS that renders captions"), load each relevant sub-skill in the order the task needs them.283. Read the sub-skill's entry file (`<name>/<name>.md`, denested from `SKILL.md` so sub-skills are not auto-discovered), then follow any `references/`-style `.md` files it points to (each sub-skill folder carries its own detail files).294. Sub-skills reference each other via relative paths like `../remotion-markup/remotion-markup.md` — these resolve within this `remotion/` directory.3031## Notes on cross-references3233Some upstream sub-skill files contain links like `[Remotion Best Practices](../remotion-best-practices/remotion-best-practices.md)`. `remotion-best-practices/` is a local shim (not an upstream sub-skill) that forwards to this top-level router — treat those links as "go back to the Remotion router" (i.e. this file). All other sibling cross-references (`../remotion-markup/remotion-markup.md`, `../remotion-captions/remotion-captions.md`, etc.) resolve correctly.
FradSer