Agent skill · millionco
performance
Diagnose React runtime performance with React Doctor traces, live render outlines, Long Animation Frames, interaction timing, and component render evidence. Use when invoked as `/performance` for a slow interaction, unexpected re-renders, or a measured before-and-after comparison.
What it needs
About 3k tokens when loaded.
What this skill does
Diagnose React runtime performance Measure one reproducible interaction, connect browser work to React renders, and report only conclusions supported by the trace. Define the interaction Before recording: 1. Identify the target URL 2. Write the exact actions to reproduce 3. Choose the expected result 4. Confirm whether authentication is required Use a production build when available. Development builds add framework work that can distort render and script timings. If you must measure a development build, label that limitation in the report. Record the trace Run the scan in an interactive terminal: React Doctor opens an isolated Chrome profile. Perform the planned interaction while purple outlines identify rendered components. Press Enter after the interaction settles; recordings stop automatically after five minutes. Interactive users can omit the URL and choose a detected localhost app or enter another URL. Agents must always pass the explicit URL so automated runs never wait for input. For an authenticated session, connect through the Chrome DevTools Protocol (CDP): Use a dedicated debug profile for CDP because Chrome tracing is browser-wide. Sign in, close every non-blank tab, and then start the scan. React Doctor closes leftover blank tabs before tracing. Never request cookies, copy a browser profile, or close an externally managed browser. The compressed .json.gz trace can contain URLs, source paths, and application behavior. Keep it local unless an upload is explicitly approved. Read the report Evaluate the report in this order: 1. Capture support: confirm React detection, build type, React tracks, and Long Animation Frame support 2. User impact: inspect the worst interaction, total blocking duration, Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS) 3. Browser work: inspect long frames and script hotspots for event handling, JavaScript, style, layout, and paint cost 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills millionco/performance