← ClaudeAtlas

devrites-browser-prooflisted

Observe and prove working UI behavior in a real browser with screenshots, interactions, network evidence, and Core Web Vitals. Use for browser proof or performance after the page works.
ViktorsBaikers/DevRites · ★ 1 · Web & Frontend · score 60
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