JNZader Purpose
Four quality gate checklists for frontend. Run after implementation, before merge.
Gate 1: Baseline Visual Review
- Consistent spacing (design system scale)
- Typography hierarchy (h1 > h2 > h3, no skips)
- Color contrast WCAG AA (4.5:1 text, 3:1 large)
- Responsive: 375px, 768px, 1280px
- No horizontal overflow
- Loading states for async ops
- Empty states designed
- Error states designed
- Truncation handled (ellipsis, line clamp)
Gate 2: Accessibility
- All interactive elements keyboard-reachable
- Visible focus indicators
- Skip-to-content link
- Images have alt text (decorative: alt="")
- Form inputs have labels (not just placeholders)
- ARIA roles correct (not overused)
- Color not the only information channel
- Touch targets 44x44px minimum
- aria-live for dynamic content
- Modals trap focus, restore on close
Gate 3: Metadata & SEO
- Unique page title per page
- Meta description < 160 chars
- OG tags: title, description, image
- Twitter card tags
- Canonical URL
- Favicons (16, 32, 180, 192, 512)
- robots.txt
- sitemap.xml for public pages
- JSON-LD structured data
- html lang attribute
Gate 4: Motion & Performance
- Animations use transform/opacity only
- CLS < 0.1
- Respects prefers-reduced-motion
- Transitions < 300ms for feedback
- No blocking animations on page load
- Images lazy-loaded below fold
- LCP < 2.5s
- FID < 100ms
- Bundle size checked
Report Format
| Gate | Passed | Total | Status |
|------|--------|-------|--------|
| Visual | 8/9 | 9 | warning |
| Accessibility | 10/10 | 10 | pass |
| Metadata | 9/10 | 10 | warning |
| Performance | 9/9 | 9 | pass |
Critical Rules
- Run ALL 4 gates before merging frontend PRs
- Accessibility gate is NON-NEGOTIABLE — failures block merge
- Test at minimum 3 breakpoints: 375px, 768px, 1280px
- ALWAYS check prefers-reduced-motion for animations
- CLS > 0.1 or LCP > 2.5s are merge-blocking