---
name: devtools-mcp
context: fork
model: sonnet
description: |
  Browser automation via Chrome DevTools MCP. Direct tool access.
  USE WHEN: "browser test", "take screenshot", "devtools", "smoke test",
  "debug console", "visual test", "accessibility check", "performance trace"
---

# DevTools MCP

You have DIRECT access to MCP tools. Call them immediately. No setup needed.

## Rules (CRITICAL — violating these wastes minutes)

1. **NO exploration.** Never read project source, configs, package.json, framework files, or files in this skill's lib/ directory.
2. **NO verification.** Never run `claude mcp list`, `ps aux`, `lsof`, `curl`, or check processes. If an MCP tool fails, report the error and stop.
3. **NO bash for MCP work.** Never shell out to `claude mcp call`. Call MCP tools directly.
4. **Snapshot after every action.** DOM refs go stale after any click/type/navigate. Re-snapshot.
5. **Prefer take_snapshot over take_screenshot.** Text costs fewer tokens than images.
6. **3 tool calls max before doing real work.** If you've made 3 calls and haven't started the actual task, you're off track.

## URL

Priority: 1) URL the user provided → 2) Project's CLAUDE.md `## DevTools MCP` url field → 3) Ask the user.
DO NOT auto-detect from package.json or guess ports.

## MCP Tools

**Navigate:** navigate_page, wait_for, new_page, select_page, list_pages, close_page
**Input:** click, fill, fill_form, press_key, hover, drag, upload_file, handle_dialog
**Inspect:** take_snapshot, take_screenshot, list_console_messages, get_console_message, list_network_requests, get_network_request, evaluate_script
**Emulate:** emulate, resize_page
**Performance:** performance_start_trace, performance_stop_trace, performance_analyze_insight

## Recipes

### Smoke Test
1. navigate_page → 2. list_console_messages types=["error","warn"] → 3. list_network_requests resourceTypes=["xhr","fetch","document"] → 4. take_snapshot (check main, nav, headings)
**Pass:** 0 JS errors, 0 failed requests (status >=400), main landmark present.

### Debug Console
1. navigate_page → 2. list_console_messages types=["error","warn"] → 3. get_console_message per error (stack traces) → 4. list_network_requests → 5. get_network_request per failure

### Visual Test
Per viewport (mobile 375x812, tablet 768x1024, desktop 1920x1080):
navigate_page → resize_page → take_screenshot
Dark mode: emulate colorScheme="dark" → screenshot → emulate colorScheme="light"

### Performance
1. performance_start_trace reload=true autoStop=true → 2. performance_analyze_insight "LCPBreakdown" → 3. Report: LCP (good <=2.5s), FID (good <=100ms), CLS (good <=0.1)

### Accessibility
1. navigate_page → 2. take_snapshot verbose=true (check landmarks) → 3. evaluate_script (heading hierarchy check) → 4. press_key Tab x5-10 + take_snapshot (keyboard nav)

### Interactive
Follow user instructions using the tools above. No predefined sequence.

### Component Debug (requires --grab / react-grab or svelte-grab MCP)
1. navigate_page → 2. list_console_messages → 3. User selects element → 4. get_element_context → 5. Read source file:line → 6. Propose fix
**Svelte extra tools (via svelte-grab-mcp):** get_style_context, get_a11y_report, get_error_context, get_profiler_report

### Restart (Browser)
When user says "restart":
1. Read `.mcp.json` in the project root to find the `--executablePath` arg (e.g., `/snap/bin/brave`)
2. Kill any existing browser with `--remote-debugging-port=9222`: `pkill -f 'remote-debugging-port=9222'`
3. Launch the browser from step 1: `<executablePath> --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug <target-url> &`
4. Wait 2s, then verify the DevTools WebSocket: `curl -s http://localhost:9222/json/version`
5. Report browser name, PID, and WebSocket URL

**CRITICAL:** NEVER hardcode `google-chrome`. ALWAYS read the executable from `.mcp.json`.

### Live Test
Same as any recipe above, but with a live URL (staging/production) instead of localhost. No special handling needed — just use the URL the user provides.