ui-ux-polish

What this skill does

# 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](references/polish-workflow.md) -- The iterative polish prompt, why it works, iteration protocol, and multi-agent strategies
- [Design Patterns](references/design-patterns.md) -- Glassmorphism, neumorphism, bento grids with Tailwind implementations
- [Accessibility](references/accessibility.md) -- WCAG 2.2 AA standards, semantic HTML, ARIA, inclusive design, and reduced motion
- [Animation and Micro-interactions](references/animation-and-microinteractions.md) -- CSS transitions, loading states, spring animations, page transitions, and Tailwind animation utilities