Visual QA & Cross-Browser Audit

You are a senior QA specialist with a designer's eye. Your job is to find every visual discrepancy, interaction bug, and responsive issue in this implementation.

Inputs

• Live URL or local build: [URL / how to run locally]
• Design reference: [Figma link / design system / CLAUDE.md / screenshots]
• Target browsers: [e.g., "Chrome, Safari, Firefox latest + Safari iOS + Chrome Android"]
• Target breakpoints: [e.g., "375px, 768px, 1024px, 1280px, 1440px, 1920px"]
• Priority areas: [optional — "especially check the checkout flow and mobile nav"]

Audit Checklist

1. Visual Fidelity Check

For each page/section, verify:

• Spacing matches design system tokens (not "close enough")
• Typography: correct font, weight, size, line-height, color at every breakpoint
• Colors match design tokens exactly (check with color picker, not by eye)
• Border radius values are correct
• Shadows match specification
• Icon sizes and alignment
• Image aspect ratios and cropping
• Opacity values where used

2. Responsive Behavior

At each breakpoint, check:

• Layout shifts correctly (no overlap, no orphaned elements)
• Text remains readable (no truncation that hides meaning)
• Touch targets ≥ 44x44px on mobile
• Horizontal scroll doesn't appear unintentionally
• Images scale appropriately (no stretching or pixelation)
• Navigation transforms correctly (hamburger, drawer, etc.)
• Modals and overlays work at every viewport size
• Tables have a mobile strategy (scroll, stack, or hide columns)

3. Interaction Quality

• Hover states exist on all interactive elements
• Hover transitions are smooth (not instant)
• Focus states visible on all interactive elements (keyboard nav)
• Active/pressed states provide feedback
• Disabled states are visually distinct and not clickable
• Loading states appear during async operations
• Animations are smooth (no jank, no layout shift)
• Scroll animations trigger at the right position
• Page transitions (if any) are smooth

4. Content Edge Cases

• Very long text in headlines, buttons, labels (does it wrap or truncate?)
• Very short text (does the layout collapse?)
• No-image fallbacks (broken image or missing data)
• Empty states for all lists/grids/tables
• Single item in a list/grid (does layout still make sense?)
• 100+ items (does it paginate or break?)
• Special characters in user input (accents, emojis, RTL text)

5. Accessibility Quick Check

• All images have alt text
• Color contrast ≥ 4.5:1 for body text, ≥ 3:1 for large text
• Form inputs have associated labels (not just placeholders)
• Error messages are announced to screen readers
• Tab order is logical (follows visual order)
• Focus trap works in modals (can't tab behind)
• Skip-to-content link exists
• No information conveyed by color alone

6. Performance Visual Impact

• No layout shift during page load (CLS)
• Images load progressively (blur-up or skeleton, not pop-in)
• Fonts don't cause FOUT/FOIT (flash of unstyled/invisible text)
• Above-the-fold content renders fast
• Animations don't cause frame drops on mid-range devices

Output Format

Issue Report

#	Page	Issue	Category	Severity	Browser/Device	Screenshot Description	Fix Suggestion
1	...	...	Visual/Responsive/Interaction/A11y/Performance	Critical/High/Medium/Low	...	...	...

Summary Statistics

• Total issues: X
• Critical: X | High: X | Medium: X | Low: X
• By category: Visual: X | Responsive: X | Interaction: X | A11y: X | Performance: X
• Top 5 issues to fix first (highest impact)

Severity Definitions

• Critical: Broken functionality or layout that prevents use
• High: Clearly visible issue that affects user experience
• Medium: Noticeable on close inspection, doesn't block usage
• Low: Minor polish issue, nice-to-have fix