Webperf Interaction
Intelligent interaction performance analysis with automated workflows for INP...
Install
npx skills add nucliweb/webperf-snippets --skill webperf-interaction -g -a claude-code -y- Repository
- nucliweb/webperf-snippets1.5k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking. Includes decision trees that automatically run script attribution when long frames detected, break down input latency phases, and correlate layout shifts with interactions. Features workflows for complete interaction audit, third-party script impact analysis, and animation performance debugging. Cross-skill integration with Core Web Vitals (INP/CLS correlation) and Loading (script execution analysis). Use when the user asks about slow interactions, janky scrolling, unresponsive pages, or INP optimization. Compatible with Chrome DevTools MCP.
WebPerf: Interaction & Animation
JavaScript snippets for measuring web performance in Chrome DevTools.
Running a script
- Run the script with
mcp__chrome-devtools__evaluate_scriptand read the object it returns. The scripts have no console output, so the returned object is the result:script,statusand the metric data (value,rating,details,items,issues), as described inreferences/schema.md. - When
statusis"tracking", the script keeps observing the page. After the interactions, call the function named ingetDataFnwith anothermcp__chrome-devtools__evaluate_scriptcall, for examplegetINP(), and read the object it returns. - When
statusis"error"or"unsupported", readerror: the page may not have loaded yet, or the browser lacks the API.
Without Chrome DevTools MCP, run the same snippet with the webperf-snippets CLI, which loads the page in headless Chromium and prints the same result objects: npx webperf-snippets <url> --snippet <Name> --json, where <Name> is the script name without .js. It needs Playwright and Chromium (npm install --save-dev webperf-snippets playwright, then npx playwright install chromium), and tracking snippets take --interact-script <file> to drive the interactions.
Scripts
scripts/DOM-Size-and-Depth.js, DOM size and depthscripts/Forced-Synchronous-Layout.js, Forced synchronous layout detectorscripts/Input-Latency-Breakdown.js, Input latency breakdownscripts/Interactions.js, Interactionsscripts/Layout-Shift-Loading-and-Interaction.js, Layout shift trackingscripts/Long-Animation-Frames-Helpers.js, LoAF helpersscripts/Long-Animation-Frames-Script-Attribution.js, Long animation frames script attributionscripts/Long-Animation-Frames.js, Long animation frames (LoAF)scripts/LongTask.js, Long tasksscripts/Scroll-Performance.js, Scroll performance analysis
