Remotion Dev Skills

3D content in Remotion using Three.js and React Three Fiber.

Accept an external Remotion Element contribution by verifying its committed previews, uploading them to R2, removing the temporary assets, and preparing the…

Add a new Remotion bug entry to packages/bugs/api/[v].ts. Use when the user describes a bug and affected Remotion versions that should be surfaced through the…

Add a new Remotion bug entry to packages/bugs/api/[v].ts. Use when the user describes a bug and affected Remotion versions that should be surfaced through the…

Add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when…

Add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when…

Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, tests, formatting, and…

Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, tests, formatting, and…

Add a new expert to the Remotion experts page

Add a new expert to the Remotion experts page

Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, tests, and release checklist…

Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, tests, and release checklist…

Add a new sound effect to @remotion/sfx

Add a browser WebCodecs bug to the Remotion Mediabunny WebCodecs bugs docs page. Use when given a Chromium, WebKit, or Firefox issue URL that should be tracked…

Add a browser WebCodecs bug to the Remotion Mediabunny WebCodecs bugs docs page. Use when given a Chromium, WebKit, or Firefox issue URL that should be tracked…

Rebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension. Use when the extension needs to be restored after a Codex worktree…

Checkout a requested branch or ref in the Remotion repo, rename the current task to the associated PR title when running in Codex, then install dependencies…

Checkout a requested branch or ref in the Remotion repo, then install dependencies and build. Use when the user asks to checkout a ref and prepare the…

Start the local @remotion/convert app and open it in the Codex browser. Use when the user invokes /convert or $convert, asks to launch convert.remotion.dev…

Start the local @remotion/convert app and open it in the Codex browser. Use when the user invokes /convert or $convert, asks to launch convert.remotion.dev…

Reference for how deprecation of public Remotion APIs is represented in TypeScript source and documentation. Use when adding, reviewing, or discussing a…

Start the Remotion docs site and open it in the Codex browser. Use when the user invokes /docs or $docs, asks to launch the local documentation site, or wants…

Start the Remotion docs site and open it in the Codex browser. Use when the user invokes /docs or $docs, asks to launch the local documentation site, or wants…

Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.

Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.

Audit and clean the Remotion GitHub masterplan hierarchy. Use when finding open issues that lack a masterplan ancestor, identifying orphaned issues that need a…

Fix a Dependabot PR by updating all monorepo instances of the dependency, running bun install, and pushing

Fix a Dependabot PR by updating all monorepo instances of the dependency, running bun install, and pushing

Track Remotion CI flakes in issue

Track Remotion CI flakes in issue

Run Remotion formatting and style checks until they pass. Use when the user asks to fix formatting or run the formatting command.

Run Remotion formatting and style checks until they pass. Use when the user asks to fix formatting or run the formatting command.

Manages stacked PRs and splits multi-part work into reviewable branches with gh-stack. Use for stack creation, viewing, edits, push, submit, sync, rebase,…

Use when rendering or replacing Remotion homepage creator strip videos, especially transparent Chrome WebM and Safari MP4 assets copied into both promo-pages…

Use when rendering or replacing Remotion homepage creator strip videos, especially transparent Chrome WebM and Safari MP4 assets copied into both promo-pages…

Install and verify the pinned Chrome for Testing build used by the private Remotion Canvas Capture extension on Apple Silicon macOS. Use when setting up Canvas…

Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.

Create or update GitHub issues with correct Remotion naming and safe multiline Markdown handling

Manage GitHub Issues 2.0 relationships with gh CLI: parent issues, sub-issues, blocked-by, and blocking links.

Manage GitHub Issues 2.0 relationships with gh CLI: parent issues, sub-issues, blocked-by, and blocking links.

Automate pull request creation with formatted commits and branch management. Ensures you're not on the main branch, creating a feature branch if needed Runs Oxfmt code formatting across all affected packages before committing Formats commits and PR titles using package name from package.json (e.g., " @remotion/shapes : Add heart shape") Uses the gh CLI to open the pull request automatically after pushing changes

Multimedia handling with the Mediabunny library

Multimedia handling with the Mediabunny library

Multimedia handling with the Mediabunny library

Multimedia handling with the Mediabunny library

Wait for a Remotion pull request to become mergeable, handle merge conflicts, distinguish genuine CI failures from flakes, rerun flaky checks through the flake…

Scaffold a new Remotion Element with a correctly configured preview composition for development in the docs Remotion Studio.

Fix newly added optional parameters, optional React props, and optional type/interface members in Remotion monorepo diffs by converting internal APIs to…

Fix newly added optional parameters, optional React props, and optional type/interface members in Remotion monorepo diffs by converting internal APIs to…

Start the @remotion/player example app and open it in the Codex browser. Use when the user invokes /player-example or $player-example, asks to launch the…

Start the @remotion/player example app and open it in the Codex browser. Use when the user invokes /player-example or $player-example, asks to launch the…

Open a pull request for the current feature

Open a pull request for the current feature

Correct naming for a PR

Review or correct a Remotion pull request title

Resolve CI failures, merge conflicts, or local branch changes to get a PR ready

Resolve CI failures, merge conflicts, or local branch changes to get a PR ready

Finalize a developed Remotion Element, add it to the docs gallery, render its previews, and run repository checks.

Release a new Remotion version

Release a new Remotion version

Skills for making videos with Remotion.

Best practices for Remotion - Video creation in React

Router for all Remotion skills

Best practices for Remotion - Video creation in React

Best practices for Remotion - Video creation in React

Best practices for Remotion

Domain-specific knowledge base for building videos with Remotion and React. Covers 30+ rule files spanning animations, audio, assets, 3D content, charts, text, transitions, and composition management Includes specialized guidance for captions, FFmpeg operations, audio visualization, and sound effects integration Provides patterns for dynamic metadata calculation, media inspection (duration, dimensions, frame extraction), and parametrizable compositions Supports advanced features like Lottie...

Dealing with captions in Remotion

Transcribing, displaying and animating captions

Transcribing, displaying and animating captions

Dealing with captions in Remotion

Dealing with captions in Remotion

Creating a new Remotion video

Create a new Remotion video

Creating a new Remotion video

Creating a new Remotion video

Search Remotion documentation

Search Remotion documentation

Search Remotion documentation

Search Remotion documentation

Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.

Structure Remotion markup for interactivity

Structure Remotion markup for interactivity

Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.

Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.

Remotion Map animation knowledge

Remotion Map animation knowledge

Remotion Map animation knowledge

Remotion Map animation knowledge

Content, animation and effects best practices

Best practices for writing Remotion React Markup

Best practices for writing Remotion React Markup

Best practices for writing Remotion React Markup

Interacting with Mediabunny

Interacting with Mediabunny

Interacting with Mediabunny

Interacting with Mediabunny

Export a Remotion video

Export a Remotion video

Best practices for rendering videos

Best practices for rendering videos

Best practices for rendering videos

Build an app with Remotion

Building video apps with Remotion - framework, rendering and Player advice

Building video apps with Remotion - framework, rendering and Player advice

Building video apps with Remotion - framework, rendering and Player advice

Preview a Remotion video

Preview a Remotion video

Preview a Remotion video

Preview a Remotion video

Upgrade Remotion, and related packages

Upgrade Remotion, and related packages

Upgrade Remotion, and related packages

Upgrade Remotion, and related packages

Scaffold a new Remotion Element with a correctly configured preview composition for development in the docs Remotion Studio.

Document Remotion skill placement. Use when adding, moving, or editing Remotion skills to decide whether a skill belongs in .agents/skills as an internal skill…

Document Remotion skill placement. Use when adding, moving, or editing Remotion skills to decide whether a skill belongs in .agents/skills as an internal skill…

Start Remotion Studio from packages/example and open it in the Codex browser. Use when the user invokes /studio or $studio, asks to launch the example Studio,…

Start Remotion Studio from packages/example and open it in the Codex browser. Use when the user invokes /studio or $studio, asks to launch the example Studio,…

Classify and wire Remotion Studio config options as either startup-fixed or reloadable while preventing mixed lifecycle behavior across consumers. Use when…

Diagnose and fix Remotion Studio UI bugs caused by the global CSS reset. Use when nested text or SVG icons have incorrect color, typography, sizing, hover…

Guidance for Remotion Studio UI changes where the global CSS reset affects nested elements. Use when editing packages/studio UI, especially when adding wrapper…

Optimize Remotion Studio render performance by minimizing frame-reactive component surfaces, preferring imperative timeline state reads, and memoizing stable…

Finalize a developed Remotion Element, add it to the docs gallery, and prepare either a direct member submission or an externally reviewable contribution.

Publish Remotion Lambda Chrome binaries to the eu-central-1 test region and update hosted layer and Chrome version references. Use when updating Chrome…

Publish Remotion Lambda Chrome binaries to the eu-central-1 test region and update hosted layer and Chrome version references. Use when updating Chrome…

Update the current Remotion branch with the latest canonical main branch. Use when asked to update or sync from upstream main, merge the latest main into a…

Update Remotion's ffmpeg-next Git revision to a published rust-ffmpeg commit, refresh Cargo.lock, rebuild all supported compositor binaries, validate the…

Update Remotion homepage GitHub star counts. Use when asked to refresh the displayed GitHub star count and push the change to main.

Update Remotion homepage GitHub star counts. Use when asked to refresh the displayed GitHub star count and push the change to main.

Update `AvailableFrom` in a PR to the next Remotion patch version (`main` + `0.0.1`).

Update `AvailableFrom` in a PR to the next Remotion patch version (`main` + `0.0.1`).

Upgrade the caniuse-lite override in the Remotion repo. Use when asked to update caniuse-lite to the latest npm version.

Upgrade the caniuse-lite override in the Remotion repo. Use when asked to update caniuse-lite to the latest npm version.

Upgrade Mediabunny and related @mediabunny packages across the Remotion repo. Use when asked to update Mediabunny to the latest version.

Upgrade Mediabunny and related @mediabunny packages across the Remotion repo. Use when asked to update Mediabunny to the latest version.

Upload large Remotion repository assets to the Cloudflare R2 bucket behind remotion.media and replace local public/ assets with hosted URLs. Use when a file is…

Upload large Remotion repository assets to the Cloudflare R2 bucket behind remotion.media and replace local public/ assets with hosted URLs. Use when a file is…

Implement or review a Remotion 5 breaking change while the v4 and v5 release lines still share code. Use when v4 behavior and public types must remain…

Set up a Codex monitor for Vercel deployments and preview URLs. Use when the user invokes /vercel or $vercel, asks Codex to watch or monitor a Vercel…

Set up a Codex monitor for Vercel deployments and preview URLs. Use when the user invokes /vercel or $vercel, asks Codex to watch or monitor a Vercel…

The version of Remotion we are working on.

The version of Remotion we are working on.

Generate a report about a video

Generate a report about a video

Guidance for working on Remotion Studio Visual Mode, sequence identity, node paths, symbolicated stacks, override IDs, and hot reload behavior. Use when…

Guidance for working on Remotion Studio Visual Mode, sequence identity, node paths, symbolicated stacks, override IDs, and hot reload behavior. Use when…

Visual snapshot testing for web renderer components using vitest fixtures. Create test fixtures in packages/web-renderer/src/test/fixtures that define a React component, dimensions, frame rate, and duration Register fixtures in packages/web-renderer/src/test/Root.tsx to enable preview functionality Write test cases that render stills using renderStillOnWeb() and validate output with testImage() snapshot comparison Run tests with bunx vitest src/test/video.test.tsx and update documentation in...

Add a test case to the web renderer

Guides for writing and editing Remotion documentation. Use when adding docs pages, editing MDX files in packages/docs, or writing documentation content.

Guidelines and templates for writing Remotion API documentation in MDX format. Create one .mdx file per API in packages/docs/docs , add it to sidebars.ts , and run bun render-cards.ts to generate social preview cards Use ### headings for API properties (not bullet points), add ? suffix for optional parameters, and include default values naturally in descriptions Prefer type-safe code snippets with twoslash validation; use // ---cut--- to hide imports and always add title attributes to...

Rules for writing and reviewing tests in the Remotion repository. Use whenever adding, editing, or reviewing tests, especially for Studio UI, rendering, CLI,…