Webperf
This is a practical wrapper around Joan Leon's webperf-snippets collection, giving you 49 browser console snippets for measuring Core Web Vitals, debugging slow loads, and diagnosing jank. It works through the Chrome DevTools MCP server, so you can ask Claude to audit a page and it'll navigate there, run the appropriate snippet, and interpret the results against established thresholds. The skill is split into five focused areas (core vitals, loading, interaction, media, resources), which helps when you know whether you're chasing a slow TTFB or tracking down layout shifts. It's genuinely useful if you're doing performance work and want structured console output instead of manually running snippets. The color-coded results are a nice touch for readability.
- skills.sh installs
- 264
- GitHub stars
- 1.5K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add nucliweb/webperf-snippets --skill webperf --agent claude-codeInstalls into .claude/skills of the current project.
Files
WebPerf Snippets Toolkit
A collection of 57 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the page and returns a structured result object.
Quick Reference
| Skill | Snippets | Trigger phrases |
|---|---|---|
| webperf-core-web-vitals | 7 | "debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness" |
| webperf-loading | 35 | "TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker" |
| webperf-interaction | 10 | "jank", "scroll performance", "long tasks", "animation frames", "INP debug" |
| webperf-media | 4 | "image audit", "lazy loading", "image optimization", "video audit" |
| webperf-resources | 1 | "network quality", "bandwidth", "connection type", "save-data" |
Workflow
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
- Category
- Debugging
- First seen
- Jun 3, 2026
More from nucliweb/webperf-snippets
All 6Recommended
More Debugging
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
nginx-c-module-perfpproenca/dot-skillsnginx C module performance optimization and reliability guidelines based on the official nginx development guide. This skill should be used when optimizing ngin260skills.sh installseffect-tspproenca/dot-skillsEffect-TS library usage in TypeScript — Effect.gen generators, Schema.Struct/Schema.Class definitions, Layer/Context.Tag/Service patterns, Effect.pipe pipelines257skills.sh installs
rust-expert-best-practices-code-reviewwispbit-ai/skillsRust best practices and code quality guidelines for writing idiomatic, safe, and performant Rust code. This skill should be used when writing, reviewing, or ref257skills.sh installs
cilium-expertmartinholovsky/claude-skills-generatorExpert in Cilium eBPF-based networking and security for Kubernetes. Use for CNI setup, network policies (L3/L4/L7), service mesh, Hubble observability, zero-tru251skills.sh installs
test-fixingdavila7/claude-code-templatesRun tests and systematically fix all failing tests using smart error grouping. Use when user asks to fix failing tests, mentions test failures, runs test suite 247skills.sh installs