Maintainer of this skill?
by nucliweb
Tested JavaScript snippets that measure and debug web performance. Your AI agent runs them for you, or you run them yourself in DevTools: the same code every time.
# Add to your Claude Code skills
git clone https://github.com/nucliweb/webperf-snippetsGuides for using ai agents skills like webperf-snippets.
See how webperf-snippets compares with popular alternatives.
webperf-snippets is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by nucliweb. Tested JavaScript snippets that measure and debug web performance. Your AI agent runs them for you, or you run them yourself in DevTools: the same code every time. It has 1,454 GitHub stars.
webperf-snippets's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/nucliweb/webperf-snippets" and add it to your Claude Code skills directory (see the Installation section above).
webperf-snippets is primarily written in JavaScript. It is open-source under nucliweb on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh webperf-snippets against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Tested JavaScript snippets that measure and debug web performance. Your AI agent runs them for you, or you run them yourself in DevTools: the same code every time.
AI agents are good at interpreting performance data and unreliable when they write measurement code on the fly. WebPerf Snippets keeps both apart: the measurement is fixed code, tested in CI, that returns structured data, and the agent reasons about the result. The same snippets run in the console, the CLI, the DevTools extension and the Agent Skills, and every one returns an object that follows a single contract (snippets/SCHEMA.md).
→ Why AI audits need deterministic scripts
| You want to | Use |
|---|---|
| Audit a URL with any agent that has a terminal | The Copy prompt button on each snippet page |
| Let the agent drive your Chrome (login, interactions) | The Agent Skills with Chrome DevTools MCP |
| Run snippets from scripts or CI | The CLI |
| Give an agent the whole documentation | llms.txt (details) |
Not sure which snippet to run? Start from the symptom in Which snippet should I use?
Snippet pages have a Copy prompt button above the code. It copies a prompt that asks any AI agent with a terminal to run that snippet with the CLI on the URL you give it, and to report the value, the cause and the issues. The agent runs the published snippet instead of rewriting it or estimating the result.
The snippets are packaged as Agent Skills for Claude Code, Cursor, OpenCode, Gemini CLI, VS Code extensions and other compatible agents. With Chrome DevTools MCP, the agent runs the snippets in your browser and reads the object they return.
npx skills add nucliweb/webperf-snippets
This installs the skills from the GitHub repository into ~/.claude/skills/. To install them from a clone instead:
git clone https://github.com/nucliweb/webperf-snippets.git
cd webperf-snippets
npm run install-skills # into .claude/skills/ of the current project
npm run install-global # into ~/.claude/skills/, for every project
| Skill | Snippets | What it covers |
|---|---|---|
webperf |
56 | Main entry point for all web performance analysis |
webperf-core-web-vitals |
7 | LCP, CLS, INP measurements with detailed breakdowns |
webperf-loading |
34 | TTFB, FCP, script and font analysis, resource hints, service workers |
webperf-interaction |
10 | Long tasks, animation frames, scroll jank, INP debugging |
webperf-media |
4 | Image and video audits, lazy loading validation, SVG analysis |
webperf-resources |
1 | Network bandwidth, connection quality, adaptive loading |
The skills include workflows (predefined sequences, such as a complete loading audit or a font loading investigation) and decision trees that pick the next snippet from the result of the previous one: when TTFB is above 600 ms, the agent runs TTFB-Sub-Parts to find whether the time goes to DNS, the connection or the server.
User: "Analyze loading performance"
Agent:
1. Runs TTFB.js → 1.9 s (poor)
2. Follows the decision tree → runs TTFB-Sub-Parts.js
3. Finds that the server response takes most of the time
4. Runs Service-Worker-Analysis.js
5. Reports the findings with specific fixes
Skills activate when the request matches them:
Audit this page for Core Web Vitals
Debug slow LCP
Why is my TTFB so high?
Check for image optimization issues
See SKILLS.md for every skill, its workflows and its triggers.
→ Read more about WebPerf Agent Skills
The CLI runs the same snippets headlessly with Playwright. It diagnoses LCP regressions in CI, gates pull requests on performance budgets and automates the audits you run by hand. The --json output is what an agent or a script reads.
npx webperf-snippets https://example.com --json
npx webperf-snippets https://example.com --snippet LCP-Subparts
npx webperf-snippets https://example.com --workflow audit
npx webperf-snippets https://example.com --budget-lcp 2500 --budget-cls 0.1
The core-web-vitals, audit, loading and interaction workflows chain several snippets in one run. A composite GitHub Action (nucliweb/webperf-snippets/.github/actions/webperf-snippets) wraps the CLI for CI, with budgets and a Markdown output ready to post as a pull request comment.
The CLI is published to npm as webperf-snippets. See the CLI documentation and cli/README.md for installation, usage and CI integration.
Every snippet also runs by hand in the DevTools console, with the same code the agents use. All snippets are tested in Google Chrome; most also work in other Chromium-based browsers and in Firefox, and Safari has limited Performance API support. Each snippet page shows the browser support of the APIs it needs.
F12 or Cmd+Option+I / Ctrl+Shift+I)EnterCmd+Enter / Ctrl+Enter)A DevTools panel runs the snippets on the inspected page without pasting them, shows their results, and audits the page with the checks of the CLI. It installs from a zip while it is in beta.
https://github.com/nucliweb/webperf-snippets/assets/1307927/2987a2ca-3eef-4b73-8f6b-7b1e06b50040
| Category | Snippets | What it includes |
|---|---|---|
| Core Web Vitals | 7 | LCP, CLS and INP, with LCP sub-parts, trail, image entropy and video candidate |
| Loading | 34 | TTFB, FCP, render-blocking resources, resource and priority hints, scripts, fonts, CSS, caching, compression, back/forward cache |
| Interaction | 10 | Long animation frames with script attribution, interactions, input latency, long tasks, layout shifts, forced layout, scroll performance, DOM size |
| Media | 4 | Image and video element audits, oversized images, SVG with embedded bitmaps |
| Resources | 1 | Network bandwidth and connection quality |
| DevTools Overrides | 2 | Fetch and XHR timeline, injected with a local override before the page scripts |
llms.txt: an index of every page, with a short description of each snippet.llms-full.txt: the documentation and the code of every snippet in one file..md (for example, /CoreWebVitals/LCP.md).Contributions are welcome. CONTRIBUTING.md explains how to add or change a snippet, its tests and its documentation page.