polishlisted

**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. ## Pre-Polish Assessment Understand the current state and goals: 1. **Review completeness**: - Is it functionally complete? - Are there known issues to preserve (mark with TODOs)? - What's the quality bar? (MVP vs flagship feature?) - When does it ship? (How much time for polish?) 2. **Identify polish areas**: - Visual inconsistencies - Spacing and alignment issues - Interaction state gaps - Copy inconsistencies - Edge cases and error states - Loading and transition smoothness **CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. ## Polish Systematically Work through these dimensions methodically: ### Visual Alignment & Spacing - **Pixel-perfect alignment**: Everything lines up to grid - **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) - **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) - **Responsive consistency**: Spacing and alignment work at all breakpoints - **Grid adherence**: Elements snap to baseline grid **Check**: - Enable grid overlay and verify alignment - Check spacing with browser inspector - Test at multiple viewport sizes - Look for elements that "feel" off ### Typography Re