Remotion

Improve Remotion Studio rendering performance by limiting which components update with every frame. The skill guides on-demand timeline reads and React.memo usage, helping keep stable components from rerendering unnecessarily while preserving updates where the displayed frame matters.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reduce unnecessary rerenders on every frame
• Read the current frame only when an event needs it
• Move frame-dependent rendering into a small child component

Publish updated Chrome binaries to Remotion Lambda’s test region, update layer references and version documentation, and verify rendering with Docker before rolling the update out to all supported regions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Test a Chrome update before regional rollout
• Update Lambda layer references and Chrome version documentation
• Verify rendering with Docker across platforms

Find current Remotion documentation for a feature or API, the interface used by code. Search for relevant pages and read their Markdown text so implementation follows the documentation available now.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Check how to use a Remotion API
• Find documentation for a feature before implementation
• Read relevant documentation pages as Markdown

Classify Remotion Studio settings as fixed at startup or reloadable, then wire every component that uses them consistently. Guide implementation and review of configuration reloads, default resets, CLI precedence, and render queue settings.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add a Studio config setter or CLI option
• Review inconsistent setting updates across Studio components
• Keep preview and render queue settings aligned

Launch the Remotion documentation site locally and open it in the Codex in-app browser. The workflow installs dependencies, builds the project, starts Docusaurus, and reports the actual preview URL and server status.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Launch the local Remotion documentation site
• Preview documentation changes in Docusaurus
• Open the documentation preview inside Codex

Move media assets from a Remotion repository to Cloudflare R2, update source references to public URLs, and verify that uploaded files match the originals before removing local copies.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Moving repository media assets to Cloudflare R2
• Updating source references to hosted media URLs
• Verifying uploaded files before deleting local copies

Coordinate a new Remotion release, from authentication and builds to npm package verification and release notes. Promote packages to latest only after every package is downloadable, then prepare a GitHub release for approval.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building and publishing a new Remotion version
• Checking all npm packages before updating latest
• Preparing release notes from commits and pull requests

Import a recorded Remotion Canvas Capture as an editable composition with cursor keyframes, without using Studio controls. The workflow generates and registers a component, copies the video asset, and installs missing dependencies through an internal experimental command.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Importing a recording as an editable composition
• Adding a capture without interacting with Studio
• Setting composition dimensions and frame rate during import

Export videos or still images from Remotion using its command-line tools. The skill identifies the commands for each output type and points to option references, with a separate guide for rendering videos with transparent backgrounds.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Export a Remotion video
• Render a still image from Remotion
• Find command options for rendering

Prepare Remotion homepage videos from a transparent ProRes master. Create Chrome WebM and Safari MP4 versions, verify transparency and 540-by-540 dimensions, and copy the finished assets into both the promotional site and documentation folders.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Replacing videos in the homepage creator strip
• Creating transparent WebM videos for Chrome
• Creating MP4 fallback videos for Safari

Audit GitHub issues to find open work outside a masterplan, distinguishing missing parents from missing plan ancestors. Preview or apply removal of closed issues from the hierarchy while keeping their open children connected to the plan.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Finding open issues outside a masterplan
• Distinguishing missing parents from missing plan ancestors
• Checking issue organization in automation

Run Remotion formatting and style checks with `bun run stylecheck` and continue until the command exits successfully. Errors from `lambda-go` are treated as nonblocking when carrying out this formatting workflow.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Run Remotion formatting checks
• Address formatting issues until style checks pass
• Recheck whether formatting work is complete

Add interactive animation demos to Remotion documentation pages. This skill covers creating React components, registering playback settings, embedding demos in MDX, and adding controls such as sliders, checkboxes, dropdowns, and text inputs.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add an animation demo to a documentation page
• Let readers adjust demo values with sliders
• Configure demo playback settings

Update Remotion and its related packages while respecting the project's package manager and workspace structure. The workflow aligns package versions, updates the lockfile and installed Remotion skills, and checks the resulting dependency changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Updating Remotion to the latest stable release
• Aligning versions across related packages
• Updating dependencies across workspaces

Launch the @remotion/player example app locally and open it in the Codex in-app browser. The workflow prepares dependencies, builds the project, starts the development server, and reports its URL and whether it was newly started or already running.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Launch the player example locally
• Open the example in the Codex in-app browser
• Check the development server URL and running status

Review newly added optional inputs in Remotion changes and convert internal ones into required values that accept null. Update callers and absence checks while preserving compatibility for public APIs that must remain optional.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Review newly added optional parameters in a PR
• Make internal React props explicitly accept null
• Preserve public API compatibility during refactoring

Apply consistent deprecation notices to public Remotion APIs that remain available. Use TypeScript annotations and documentation formatting to mark APIs as no longer recommended, identify replacements, and review whether both representations follow the conventions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Marking an existing public API as deprecated
• Adding guidance on a replacement API
• Reviewing deprecation annotations and documentation

Use Mediabunny, a browser library for audio and video, to read basic media properties. This skill directs you to guides for retrieving audio duration, video duration, and video width and height.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Retrieving an audio file's duration in seconds
• Retrieving a video file's duration in seconds
• Retrieving a video's width and height

Apply Remotion Studio’s interaction conventions to buttons and links: keep the default cursor, brighten text and icons on hover, and show a visible focus indicator for keyboard navigation using shared styling helpers.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Style a new Studio button or link
• Keep text and icons consistent on hover
• Retain visible focus for keyboard navigation

Organize GitHub issues using parent and child relationships and links showing which tasks must finish first. Use gh CLI to create, change, remove, and inspect relationships, including links across repositories.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Breaking a large issue into linked sub-issues
• Recording which issues must be completed first
• Linking dependent issues across repositories

Get a pull request ready by checking automated checks, merge conflicts, and local changes. Investigate failures, fix their causes, resolve conflicts, and run relevant local checks, with confirmation before pushing newly created commits.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Fixing failed automated checks on a pull request
• Resolving conflicts with the base branch
• Checking uncommitted or unpushed changes

Launch the local Remotion Convert app and open it in the Codex in-app browser to inspect its interface. The workflow prepares dependencies, builds the project, starts the development server, and reports the actual local URL.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Launch convert.remotion.dev locally
• Inspect the Convert interface in the Codex browser
• Check the local server URL and startup status

Add a reported Remotion bug to the bugs API with its affected versions, a short title, and upgrade guidance. Follow the existing entry format and place the new record first so recent bugs appear at the top.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding a reported bug to the Remotion bugs API
• Recording which versions a bug affects
• Including upgrade guidance in a bug description

Structure Remotion code so elements remain editable in Studio. Follow markup patterns that support selection, dragging, resizing, rotation, style changes, and animation keyframes, including editable SVG shapes and their transitions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Making titles and images editable in Studio
• Keeping animation keyframes editable
• Editing SVG shapes and their transitions visually