Pixel Perfect QA
Goal
Catch visual, responsive, spacing, typography, alignment, and interaction issues before declaring UI work complete.
When to use
Use at the end of UI work, before handoff, before launch, after a redesign, or when the user asks if the page looks polished/professional.
Workflow
- Review layout alignment, spacing rhythm, type scale, hierarchy, color contrast, image crops, icon alignment, and responsive breakpoints.
- Check that mobile, tablet, and desktop each have intentional density and no accidental overflow.
- Inspect interactive states: hover, focus, active, disabled, loading, empty, error, and success when relevant.
- Check animation timing, cleanup, reduced-motion behavior, and whether motion supports the experience.
- Look for generic AI leftovers: placeholder copy, repeated cards, random gradients, oversized headings, or unused decorative elements.
- Fix small issues directly when safe; report larger issues separately if they require design decisions.
Quality bar
- Run build/lint/typecheck or the nearest project validation.
- Manually inspect critical breakpoints when possible.
- Confirm no console errors or layout overflow if browser validation is available.
Validation
- The page looks intentional at common breakpoints.
- Visual details align consistently and no obvious generic patterns remain.
- Interactive and responsive states are not ignored.
Final response
- Report QA findings fixed, remaining issues, and validation performed.
1---2name: pixel-perfect-qa3description: Use this when performing final visual QA for frontend UI, responsive pages, landing pages, design systems, animations, spacing, typography, and production polish.4---56# Pixel Perfect QA78## Goal910Catch visual, responsive, spacing, typography, alignment, and interaction issues before declaring UI work complete.1112## When to use1314Use at the end of UI work, before handoff, before launch, after a redesign, or when the user asks if the page looks polished/professional.1516## Workflow17181. Review layout alignment, spacing rhythm, type scale, hierarchy, color contrast, image crops, icon alignment, and responsive breakpoints.192. Check that mobile, tablet, and desktop each have intentional density and no accidental overflow.203. Inspect interactive states: hover, focus, active, disabled, loading, empty, error, and success when relevant.214. Check animation timing, cleanup, reduced-motion behavior, and whether motion supports the experience.225. Look for generic AI leftovers: placeholder copy, repeated cards, random gradients, oversized headings, or unused decorative elements.236. Fix small issues directly when safe; report larger issues separately if they require design decisions.2425## Quality bar2627- Run build/lint/typecheck or the nearest project validation.28- Manually inspect critical breakpoints when possible.29- Confirm no console errors or layout overflow if browser validation is available.3031## Validation3233- The page looks intentional at common breakpoints.34- Visual details align consistently and no obvious generic patterns remain.35- Interactive and responsive states are not ignored.3637## Final response3839- Report QA findings fixed, remaining issues, and validation performed.
YankielDBC2