webperf
The `/webperf` slash command runs a web performance audit on browser-facing applications by invoking a web-performance-auditor persona. It operates in two modes: Deep mode when Lighthouse reports, PageSpeed Insights data, CrUX responses, DevTools traces, or live URLs with Chrome DevTools MCP access are available; Quick mode when analyzing source code for structural anti-patterns. The command requires passing target files, artifact paths or JSON content, and the target URL or page name, then returns a scored audit report with ranked findings and recommendations.
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/addyosmani/agent-skills/HEAD/.claude/commands/webperf.md -o ~/.claude/commands/webperf.mdwebperf.md
`/webperf` targets web applications specifically. Do not use it for utility libraries, CLIs, or server-only code with no browser-facing output. ## Determine the mode **Deep mode** — activate when any of these is available: - A Lighthouse JSON report file (e.g. `npx lighthouse <url> --output json --output-path ./report.json`, or `npx -p chrome-devtools-mcp chrome-devtools lighthouse_audit --output-format=json` from the Chrome DevTools MCP CLI) - A PageSpeed Insights JSON response (includes Lighthouse + CrUX) - A CrUX API response (requires `CRUX_API_KEY` or `GOOGLE_API_KEY`) - A DevTools performance trace - A live URL plus the `chrome-devtools` MCP server configured in the harness (the agent can capture metrics directly via `lighthouse_audit` and `performance_*` tools) - The Chrome DevTools MCP CLI invoked locally (via `npx -p chrome-devtools-mcp chrome-devtools <tool>` or after `npm i -g chrome-devtools-mcp`) — the user runs commands like `chrome-devtools lighthouse_audit --output-format=json` and passes the JSON output to the agent **Quick mode** — default when none of the above are available. The agent scans source code for structural anti-patterns and labels every finding as `potential impact`. ## Run the audit Spawn the `web-performance-auditor` subagent. Pass it explicitly: - The files, components, or diff under review - Any artifact paths (Lighthouse JSON, PSI JSON, CrUX response, trace) or pasted JSON content - The target URL or page name when known - A note on which mode you expect (Quick or Deep), so the agent surfaces missing inputs if Deep was intended The subagent returns a scorecard (only populated with sourced values), a ranked list of findings, positive observations, and proactive recommendations. ## Output Return the full audit report to the user. No synthesis or merge step is needed — this is a single-persona command.
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
Implement tasks incrementally — build, test, verify, commit. Add "auto" to run the whole plan in one approved pass.
Automates CI/CD pipeline setup. Use when setting up or modifying build and deployment pipelines. Use when you need to automate quality gates, configure test runners in CI, or establish deployment strategies.
Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to assess code quality across multiple dimensions before it enters the main branch.
Senior code reviewer that evaluates changes across five dimensions — correctness, readability, architecture, security, and performance. Use for thorough code review before merge.
Simplifies code for clarity. Use when refactoring code for clarity without changing behavior. Use when code works but is harder to read, maintain, or extend than it should be. Use when reviewing code that has accumulated unnecessary complexity.
Simplify code for clarity and maintainability — reduce complexity without changing behavior