diff --git a/prompts/general/visual_qa_cross_browser_audit_1445.md b/prompts/general/visual_qa_cross_browser_audit_1445.md new file mode 100644 index 0000000..a78ecf6 --- /dev/null +++ b/prompts/general/visual_qa_cross_browser_audit_1445.md @@ -0,0 +1,96 @@ +--- +title: "Visual QA & Cross-Browser Audit" +contributor: "@gokbeyinac" +tags: #general, #gokbeyinac +--- + +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