# Webperf Interaction

Intelligent interaction performance analysis with automated workflows for INP...

- Repository: https://github.com/nucliweb/webperf-snippets (1458 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add nucliweb/webperf-snippets --skill webperf-interaction -g -a claude-code -y`
Codex: `npx skills add nucliweb/webperf-snippets --skill webperf-interaction -g -a codex -y`
Cursor: `npx skills add nucliweb/webperf-snippets --skill webperf-interaction -g -a cursor -y`
Gemini CLI: `npx skills add nucliweb/webperf-snippets --skill webperf-interaction -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nucliweb/webperf-snippets`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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` and 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, 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.

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.

## Scripts

- `scripts/DOM-Size-and-Depth.js`, DOM size and depth
- `scripts/Forced-Synchronous-Layout.js`, Forced synchronous layout detector
- `scripts/Input-Latency-Breakdown.js`, Input latency breakdown
- `scripts/Interactions.js`, Interactions
- `scripts/Layout-Shift-Loading-and-Interaction.js`, Layout shift tracking
- `scripts/Long-Animation-Frames-Helpers.js`, LoAF helpers
- `scripts/Long-Animation-Frames-Script-Attribution.js`, Long animation frames script attribution
- `scripts/Long-Animation-Frames.js`, Long animation frames (LoAF)
- `scripts/LongTask.js`, Long tasks
- `scripts/Scroll-Performance.js`, Scroll performance analysis


## Common Workflows

The rest: https://github.com/nucliweb/webperf-snippets/blob/HEAD/.claude/skills/webperf-interaction/SKILL.md