lighthouse

# Lighthouse Optimization Loop **Method:** 3 mobile + 3 desktop runs per audit, averaged for reliability. After each code change, re-audit AND visually verify the page with chrome-devtools MCP to catch regressions. --- ## Setup 1. **Parse URL** from `$ARGUMENTS`. If no URL, ask the user. Default: `http://localhost:3000` 2. **Verify prerequisites:** ```bash lighthouse --version # CLI must be installed for the batched 3x3 protocol ``` If lighthouse is missing: `npm install -g lighthouse` The chrome-devtools MCP is shipped by default; if missing, see `mcp-configs/recommended.json`. 3. **Create results directory:** ```bash mkdir -p ~/.claude/tmp/lighthouse ``` 4. **Take baseline screenshots** before any changes: - `mcp__chrome-devtools__navigate_page` (type: "url", url: `<url>`) - `mcp__chrome-devtools__take_screenshot` Describe the current layout, key elements, and visual state. This is your **visual baseline** — you will compare against it after every change to catch regressions. 5. **Confirm with user:** Show the URL, confirm the dev server is running, ask if there are specific pages or routes to audit beyond the main URL. --- ## Audit Protocol Each audit consists of **3 mobile + 3 desktop runs**, averaged per category. ### Run the audits ```bash # Mobile runs (Lighthouse default is mobile) for i in 1 2 3; do lighthouse <url> \ --output=json \ --output-path=~/.claude/tmp/lighthouse/mobile-$i.json \ --chrome-flags=...