docs: recreate skill docs for v0.17.0

Rebuild all four skill reference docs from current codebase:
- SKILL.md: main overview with capabilities, workflows, CLI, features
- network-and-console-breakdown.md: collector/formatter data flow
- network-for-scraping-discovery.md: network-first API discovery guide
- reference.md: quick tool reference for all 30 tools

Co-Authored-By: Claude <noreply@anthropic.com>

Author: omalleyandy

skills/chrome-devtools/SKILL.md

@@ -1,44 +1,101 @@
 ---
 name: chrome-devtools
-description: Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests.
+description: >
+  Chrome DevTools MCP server for browser automation, debugging,
+  network inspection, console analysis, and performance tracing.
+  Controls Chrome via Puppeteer/CDP. v0.17.0.
 ---
 
 ## Core Concepts
 
-**Browser lifecycle**: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: `npx chrome-devtools-mcp@latest --help`.
+**Browser lifecycle**: Browser starts on first tool call using a
+persistent Chrome profile. Configure via CLI args:
+`npx chrome-devtools-mcp@latest --help`.
 
-**Page selection**: Tools operate on the currently selected page. Use `list_pages` to see available pages, then `select_page` to switch context.
+**Page selection**: Tools operate on the currently selected page.
+`list_pages` to see pages, `select_page` to switch context.
 
-**Element interaction**: Use `take_snapshot` to get page structure with element `uid`s. Each element has a unique `uid` for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.
+**Element interaction**: `take_snapshot` returns an a11y tree with
+unique `uid` references. Use UIDs with `click`, `fill`, `drag`, etc.
+Always take a fresh snapshot if elements aren't found.
 
-## Workflow Patterns
-
-### Before interacting with a page
-
-1. Navigate: `navigate_page` or `new_page`
-2. Wait: `wait_for` to ensure content is loaded if you know what you look for.
-3. Snapshot: `take_snapshot` to understand page structure
-4. Interact: Use element `uid`s from snapshot for `click`, `fill`, etc.
-
-### Efficient data retrieval
+## Capabilities at a Glance
 
-- Use `filePath` parameter for large outputs (screenshots, snapshots, traces)
-- Use pagination (`pageIdx`, `pageSize`) and filtering (`types`) to minimize data
-- Set `includeSnapshot: false` on input actions unless you need updated page state
+| Category | Tools | Key Use |
+|----------|-------|---------|
+| **Snapshots** | `take_snapshot`, `take_screenshot` | See page structure/visuals |
+| **Input** | `click`, `fill`, `fill_form`, `press_key`, `drag`, `hover`, `upload_file`, `handle_dialog` | Interact with elements |
+| **Navigation** | `navigate_page`, `new_page`, `close_page`, `list_pages`, `select_page`, `wait_for` | Control page lifecycle |
+| **Network** | `list_network_requests`, `get_network_request` | Inspect HTTP traffic |
+| **Console** | `list_console_messages`, `get_console_message` | Debug logs/errors |
+| **Performance** | `performance_start_trace`, `performance_stop_trace`, `performance_analyze_insight` | CWV scores, bottlenecks |
+| **Emulation** | `emulate`, `resize_page` | Device/network simulation |
+| **Script** | `evaluate_script` | Run JS in page context |
+| **Extensions** | `install_extension`, `uninstall_extension`, `list_extensions`, `reload_extension` | Manage Chrome extensions |
 
-### Tool selection
-
-- **Automation/interaction**: `take_snapshot` (text-based, faster, better for automation)
-- **Visual inspection**: `take_screenshot` (when user needs to see visual state)
-- **Additional details**: `evaluate_script` for data not in accessibility tree
-
-### Parallel execution
+## Workflow Patterns
 
-You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.
+### Standard page interaction
+1. Navigate: `navigate_page` or `new_page`
+2. Wait: `wait_for` if you know expected content
+3. Snapshot: `take_snapshot` to get element UIDs
+4. Interact: `click`, `fill`, etc. using UIDs
+
+### Network-first scraping
+1. `navigate_page` to target URL
+2. `list_network_requests(resourceTypes: ["xhr", "fetch"])` to find APIs
+3. `get_network_request(reqid)` to inspect response bodies
+4. Or use `evaluate_script` with `fetch()` for reliable data retrieval
+
+### Console debugging
+1. Navigate to page (errors collected automatically)
+2. `list_console_messages(types: ["error"])` to find errors
+3. `get_console_message(msgid)` for full stack trace + cause chain
+4. Source-mapped locations show original file/line/column
+
+### Performance analysis
+1. `navigate_page` to target URL first
+2. `performance_start_trace(reload: true, autoStop: true)`
+3. Review CWV scores + insight sets in response
+4. `performance_analyze_insight(insightSetId, insightName)` for details
+5. CrUX field data included by default (disable: `--no-performance-crux`)
+
+## Key Features (v0.17.0)
+
+- **CrUX field data**: Real-user LCP, INP, CLS in performance traces
+- **Error.cause chains**: Full cause hierarchy for uncaught errors
+- **Error objects in console.log**: Message + stack when logging Errors
+- **Source-mapped stacks**: Original file/line/column (v0.16.0+)
+- **Ignored script filtering**: Internal frames hidden from traces
+- **Navigation scoping**: Data split per navigation, 3 preserved
+- **Lazy formatting**: Bodies/stacks resolved only when requested
+
+## Efficiency Tips
+
+- Use `filePath` for large outputs (screenshots, traces, snapshots)
+- Use pagination (`pageIdx`, `pageSize`) and type filters to limit data
+- Set `includeSnapshot: false` on input actions when snapshot not needed
+- Response bodies expire fast -- fetch promptly or use `evaluate_script`
+- Prefer `take_snapshot` over `take_screenshot` for automation
+- Parallel tool calls OK, but maintain order: navigate -> wait -> snap
+
+## CLI Quick Reference
+
+```
+--browserUrl URL       Connect via HTTP CDP endpoint
+--wsEndpoint URL       Connect via WebSocket
+--autoConnect          Auto-find running Chrome 144+
+--executablePath PATH  Launch specific Chrome binary
+--isolated             Temp profile, auto-cleaned
+--headless             No UI
+--viewport WxH         Initial viewport size
+--no-usage-statistics  Disable telemetry
+--no-performance-crux  Disable CrUX in traces
+--no-category-network  Disable network tools
+```
 
 ## Troubleshooting
 
-If `chrome-devtools-mcp` is insufficient, guide users to use Chrome DevTools UI:
-
+If chrome-devtools-mcp is insufficient, guide users to Chrome DevTools:
 - https://developer.chrome.com/docs/devtools
 - https://developer.chrome.com/docs/devtools/ai-assistance

skills/chrome-devtools/network-and-console-breakdown.md

@@ -0,0 +1,200 @@
+# Network & Console Data Flow
+
+Deep dive into how Chrome DevTools MCP collects, stores, and formats
+network requests and console messages.
+
+## Collection Layer (PageCollector.ts)
+
+### Storage Model
+
+Both collectors use `PageCollector<T>` base class with per-navigation
+bucketing:
+
+```
+WeakMap<Page, T[][]>
+  Page -> [
+    [items from current navigation],     // bucket 0
+    [items from previous navigation],    // bucket 1
+    [items from 2 navigations ago],      // bucket 2
+  ]
+```
+
+On `framenavigated` (main frame), a new empty bucket is pushed and the
+oldest is dropped. This gives 3-navigation retention.
+
+Each item gets a **stable ID** (monotonic counter per page) that
+persists across the session. IDs are used as `reqid` and `msgid` in
+tool responses.
+
+### NetworkCollector
+
+- Subscribes to `page.on('request')` for every HTTPRequest
+- On navigation, keeps the triggering request in the new bucket
+  (so the navigation request itself is visible)
+- Stores raw `HTTPRequest` objects (Puppeteer)
+
+### ConsoleCollector
+
+Collects three types of items into one stream:
+
+| Type | Source | How Collected |
+|------|--------|---------------|
+| `ConsoleMessage` | `console.log/warn/error/...` | `page.on('console')` |
+| `UncaughtError` | Unhandled exceptions | CDP `Runtime.exceptionThrown` |
+| `AggregatedIssue` | DevTools audit issues | CDP `Audits.issueAdded` |
+
+Uses `PageEventSubscriber` internally to bridge Puppeteer events to CDP:
+- Enables `Audits.enable()` on the CDP session
+- Runs `IssueAggregator` to deduplicate issues by primary key
+- Resets issue tracking on navigation
+
+## Formatting Layer (Formatters)
+
+### NetworkFormatter
+
+**Short format** (`toString()`):
+```
+reqid=1 GET https://example.com/api/data [200]
+reqid=2 POST https://example.com/submit [302]
+```
+
+**Detailed format** (`toStringDetailed()`):
+```markdown
+## Request: GET https://example.com/api/data
+### Request headers
+- Accept: application/json
+- Cookie: session=abc123
+
+### Response headers
+- Content-Type: application/json
+- Cache-Control: no-cache
+
+### Response body
+{"users": [{"id": 1, "name": "Alice"}]}
+```
+
+Key behaviors:
+- **Lazy loading**: Bodies only fetched when `fetchData: true`
+- **Size limit**: Response bodies truncated at 10KB inline
+- **File save**: `requestFilePath`/`responseFilePath` bypass truncation
+- **Binary check**: Non-UTF-8 responses show `<binary data>`
+- **Redirect chains**: Recursively formatted with indentation
+- **Expiration**: Bodies expire from browser memory quickly
+
+### ConsoleFormatter
+
+**Short format** (`toString()`):
+```
+msgid=1 [log] Hello world (0 args)
+msgid=2 [error] TypeError: Cannot read properties of undefined (1 args)
+```
+
+**Detailed format** (`toStringDetailed()`):
+```markdown
+## Console message
+- msgid: 2
+- type: error
+- text: TypeError: Cannot read properties of undefined
+
+### Arguments
+- Argument 0: {"type": "object", "value": {...}}
+
+### Stack trace
+  at fetchData (src/api.ts:42:15)
+  at handleClick (src/components/Button.tsx:18:5)
+  --- setTimeout ---
+  at scheduleUpdate (src/scheduler.ts:7:3)
+
+### Caused by: NetworkError: Failed to fetch
+  at doFetch (src/api.ts:30:11)
+  at fetchData (src/api.ts:40:20)
+```
+
+Key behaviors:
+- **Argument resolution**: Async `jsonValue()` extraction from RemoteObjects
+- **Source-mapped stacks**: Waits up to 1000ms for source maps to load
+  via `SymbolizedError.createStackTrace()`
+- **Error.cause chains** (v0.17.0): Recursively resolves `error.cause`
+  property, each rendered as "Caused by:" section
+- **Error objects in console.log** (v0.17.0): When an Error instance is
+  passed to `console.log()`, shows its message and stack trace
+- **Frame filtering**: Frames from ignored scripts (node_modules,
+  browser internals) are hidden
+- **50-line limit**: Stack traces capped at 50 frames
+- **Async fragments**: Shows async boundaries ("--- setTimeout ---")
+
+### IssueFormatter
+
+**Short format**: `msgid=3 [issue] Mixed Content (count: 2)`
+
+**Detailed format**: Markdown with issue description, learn-more links,
+and affected resources (elements mapped to `uid`, requests to `reqid`).
+
+Issues are aggregated -- multiple occurrences of the same issue type
+are pooled into one `AggregatedIssue` with a count.
+
+## SymbolizedError (DevtoolsUtils.ts)
+
+Central class for resolved error data with source-mapped stack traces.
+
+### Creation paths
+
+1. `fromDetails(opts)` -- From `Runtime.ExceptionDetails` (uncaught)
+2. `fromError(opts)` -- From `RemoteObject` with `subtype='error'`
+   (error objects in console.log)
+
+### Resolution process
+
+1. Extract message from exception details
+2. Collect script IDs from all call frames (sync + async)
+3. Wait for scripts to parse (`waitForScript`, up to 1000ms)
+4. Wait for source maps (`sourceMapManager.sourceMapForClientPromise`)
+5. Call `DebuggerWorkspaceBinding.createStackTraceFromProtocolRuntime()`
+6. Result: frames with original file paths, line numbers, column numbers
+
+### Cause chain
+
+Walks `error.cause` property via CDP `Runtime.getProperties`:
+1. Get error object's properties
+2. Find `cause` property
+3. If cause is an Error, recursively create `SymbolizedError`
+4. Result: linked list of `SymbolizedError` objects
+
+## Practical Tips
+
+### Catching API responses
+
+```
+# Option A: Network panel (bodies may expire)
+list_network_requests(resourceTypes: ["xhr", "fetch"])
+get_network_request(reqid=5, responseFilePath: "response.json")
+
+# Option B: evaluate_script (reliable, no expiration)
+evaluate_script(function: "async () => {
+  const r = await fetch('/api/data');
+  return r.json();
+}")
+```
+
+### Debugging errors efficiently
+
+```
+# 1. Find errors
+list_console_messages(types: ["error"])
+
+# 2. Get details (stack trace + cause chain)
+get_console_message(msgid=2)
+
+# 3. Check preserved messages from prior navigations
+list_console_messages(includePreservedMessages: true)
+```
+
+### Monitoring network across navigations
+
+```
+# See requests from last 3 page loads
+list_network_requests(includePreservedRequests: true)
+
+# Filter to just API calls
+list_network_requests(resourceTypes: ["xhr", "fetch"])
+```