browser-verificationlisted

# Purpose Canonical procedure for verifying UI behavior in a real browser through the Playwright MCP tools (`mcp__plugin_playwright_playwright__browser_*`). Extracted 2026-06-10 from duplicated sections in @tech-lead, @react-specialist, @verification-agent, and @quality-checker — those agents now reference this skill and keep only their role-specific invariants. # Step 0 — confirm a live target The main app's dev server (project.json -> `mainApp`) typically runs at `http://localhost:3000` (`npm run dev`); a locally deployed cluster stack has its own ingress hostname (e.g., `https://d16.local`); post-deploy checks use the staging environment's URL (project.json -> `cloud.envAlias`). Never assume a URL is up — `browser_navigate` first, then verify the response. # Core loop (interactive verification) 1. `browser_navigate` to the page under test. 2. `browser_snapshot` — capture the accessibility tree and act on the element refs it returns (more reliable than guessing CSS selectors; prefer `data-testid`). 3. Drive the flow as needed: `browser_click`, `browser_type`, `browser_fill_form`, `browser_select_option`, `browser_press_key`, `browser_hover`. 4. Capture evidence: `browser_take_screenshot` (visual state), `browser_console_messages` (runtime/hydration errors the build won't catch), `browser_network_requests` (failed/slow calls). Use `browser_resize` to check responsive breakpoints. # Observation-only variant (report-only agents) Read-only verifiers (@verification-agent,