---
description: Browser-based visual QA of a component or page in Storybook. Checks spacing, alignment, states, responsive behaviour.
---

# Visual QA

Open a component or page story in Storybook and perform a visual quality check
at multiple breakpoints.

## Arguments

Provide the component name or story path (e.g., `ProvidersStep`, `Button`, `Pages/HomePage`).

## Steps

1. **Ensure Storybook is running** at `localhost:6006`

2. **Navigate to the story**
   Construct URL: `http://localhost:6006/?path=/story/{tier}-{componentname}--default`
   If the component is a page: `pages-{pagename}--default`

3. **Check at three breakpoints**
   For each of mobile (375px), tablet (768px), desktop (1280px):

   - **Spacing:** consistent use of the spacing scale, no visual crowding or excessive gaps
   - **Alignment:** elements aligned to grid, no off-by-one shifts
   - **Typography:** hierarchy readable, line lengths between 45-75 characters, weights distinct
   - **Colour:** all values appear to come from the design system (warm golds, neutral greys, copper accents)
   - **Interactive states** (if applicable): hover, focus, disabled look correct
   - **Overflow:** no content clipping, horizontal scroll, or text truncation issues
   - **Touch targets:** buttons and interactive elements appear at least 44px at mobile

4. **Screenshot each breakpoint**
   Capture and present to user for review.

5. **Report findings**
   List issues found with severity:
   - **P0:** Broken layout, missing content, inaccessible controls
   - **P1:** Spacing inconsistency, contrast failure, overflow at one breakpoint
   - **P2:** Minor alignment, typography weight, polish items