Agent skill · remotion-dev
react-scan
Capture and analyze Remotion Studio React render profiles through development-only WebMCP tools. Use when diagnosing unnecessary re-renders, slow commits, frame-reactive component trees, or when comparing render performance before and after a change.
What it needs
About 2k tokens when loaded.
What this skill does
React Scan Use targeted captures to optimize measured Studio interactions. Do not infer a performance problem from source alone when the workflow can be reproduced. Record a capture Start from the repository root: For the Brand Studio, run: Wait for Studio to finish building, open the printed Studio URL with the browser, and let the page settle. The React Scan WebMCP tools are only registered in this development capture mode. Call startreactscanrecording, then use browser-use to perform one named interaction three times. Call stopreactscanrecording immediately afterwards. Keep the recording short so startup, HMR, and unrelated interactions do not dominate the data. Call getreactscanrecording to return the raw events and an agent-oriented summary. After retrieving the recording, stop Studio with Ctrl+C. Recordings only live in the WebMCP result; React Scan does not send them to a separate HTTP collector. React Scan replaces the React DevTools profiling-hook channel while active. Do not record with the React DevTools Timeline Profiler at the same time. Analyze the evidence Read the summary returned by getreactscanrecording first. Confirm the capture contains commit events and inspect profilingHooksStatuses; do not interpret a missing profiling channel as an idle application. Prioritize components with high total self duration, repeated expensive renders, or a clear user-visible slow commit. Inclusive duration contains child work and can double-count a subtree, so use it to locate an expensive boundary, then use self duration and the raw tree to identify the actual work. Use render causes as evidence, not automatic prescriptions: High parentRenderCount with no relevant prop, state, context, or hook change suggests a stable memoization boundary. Repeated changed props suggest checking referential stability at the source location before adding memoization. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/react-scan