Individual skill
webperf-interaction
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.
dist/antigravity/webperf-interaction/SKILL.md
Source commit 4605c0882e9bf4e8fae1d2019e2f65e36a432ebb
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- Yes
- Observed behavior
- Network or broad shell
- Last checked
- Nov 6, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 1,455
- Repository last updated
- Nov 7, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- performance Repository topic
- performance-analysis Repository topic
- performance-metrics Repository topic
- snippets Repository topic
- webperf Repository topic
- webperformance Repository topic
- webvitals Repository topic
- agent-skills Repository topic
- ai-agents Repository topic
- chrome-devtools Repository topic
- security Derived category
- testing Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 14,218 bytesreferences/schema.mddoc · 79,157 bytesreferences/snippets.mddoc · 4,488 bytesscripts/DOM-Size-and-Depth.jsruns · 4,958 bytesscripts/Forced-Synchronous-Layout.jsruns · 6,688 bytesscripts/Input-Latency-Breakdown.jsruns · 7,945 bytesscripts/Interactions.jsruns · 7,275 bytesscripts/Layout-Shift-Loading-and-Interaction.jsruns · 7,426 bytesscripts/Long-Animation-Frames-Helpers.jsruns · 9,023 bytesscripts/Long-Animation-Frames-Script-Attribution.jsruns · 4,682 bytesscripts/Long-Animation-Frames.jsruns · 8,351 bytesscripts/LongTask.jsruns · 5,166 bytesscripts/Scroll-Performance.jsruns · 7,776 bytes
Read excerpt
# WebPerf: Interaction & Animation
JavaScript snippets for measuring web performance in Chrome DevTools.
## Running a script
1. Run the script with `mcp__chrome-devtools__evaluate_script`, passing the file instead of its code: `sourcePath` with the absolute path of `scripts/<Name>.js` in this skill, and `format: "script"`, since a script runs by itself and is not a function. Read the object it returns. The scripts have no console output, so the returned object is the result: `script`, `status` and the metric data (`value`, `rating`, `details`, `items`, `issues`), as described in `references/schema.md`.
2. When `status` is `"tracking"`, the script keeps observing the page. After the interactions, call the function named in `getDataFn` with another `mcp__chrome-devtools__evaluate_script` call, as an arrow function in `function`, for example `() => getINP()`, and read the object it returns.
3. When `status` is `"error"` or `"unsupported"`, read `error`: the page may not have loaded yet, or the browser lacks the API.
`sourcePath` and `format` need Chrome DevTools MCP 1.11.0 or later, and the server only reads files inside its workspace roots: the project, the temp folder and each `--workspace=<folder>` in its arguments. When it answers `Access denied`, as it does for a skill installed outside the project, such as in `~/.claude/skills/`, read the file and pass its code in `function`, still with `format: "script"`. A `--workspace` with the real folder of the skills makes the path work; the server follows symlinks, so a link to the folder is not enough.
Without Chrome DevTools MCP, run the same snippet with the [webperf-snippets CLI](https://webperf-snippets.net/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.