What problem does it solve? Frontend errors reported from APM platforms, browser consoles, or users (white screens, 4xx/5xx API failures, CORS issues, resource load failures) are often diagnosed by guessing from the error text alone. This Skill enforces an evidence-first workflow: reproduce the error in a real browser via browser MCP, collect console stacks, failed requests, and screenshots, then deliver an auditable root cause and actionable fix plan without modifying any code. ## Core Features & Use Cases - Reproduce and collect evidence: Drive Chrome DevTools MCP or Playwright MCP to open the page, trigger the error, and capture console stacks, failed network requests, DOM snapshots, and screenshots, all saved to disk for audit. - Structured conclusion output: Produce a fixed five-section report (symptom, evidence, root cause, fix plan, impact and regression points) where every claim links back to concrete evidence. - Header-rewriting forensics: When an API works via curl but fails in the browser with 403/401, run curl comparison experiments and inspect extension DNR rules on disk to find which browser extension or proxy rewrote the request headers. - Graceful degradation: When reproduction is impossible, follow a three-tier fallback (switch environment, request HAR/console exports, or give ranked possibilities) instead of silently skipping. - Use Case: A monitoring platform reports a spike of TypeError: Cannot read properties of undefined on the checkout page. Use this Skill to reproduce the error in a browser, trace the stack through sourcemaps to the source file, confirm the API response shape mismatch, and output a fix plan with exact file and line references. ## Quick Start Use the frontend-error-diagnose skill to reproduce this console error in the browser, collect the evidence, and tell me the root cause and fix plan without changing any code.
