Skip to content
AI Primer

web-perf

cloudflareby cloudflare3 months ago2.6k

Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.

Install

npx skills add https://github.com/cloudflare/skills --skill web-perf
Show step-by-step
  1. 1

    Open your terminal

    • Mac: Press ⌘ Space, type "Terminal", press Enter
    • Windows: Press Win R, type "cmd", press Enter
  2. 2

    Paste the command above and press Enter

    Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).

  3. 3

    Restart Claude Code

    Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives
~/.claude/skills/cloudflare--skills--skills--web-perf/
├── SKILL.md
└── ... (skill resource files)
View on GitHub

Always review skill code before installing. Third-party skills may contain scripts that run on your machine.

Related skills

🔍 Code Review

requesting-code-review

Use when completing tasks, implementing major features, or before merging to verify work meets requirements

by obra · 17 days ago268.5k
💻 Developer Tools

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes

by obra · 17 days ago268.5k
💻 Developer Tools

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

by obra · 1 month ago268.5k
💻 Developer Tools

writing-plans

Use when you have a spec or requirements for a multi-step task, before touching code

by obra · 1 month ago268.5k