Systematically checks a built design against its intended specification across browsers, devices, and edge cases. This is the designer's QA not functional testing, but visual fidelity and interaction quality. Produces a categorized issue list with exact reproduction steps and suggested fixes
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
Generate a comprehensive, actionable development plan for building a responsive web application.
Generate a comprehensive, actionable development plan to enhance the existing web application.
