UI/UX Polish

Iterative enhancement workflow that takes working web applications from decent to world-class. Covers desktop and mobile optimization as separate modalities, visual design patterns, and accessibility standards.

When to use: The app works correctly with basic styling in place and you want to improve visual quality through iterative refinement. Also use for applying specific design patterns (glassmorphism, neumorphism, bento grids) or auditing accessibility.

When NOT to use: The app is broken or buggy (fix bugs first), styling is fundamentally wrong (needs complete overhaul), or no basic design system exists yet.

Quick Reference

Pattern	Technique	Key Point
Iterative polish	Run the same polish prompt 10+ times	Small improvements compound dramatically
Desktop/mobile split	Optimize each modality independently	Prevents compromises that hurt both
Glassmorphism	`backdrop-blur-xl` + `bg-white/70` + border	Functional depth with legibility
Neumorphism	Dual-direction box shadows	Best in light mode; use borders for a11y
Bento grid	CSS Grid with `rounded-3xl` cells	Hero cell spans multiple columns/rows
WCAG 2.2 AA	Contrast ratios + target sizes + focus visible	4.5:1 text, 3:1 UI, 24x24px targets
Reduced motion	`prefers-reduced-motion: reduce`	Disable animations for motion-sensitive users
Semantic HTML	Landmarks + heading hierarchy + native elements	Use `<button>` not `<div role="button">`
Inclusive design	Multiple input methods + error forgiveness	Support keyboard, voice, and touch equally
Typography hierarchy	Consistent scale with clear levels	Font size, weight, and spacing rhythm
Spacing rhythm	Consistent padding and margin scale	Use design token multiples (4px, 8px, 16px)
Hover/focus states	Visible feedback on all interactive elements	Keyboard users need visible focus indicators
Animation/transitions	`ease-out` enter, `ease-in` exit, 100-300ms	Prefer transform/opacity for GPU compositing
Micro-interactions	Button press, toggle, focus, success/error	Always respect `prefers-reduced-motion`

Common Mistakes

Mistake	Correct Pattern
Running polish on a broken app	Fix all functional bugs first, then apply iterative polish
Making one large pass instead of many small ones	Run 10+ iterations; incremental improvements compound
Optimizing desktop and mobile simultaneously	Treat each as a separate modality and optimize independently
Stopping after changes appear minimal	Keep iterating; subtle spacing and typography tweaks add up
Applying glassmorphism to all elements	Use glass effects strategically on cards and modals only
Neumorphism without accessibility borders	Add a 1px border for low-vision users (contrast requirement)
Ignoring `prefers-reduced-motion`	Always respect system motion preferences in CSS
Using `<div>` with click handlers instead of `<button>`	Use native semantic HTML elements for built-in accessibility

Delegation

Desktop and mobile polish in parallel: Use Task agent to run separate polish passes for each modality
Visual regression verification: Use Explore agent to check that polish iterations have not broken layout or accessibility
Design system alignment planning: Use Plan agent to establish spacing, typography, and color patterns before polishing
Full accessibility audits: Delegate to accessibility skill for in-depth WCAG compliance, ARIA patterns, focus management, and screen reader testing

References

Polish Workflow -- The iterative polish prompt, why it works, iteration protocol, and multi-agent strategies
Design Patterns -- Glassmorphism, neumorphism, bento grids with Tailwind implementations
Accessibility -- WCAG 2.2 AA standards, semantic HTML, ARIA, inclusive design, and reduced motion
Animation and Micro-interactions -- CSS transitions, loading states, spring animations, page transitions, and Tailwind animation utilities

ui-ux-polish

UI/UX Polish

Quick Reference

Common Mistakes

Delegation

References