Agent skill · remotion-dev
studio-dev
Develop or review Remotion Studio features and UI. Apply Studio principles for optimistic updates, agent access through code or WebMCP, iframe-safe hover behavior, design consistency, mode availability, and performance verification.
What it needs
About 5k tokens when loaded.
What this skill does
Studio development Apply these principles when implementing or reviewing Studio itself. They cover the regular Studio and Browser Studio at remotion.new. Optimistic operations Every operation must have an optimistic update. Reflect the user's intent immediately instead of waiting for a server request, filesystem write, codemod, or hot reload. For work whose result is not yet known, show its pending state immediately without claiming completion. Reconcile the optimistic state with the persisted result. Preserve it until the updated source/configuration arrives through HMR, and handle failures with a rollback and visible error. A late response or rollback must not overwrite a newer edit or undo. Use the existing mutation queue and history mechanisms; see enqueueStudioSourceMutation and optimistic composition metadata. Agent, interactive, and code parity Every state and action must be available to an agent through project code or WebMCP. Anything already editable in project source satisfies this requirement. Moving or trimming a sequence, for example, does not need a WebMCP tool. Do not add redundant tools solely to mirror source-backed editing actions. Expose transient Studio state and actions through WebMCP when project source cannot represent them, such as playback, selection, pending render jobs, and render cancellation. Follow the existing registrations in WebMcp.tsx and the relevant feature's tools. Document every new WebMCP tool and changes to its inputs or outputs in the WebMCP documentation, including pending state, results, and mode availability. Every source-backed edit must work interactively and by editing project code, which also provides agentic access. Direct code changes must appear correctly after hot reload. Where a WebMCP editing tool exists, it must use the same source mutation/history path as the UI. Avoid separate sources of truth. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/studio-dev