multi

webperf

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.

1,420 stars

bynucliweb

View on GitHub Installation ↓

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/webperf/SKILL.md --create-dirs "https://raw.githubusercontent.com/nucliweb/webperf-snippets/main/.claude/skills/webperf/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/webperf/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How webperf Compares

Feature / Agent	webperf	Standard Approach
Platform Support	multi	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# WebPerf Snippets Toolkit

A collection of 47 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the browser console and outputs structured, color-coded results.

## Quick Reference

| Skill | Snippets | Trigger phrases |
|-------|----------|-----------------|
| webperf-core-web-vitals | 7 | "debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness" |
| webperf-loading | 28 | "TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker" |
| webperf-interaction | 8 | "jank", "scroll performance", "long tasks", "animation frames", "INP debug" |
| webperf-media | 3 | "image audit", "lazy loading", "image optimization", "video audit" |
| webperf-resources | 1 | "network quality", "bandwidth", "connection type", "save-data" |

## Workflow

1. Identify the relevant skill based on the user's question (see Quick Reference above)
2. Load the skill's skill.md to see available snippets and thresholds
3. Execute with Chrome DevTools MCP:
   - `mcp__chrome-devtools__navigate_page` → navigate to target URL
   - `mcp__chrome-devtools__evaluate_script` → run the snippet
   - `mcp__chrome-devtools__get_console_message` → read results
4. Interpret results using the thresholds defined in the skill
5. Provide actionable recommendations based on findings