Visual Validate

Drive a real browser via MCP to verify a UI change works as intended. Auto-detects which browser MCP is available (chrome-devtools preferred, playwright fallback). Screenshots, interactions, and console capture confirm the change is real — not just type-checked.

MCP Auto-Detection

Prefer chrome-devtools MCP tools (mcp__chrome-devtools__*); fall back to playwright (mcp__playwright__*) if absent. If neither is available, STOP and tell the user to install one. State the detected MCP at the start: "Using chrome-devtools MCP for visual validation."

Workflow

Phase 1 — Setup

1. Confirm the dev server URL with the user (default to http://localhost:3000 if a Next.js/Vite project is detected; otherwise ask).
2. If the dev server is not running, ask the user to start it. Do NOT start it automatically — port collisions are easy and dev servers are user state.
3. Open the page via the detected MCP:
   • chrome-devtools: new_page → navigate_page
   • playwright: equivalent navigate tool