qa

# Visual QA Validation ## Core Philosophy - **Screenshot first, then critique.** Always look at the actual rendered output, not just the code. - **Be specific.** "The spacing looks off" is useless. "The gap between the heading and paragraph is 32px but should be 16px based on the surrounding spacing rhythm" is useful. - **Prioritize impact.** Not every pixel matters. Focus on what users will actually notice. - **Reference the intent.** Compare against design tokens, mockups, or stated design goals. ## Quick Start The Chrome DevTools MCP exposes browser automation as tool calls. Typical sequence: 1. `mcp__chrome-devtools__navigate_page` (type: "url", url: "http://localhost:3000") — load the page 2. `mcp__chrome-devtools__take_snapshot` — text-based a11y tree with element `uid`s (cheap, preferred first step) 3. `mcp__chrome-devtools__take_screenshot` — visual capture for review 4. Interact via `click` / `fill` / `hover` / `press_key` using the `uid`s from the snapshot --- ## Review Categories (Priority Order) ### 1. Layout & Spacing **Check for:** - Consistent spacing rhythm (is everything on the spacing grid?) - Alignment -- are elements that should be aligned actually aligned? - Padding consistency within similar components - Container widths and max-widths - No horizontal overflow - Responsive behavior (if multiple viewport screenshots available) **Common issues:** - Inconsistent padding in cards (e.g., 24px top, 16px sides) - Elements slightly off-grid (15px inste...