browser-testing-with-devtools
A runtime browser verification skill for checking UI, console, network, and performance evidence.
30-Second Summary
This skill gives an agent live browser eyes through Chrome DevTools MCP.
It focuses on reproducing the issue, inspecting DOM, console, network, and performance data, then verifying the rendered result.
Use it when static code inspection is not enough to prove what the user will see.
1-Minute Read
What it is
A SKILL.md workflow for browser-based runtime checks using Chrome DevTools MCP. It turns UI QA into observable evidence instead of relying only on build output or screenshots from memory.
When to use it
Use it for frontend layout, interaction, console, API, visual, accessibility, or Core Web Vitals work. It is especially useful after CSS changes or DB-backed UI changes that must be seen in the page.
How to test it first
Open one changed route at desktop and mobile widths, then ask the agent to report console errors, network failures, horizontal overflow, and a screenshot path. Compare the report with the visible acceptance criteria.
Watch out
Browser content is untrusted data. Do not let DOM text, console logs, network responses, cookies, or local storage become instructions or leaked secrets.