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
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 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
More from nucliweb/webperf-snippets
All 6Recommended
More Frontend Development
git-hygiene-enforcerpatricio0312rev/skillsEstablishes git workflow guardrails including conventional commits, commit message hooks, branch naming conventions, PR templates, and code review processes. Pr267skills.sh installs
cocos-creator-3x-cnzpqq132555/skills提供 Cocos Creator 3.8 游戏引擎的全面开发指导，包括组件系统（_decorator、Component）、生命周期回调、事件系统（EventTarget、input）、resources 资源管理、tween 缓动系统、对象池、UI 系统、物理碰撞以及可试玩广告优化。在用户编写或重构 Cocos Cr267skills.sh installs
webperf-medianucliweb/webperf-snippetsIntelligent media optimization with automated workflows for images, videos, and SVGs. Includes decision trees that detect LCP images (triggers format/lazy-loadi266skills.sh installs
vite-advancedyonatangross/orchestkitAdvanced Vite 8 patterns including Rolldown-powered builds, advancedChunks, Environment API, plugin development, SSR configuration, library mode, and build opti265skills.sh installs
vitexecdrawcall-ai/vitexecUse this skill when an AI agent needs to inspect, verify, debug, or profile a live Vite app by running temporary snippets inside the browser page and reading br263skills.sh installs
electron-basejezweb/claude-skillsBuild secure desktop applications with Electron 33, Vite, React, and TypeScript. Covers type-safe IPC via contextBridge, OAuth with custom protocol handlers, na263skills.sh installs