devrites-browser-prooflisted
Install: claude install-skill ViktorsBaikers/DevRites
# devrites-browser-proof: runtime evidence for UI
Screenshots and runtime observations beat "it should render fine." Use the highest rung
of the ladder that's available; record which one.
The same ladder captures a **developer-facing docs / getting-started page** for the DX measure step
(`/rite-prove` 5c, `developer-experience.md`): screenshot the quickstart, confirm the documented
commands match what runs, and note the result in `browser-evidence.md` / `devex.md`.
## Ladder (top-down)
1. **Playwright MCP** (preferred): detect by tool availability (the `browser_*` tools are
present, e.g. `browser_navigate`); detect, don't install. Drives a Playwright-managed
browser. Pattern: `browser_navigate(url)` → `browser_snapshot()` (the accessibility tree
is the primary perception) → `browser_click` / `browser_type` on a **ref from the
snapshot** → `browser_take_screenshot()`. Read `browser_console_messages()` and
`browser_network_requests()` for console/network evidence; `browser_resize(w,h)` for each
responsive viewport. Act on snapshot refs, not pixel coordinates.
2. **Chrome DevTools MCP** (when configured). Use it **alongside** Playwright MCP for more
detail: screenshots, DOM, console, network, performance trace, accessibility tree, and
`lighthouse_audit`. Playwright MCP drives the flow; DevTools MCP adds Lighthouse + the perf
trace Playwright can't produce.
3. **Claude Code `/run` + `/verify`** (if available): launch + observe the app.
4. **Project-n