visual-polishlisted

# UI Visual Polish ## Overview Great interfaces rarely come from a single thing—it's usually a collection of small, thoughtful details that compound into a cohesive, polished experience. This skill documents techniques for visual refinement: text wrapping strategies, balanced border radius hierarchies, contextual animations, optical alignment, and shadow composition. Each detail is intentional and measurable. ## When to Use / When NOT to Use ### Use When: - Refining typography presentation (headings, body text, dynamic numbers) - Designing nested UI components with multiple layers - Adding entrance/exit animations to modals, tooltips, or lists - Replacing solid borders with depth-aware shadows - Aligning buttons with icons or misaligned visual elements - Optimizing animations for user interruption (mid-toggle, mid-drag) - Adding micro-interactions (copy-to-clipboard, status toggles) - Ensuring consistent visual hierarchy across the interface ### Do NOT Use When: - Building motion-heavy animations (use dedicated motion library docs) - Solving structural layout issues (use CSS Grid/Flexbox guides) - Implementing accessibility requirements (separate A11y guide) - Addressing performance bottlenecks (use optimization guide) - Creating brand identity from scratch (use design system docs) --- ## Core Techniques ### Surfaces & Layout #### 1. Text Wrapping Strategy Balance text distribution and reading flow with CSS `text-wrap`: - **`text-wrap: balance`** — For headings -