Webperf Interaction
This is your go-to when users complain about janky scrolling, frozen pages, or slow interactions. It wraps Joan Leon's webperf-snippets with smart decision trees that automatically chain diagnostics. If an interaction takes over 200ms, it'll break down the latency phases, hunt for long animation frames, then attribute blame to specific scripts. The workflows handle common scenarios like INP debugging and third-party script impact without you needing to remember which snippet runs next. Works through Chrome DevTools MCP, so you're running real performance APIs, not guessing. Best part is the cross-skill integration: it knows when to pull in script execution analysis from the loading skill or correlate layout shifts from Core Web Vitals.
- skills.sh installs
- 267
- GitHub stars
- 1.5K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add nucliweb/webperf-snippets --skill webperf-interaction --agent claude-codeInstalls into .claude/skills of the current project.
Files
WebPerf: Interaction & Animation
JavaScript snippets for measuring web performance in Chrome DevTools.
Running a script
- Run the script with
mcp__chrome-devtools__evaluate_script, passing the file instead of its code:sourcePathwith the absolute path ofscripts/<Name>.jsin this skill, andformat: "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,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, as an arrow function infunction, for example() => getINP(), 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.
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/nucliweb/webperf-snippets
- Categories
- Frontend Development, AI & Agent Building, Debugging, Productivity & Planning, Automation & Workflows, Design & UI/UX
- First seen
- Jun 3, 2026
