browser-testing-with-devtools
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
Install
git clone https://github.com/addyosmani/agent-skills /tmp/agent-skills && ln -s /tmp/agent-skills/skills/browser-testing-with-devtools ~/.claude/skills/browser-testing-with-devtoolsFrom README
Browser Testing with DevTools Overview Use Chrome DevTools MCP to give your agent eyes into the browser. This bridges the gap between static code analysis and live browser execution — the agent can see what the user sees, inspect the DOM, read console logs, analyze network requests, and capture performance data. Instead of guessing what's happening at runtime, verify it. When to Use Building or modifying anything that renders in a browser Debugging UI issues (layout, styling, interaction) Diagnosing console errors or warnings Analyzing network requests and API responses Profiling performance (Core Web Vitals, paint timing, layout shifts) Verifying that a fix actually works in the browser Automated UI testing through the agent When NOT to use: Backend-only changes, CLI tools, or code that doesn't run in a browser. Setting Up Chrome DevTools MCP Add the following to your project's .mcp.json or Claude Code settings: -y skips the npx confirmation.
More from this repo
api-and-interface-design
Guides stable API and interface design.
constraint-driven-development
Establishes a project's quality bar as a written contract and stops agents quietly lowering it.
doubt-driven-development
Subjects every non-trivial decision to a fresh-context adversarial review before it stands.