What does this skill do, and when should you use it?
This is the web-perf skill from the cloudflare/skills repository, focused on auditing, debugging, and optimizing page performance. It uses Chrome DevTools MCP to measure LCP, INP, CLS, FCP, TBT, and Speed Index. It also examines render-blocking resources, network dependency chains, layout shifts, caching, compression, and accessibility issues. When a codebase is available, it analyzes frameworks, bundlers, tree-shaking, unused assets, polyfills, and production build configuration.
It loads a target page with navigate_page, records a reload-based performance trace with performance_start_trace, and analyzes LCP, CLS, render-blocking, document latency, and network-dependency insights with performance_analyze_insight. It can inspect Script, Stylesheet, Document, Font, and Image requests through list_network_requests and get_network_request, including request chains, preloads, cache headers, and payload sizes. It can also capture an accessibility tree with take_snapshot. Its requested output includes a Core Web Vitals summary, prioritized issues, specific recommendations, and codebase findings when source access exists.
- A frontend developer needs to explain why LCP, INP, or CLS fails its target.
- A web team needs to identify render-blocking scripts, stylesheets, or late-discovered critical resources.
- A performance engineer needs to review caching headers, preloads, compression, and oversized payloads.
- A developer wants to investigate unused JavaScript, CSS, broad browser targets, or oversized polyfills in a known build stack.
- A quality or accessibility team needs to inspect accessible names, focus indicators, ARIA IDs, and contrast-related gaps.
How do you install this skill?
- Core functionality depends on a local Chrome DevTools MCP server; audits cannot proceed if it is unavailable or its interfaces are incompatible.
- The skill may process target-page, network-request, and codebase information, but it defines no privacy, sensitive-data, or external-service data-flow controls.
- Metric thresholds, insight names, and MCP interfaces may change with Chrome/DevTools versions; documentation reachability from mainland China is unspecified.
- No skill-specific version, changelog, maintenance owner, or reproducible execution evidence is provided.
- Network access
- Local filesystem
- MCP Server
Chrome DevTools MCP
The skill is located at skills/web-perf/ in the cloudflare/skills repository. The collection can be installed using a supported method such as npx skills add https://github.com/cloudflare/skills, or by cloning the repository and copying the skill folders into the appropriate Agent Skills directory. Chrome DevTools MCP must also be configured; the source specifies the chrome-devtools server and the command npx -y chrome-devtools-mcp@latest. The source does not document a standalone installation command for only the web-perf folder.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/cloudflare/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/web-perf" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Audit https://example.com for web performance, Core Web Vitals, network requests, and accessibility issues.
Give an agent with this skill a concrete audit request, such as “Audit https://example.com for web performance, Core Web Vitals, network requests, and accessibility issues.” The agent should first verify that Chrome DevTools MCP is available; if it is not, the skill requires stopping and asking for MCP configuration. For a third-party site without codebase access, codebase analysis should be omitted.
What are this skill's strengths and limitations?
- Covers LCP, INP, CLS, FCP, TBT, and Speed Index.
- Goes beyond scores to inspect render blocking, dependency chains, layout shifts, caching, and payload size.
- Requires verification through requests, the DOM, or the codebase before making recommendations.
- Can examine framework, bundler, and build-level optimization when source access is available.
- Explicitly depends on Chrome DevTools MCP; auditing cannot start without it.
- Codebase findings are only available when the codebase can be accessed.
- The source provides no test suite, benchmark examples, or independent cross-platform validation.
- Metric thresholds and recommendations should be retrieved from current documentation rather than treated as permanently fixed knowledge.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Web Performance Auditor this page | 43 · Not recommended | ★ 3.1k | 12d ago | Apache-2.0 |
| Performance Optimization Engineering Skill | 54 · Use with care | ★ 107k | 13d ago | MIT |
| Browser DevTools Testing | 59 · Recommended | ★ 107k | 13d ago | MIT |
| Web Interface Guidelines Reviewer | 20 · Not recommended | ★ 53k | 13d ago | NOASSERTION |
| SwiftUI WCAG Accessibility Auditor Skill | 58 · Recommended | ★ 13 | 7mo ago | — |
How did FollowSkills review this skill?
The skill requires checking that Chrome DevTools MCP is available and stopping when it is not, which limits unintended continuation; however, it does not disclose how page data, network requests, or codebase contents flow to external services, and lacks sensitive-data handling, user-confirmation, permission-boundary, and rollback guidance, so points are deducted.
The workflow, tool calls, and troubleshooting steps are reasonably concrete, and it asks for evidence from network, DOM, or codebase inspection; however, tool availability, version compatibility, empty traces, and changing insight names are only thinly handled. Under static calibration the score remains below the 10-point ceiling.
Use cases and triggers are clear for performance audits, debugging, and optimization, and the skill defines skipping code analysis when no codebase is available; however, it depends on a configured Chrome DevTools MCP and gives limited boundary, input-precondition, Chinese-language, and mainland-China reachability guidance for documentation retrieval, so points are deducted.
The documentation is well organized with retrieval sources, a tool reference, phased workflow, troubleshooting, and an output format; the repository supplies an Apache-2.0 license and installation guidance. The skill lacks versioning, changelog, maintenance ownership, update path, FAQ, and dependency pinning, and publisher identity is unverified, so points are deducted.
The skill can direct collection of Core Web Vitals, network, accessibility, and codebase findings, with prioritized and specific recommendations; however, this review cannot verify tool execution, metric extraction, or directly usable final reports, and outputs still require human review. The score is conservatively limited by static calibration.
It names auditable sources including web.dev and Chrome documentation and instructs retrieval of current material; however, there is no committed test suite, CI coverage for key paths, execution evidence, or independent reproduction, so only limited credit is warranted.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →