How do I install the Web Perf skill?

Run npx skillmds@latest add hi-donwi/web-perf in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Perf safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Perf?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Perf free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Perf?

hi-donwi (@hi-donwi) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Perf by hi-donwi — Agent Skill

Name: Web Perf
Rating: 4.2 (5 reviews)
Author: hi-donwi

Web Perf

Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, 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. Do not use for general UI implementation (frontend-ui-engineering) or backend/API performance (performance-optimization).

hi-donwi Updated Sep 22, 2026

File contents

Web Performance Audit

Overview

Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.

When to use

Auditing, profiling, or optimizing page load, Lighthouse scores, or Core Web Vitals.
Chrome DevTools MCP tools are available (verify first).

Do not use for general UI implementation (frontend-ui-engineering) or backend/API performance (performance-optimization).

Process

Verify MCP tools. Call navigate_page or performance_start_trace. If unavailable, stop — do not invent an audit. Ask the user to add the chrome-devtools MCP server.
Be specific and quantified. Confirm unused before recommending removal. Skip 0ms-impact findings. Name the resource and expected saving.
Run the five phases: performance trace → Core Web Vitals insights → network → accessibility snapshot → codebase analysis (skip for third-party sites without source). Tool names, insight table, and bundler checks: references/devtools-audit.md.
Report a CWV table, prioritized issues with estimated impact, specific recommendations, and codebase findings when source is available.

Red flags

Recommending changes with 0ms estimated impact.
Continuing the audit when MCP tools are unavailable.
Vague advice ("optimize images") instead of a named resource and expected saving.

Verification

Present findings as:

Core Web Vitals Summary — Table with metric, value, and rating (good/needs-improvement/poor)
Top Issues — Prioritized list of problems with estimated impact (high/medium/low)
Recommendations — Specific, actionable fixes with code snippets or config changes
Codebase Findings — Framework/bundler detected, optimization opportunities (omit if no codebase access)

References

references/devtools-audit.md — MCP config, tool calls, phases, insight names, bundler checks

---name: web-perfdescription: Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, 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. Do not use for general UI implementation (frontend-ui-engineering) or backend/API performance (performance-optimization).---# Web Performance Audit## OverviewAudit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.## When to use- Auditing, profiling, or optimizing page load, Lighthouse scores, or Core Web Vitals.- Chrome DevTools MCP tools are available (verify first).Do not use for general UI implementation (`frontend-ui-engineering`) or backend/API performance (`performance-optimization`).## Process1. **Verify MCP tools.** Call `navigate_page` or `performance_start_trace`. If unavailable, stop — do not invent an audit. Ask the user to add the `chrome-devtools` MCP server.2. **Be specific and quantified.** Confirm unused before recommending removal. Skip 0ms-impact findings. Name the resource and expected saving.3. **Run the five phases:** performance trace → Core Web Vitals insights → network → accessibility snapshot → codebase analysis (skip for third-party sites without source). Tool names, insight table, and bundler checks: `references/devtools-audit.md`.4. **Report** a CWV table, prioritized issues with estimated impact, specific recommendations, and codebase findings when source is available.## Red flags- Recommending changes with 0ms estimated impact.- Continuing the audit when MCP tools are unavailable.- Vague advice ("optimize images") instead of a named resource and expected saving.## VerificationPresent findings as:1. **Core Web Vitals Summary** — Table with metric, value, and rating (good/needs-improvement/poor)2. **Top Issues** — Prioritized list of problems with estimated impact (high/medium/low)3. **Recommendations** — Specific, actionable fixes with code snippets or config changes4. **Codebase Findings** — Framework/bundler detected, optimization opportunities (omit if no codebase access)## References- `references/devtools-audit.md` — MCP config, tool calls, phases, insight names, bundler checks

Frequently asked questions