mcpbeat Sign in

Webperf Agent Skill

by nucliweb

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.

538 tokens
context cost
SKILL.md, read when the skill is used
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
1 454
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf

The instruction itself

3 sections, as written by the author

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" |

Workflow

  • Identify the relevant skill based on the user's question (see Quick Reference above)
  • Load the skill's SKILL.md to see available snippets and thresholds
  • Execute with Chrome DevTools MCP:
  • mcp__chrome-devtools__navigate_page → navigate to target URL
  • mcp__chrome-devtools__evaluate_script → run the snippet and read the returned object, which is the result (the scripts have no console output)
  • status: "tracking" → call the function named in getDataFn with another mcp__chrome-devtools__evaluate_script call after the interactions
  • Without Chrome DevTools MCP, run the snippet with the CLI: npx webperf-snippets <url> --snippet <Name> --json
  • Interpret results using the thresholds defined in the skill
  • Provide actionable recommendations based on findings

How to use it

Copy the folder

Take nucliweb/webperf from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npx. Without those the skill loads but fails at the first command.