ui-polishlisted

# ui-polish — make the UI look like a real team shipped it ## When to use this skill Trigger when the visual quality of an interface is the bottleneck. Strong signals: - "make this look better", "polish this page", "improve the design", "this looks AI-generated" - A screenshot in the conversation with the user pointing out spacing, alignment, or visual hierarchy issues - A new component just landed and the user wants it to match the rest of the system Do *not* trigger for: a11y-only requests (separate skill territory), pure animation work without a structural problem, or when the design system is locked and the user is asking you to *break* it. ## The output contract Code changes that pass this checklist: 1. **Type scale**: at most 6 sizes in use, geometric ratio (e.g. 12, 14, 16, 20, 24, 32). No `font-size: 13px` one-off. 2. **Spacing**: every margin/padding/gap is a multiple of 4 (preferably 8). No `margin: 17px`. 3. **Color**: every color comes from a token (`color-bg-surface`, `color-text-muted`) — not a raw hex inline. 4. **States covered**: every interactive element has explicit `:hover`, `:focus-visible`, `:active`, and `:disabled`. Forms have loading + error + empty + success. 5. **Density**: deliberate. Marketing pages breathe. Dense data UIs are tight. Don't average. 6. **Motion**: at most one purposeful transition per interaction (e.g. 150ms opacity on hover). No bouncy nonsense. ## Workflow ### 1 — Diagnose before touching Read the current component. Ide