SkillFoxx

Type a name, a task or a service

Match with Foxx AI

WebPerf Snippets skill

56 JavaScript snippets for web performance: the agent runs them through skills, MCP or CLI and reasons over the result

  • 1,456 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The skills execute JavaScript on pages in your browser through Chrome DevTools MCP, including pages under your account
  • The CLI and MCP server launch headless Chromium and visit the addresses you give
All reasons and checks

nucliweb/webperf-snippetsAuthor:Joan Leon

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/webperf-snippets

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The skills execute JavaScript on pages in your browser through Chrome DevTools MCP, including pages under your account
  • The CLI and MCP server launch headless Chromium and visit the addresses you give

This is third-party code. Review the repository files before installing.

What it does

WebPerf Snippets keeps fixed scripts for measuring site speed that are tested in CI and return a result in one structure. The agent runs a ready script and interprets the number. The same code runs in the DevTools console, the CLI, the DevTools extension and the agent skills. The skills for Claude Code, Cursor, OpenCode, Gemini CLI and other agents cover Core Web Vitals, loading, interaction, media and network resources. The main `webperf` skill is the entry point and the others handle groups of measurements. The skills include workflows and decision trees: if TTFB is above 600 ms, the agent runs the TTFB sub-parts snippet to find whether time goes to DNS, the connection or the server. The skills need Chrome DevTools MCP to execute snippets in your browser. The CLI and MCP server run the same snippets in headless Chromium through Playwright. `npx webperf-snippets https://example.com --json` prints JSON, and the `--budget-lcp` and `--budget-cls` flags set budgets for CI. A ready GitHub Actions step posts a Markdown report to a pull request.

Who it is for. For frontend developers and web performance specialists who ask Claude Code or Cursor to find the cause of a slow LCP, high TTFB or scroll jank.

Good fit when

  • You want to know why a page is slow to show its largest element and need an LCP breakdown
  • You need to audit a page after login: the skills work in your browser with your account
  • You need LCP and CLS budgets checked in CI on every pull request
  • You need an image and lazy-loading audit with concrete findings per file

Not a fit when

  • You need field data from real users over a month: snippets measure one concrete load, and CrUX data needs a separate key
  • You test a page in Safari: Performance API support is limited there and the snippets are tested in Chrome
  • The task is to optimize server code: the tool diagnoses the client side and shows where time is lost

Example request

Check Core Web Vitals on this page, find the cause of the slow LCP and tell me which resource is to blame

Limitations

  • The skills execute snippets in the browser through Chrome DevTools MCP; without it the agent cannot run them.
  • All snippets are tested in Google Chrome, and most work in other Chromium browsers.
  • The CLI and MCP server use headless Chromium through Playwright, so a CI result can differ from your laptop.
  • The DevTools extension is in beta and installs from a zip.
  • CrUX data needs your own API key.

How to disable. Delete the skills from `~/.claude/skills/` or your agent's skills directory. `claude mcp remove webperf` removes the MCP server, and the plugin is disabled through `/plugin`.

FAQ

How do I install WebPerf Snippets in Claude Code?

Run `npx skills add nucliweb/webperf-snippets` for the skills. For the MCP server: `claude mcp add webperf -- npx -y webperf-snippets mcp`. The plugin installs with `/plugin install webperf --marketplace nucliweb/webperf-snippets`.

How does the MCP server differ from the skills?

The skills run snippets in your open Chrome through Chrome DevTools MCP and suit pages behind a login. The MCP server opens headless Chromium itself and gives the agent the snippets as tools.

How do I check performance in CI?

Use `npx webperf-snippets https://example.com --budget-lcp 2500 --budget-cls 0.1`. A ready composite GitHub Actions step posts a Markdown report to a pull request.

Why give the agent ready snippets?

An agent interprets data well but writes measurement code unreliably on the fly. Here the measurement is fixed and tested in CI, and the agent only reads the returned object.

How many measurements are in the set?

56 snippets: 7 for Core Web Vitals, 34 for loading, 10 for interaction, 4 for media and 1 for network resources. They are grouped into skills.

Discussion

No questions or reviews yet.

Skills

A set of skills for web quality audits: performance, Core Web Vitals, accessibility, SEO and best practices from Lighthouse

SkillExtended access3.1K23

Console, network, screenshots and Lighthouse audits from your open Chrome session to the agent via a DevTools extension

MCP serverBroad access7.3K
Official

A skill pack with a hosted MCP server: the agent pulls real screenshots, flows and experiments from other products

SkillExtended access467

An accessibility scanner for agents and CI: renders a page in Chromium with axe-core or lints React, Vue and Angular source.

MCP serverMinimal access117

A skill and the pwc CLI: one clone command with a URL makes the agent rebuild a page as a Vite and React project and measure it

SkillBroad access280

A skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code

SkillExtended access1.1K

README in short

The README opens with the idea that the measurement is fixed and the agent does the interpretation. It then lists ways to run it: a copy-prompt button on snippet pages, the MCP server, skills, the CLI and the DevTools extension, followed by a table of measurement categories with a description of each group.

README badge

Original SKILL.md

---
name: webperf
description: Web performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.
license: MIT
metadata:
  author: Joan Leon | @nucliweb
  version: 2.4.2
  mcp-server: chrome-devtools
  category: web-performance
  repository: https://github.com/nucliweb/webperf-snippets
---

# WebPerf Snippets Toolkit

A collection of 56 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 | 34 | "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" |

Report a problem

Foxx AIWebPerf Snippets
Foxx AI

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.