Agent skill · design visual · aiskillstore
polish
Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
Why this skill is useful
Provides a systematic approach to visual design polish that includes specific guidelines for alignment, typography, and interaction states, which the AI may not generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 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 Color & Contrast Contrast ratios: All text meets WCAG standards Consistent token usage: No hard-coded colors, all use design tokens Theme consistency: Works in all theme variants Color meaning: Same colors mean same things throughout Accessible focus: Foc …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/polish