Agent skill · remotion-dev
product-recording
Prepare Remotion Studio for a user-recorded product demo with Canvas Capture, then import the downloaded take into packages/brand as an editable composition. Use for recording Studio interactions, timeline demos, and product shots.
What it needs
About 3k tokens when loaded.
What this skill does
Product recording Prepare the browser and shot, let the user perform and record the interaction, then bring the original capture into packages/brand. This is an internal Remotion workflow; keep this skill in .agents/skills. Prepare Studio and Chrome 1. Use canvas-capture-extension to build and install the extension in its durable directory. Reload the installed extension through chrome://extensions after rebuilding; a successful build alone does not refresh Chrome's loaded extension. 2. Use an existing compatible Chrome with Canvas Draw Element enabled. Preserve unrelated browser tabs and unfinished recordings. 3. Find the requested composition's registration and owning package. Follow studio for dependency/build preparation and server startup, but start in the owning package and open the recording in compatible Chrome. Use bunx remotion studio --no-open and the exact URL printed by that invocation, including when it reports an existing server. Do not assume port 3000 belongs to this checkout. 4. Open the composition with studioPixelRatio=4 in the query string, preserving any other URL parameters. For example, if Studio reports port 3001: The parameter increases Studio's canvas backing resolution for sharp timeline captures. It does not set the extension's output resolution. RollerSkiRoughCut lives in packages/jonnys-videos; locate other requested compositions rather than assuming they live in packages/example. 5. Verify the requested composition and current timeline are visible. Activate Canvas Capture through its toolbar icon or Extensions menu. Prepare an optional shot and hand off Arrange the viewport, timeline height/zoom, playhead, and sidebars as needed for the requested demonstration. Do this before framing the shot. Use the extension's setupshot and getshot WebMCP tools when available. They are exposed after activating the extension. Choose the viewport, one visible element, or a rectangle; inspect a still with getshot and preview: true. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/product-recording