Slash Command56.9k estrellas del repoactualizado 2d ago

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.

Ver fuente Repositorio: agent-skills

Instalar en Claude Code

Copiar

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/addyosmani/agent-skills/HEAD/.claude/commands/webperf.md -o ~/.claude/commands/webperf.md

Después abre una sesión nueva de Claude Code; el slash command carga automáticamente.

Definición

webperf.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.

Del mismo repositorio

buildSlash Command

Implement tasks incrementally — build, test, verify, commit. Add "auto" to run the whole plan in one approved pass.

code-simplifySlash Command

Simplify code for clarity and maintainability — reduce complexity without changing behavior

planSlash Command

Break work into small verifiable tasks with acceptance criteria and dependency ordering

reviewSlash Command

Conduct a five-axis code review — correctness, readability, architecture, security, performance

shipSlash Command

Run the pre-launch checklist via parallel fan-out to specialist personas, then synthesize a go/no-go decision

specSlash Command

Start spec-driven development — write a structured specification before writing code

testSlash Command

Run TDD workflow — write failing tests, implement, verify. For bugs, use the Prove-It pattern.

code-reviewerSubagent

Senior code reviewer that evaluates changes across five dimensions — correctness, readability, architecture, security, and performance. Use for thorough code review before merge.