Back to catalog

Addy browser-testing-with-devtools

A real-browser verification skill for UI work that needs runtime evidence, not only source-code inspection.

Repository
addyosmani/agent-skills
Skill path
skills/browser-testing-with-devtools/SKILL.md
Systems
Claude Code, Codex, Cursor, Windsurf / Devin, OpenCode, Zed
Install
npx add-skill addyosmani/agent-skills
GitHub stars
48,672
Updated
2026-06-06
Source
README · SKILL.md

What it is

browser-testing-with-devtools is a browser verification skill built around Chrome DevTools MCP. It asks the agent to inspect DOM, console, network requests, performance data, and visual output with real runtime data.

Why it is useful

UI bugs often do not show up in static code review. This skill gives the agent a reason to open the browser and verify what users actually see.

Best uses

  • Debugging UI layout, styling, or interaction bugs.
  • Checking console errors and network failures.
  • Profiling frontend performance and Core Web Vitals.

Notes

The skill assumes Chrome DevTools MCP is available. If your environment uses Playwright instead, adapt the workflow but keep the same evidence-first principle.