AI SummaryPolish is a final quality assurance skill that refines UI/UX details like alignment, spacing, and consistency before deployment. It's useful for developers and designers who want to elevate finished features from good to production-ready.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "polish" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/polish && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/polish/SKILL.md "https://raw.githubusercontent.com/pbakaus/impeccable/main/.claude/skills/polish/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
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 • Check spacing with browser inspector • Test at multiple viewport sizes • Look for elements that "feel" off
Typography Refinement
• Hierarchy consistency: Same elements use same sizes/weights throughout • Line length: 45-75 characters for body text • Line height: Appropriate for font size and context • Widows & orphans: No single words on last line • Hyphenation: Appropriate for language and column width • Kerning: Adjust letter spacing where needed (especially headlines) • Font loading: No FOUT/FOIT flashes
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster