| name | polish |
| description | Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great. |
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:
-
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?)
-
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
