# UI/UX Polish

> UI/UX polish patterns including design tokens, responsive design, and accessibility

## When to Use

- Frontend development
- Design reviews
- Accessibility improvements
- UI modernization

## Rules

### Design Tokens
```css
:root {
  --color-primary: #0066cc;
  --spacing-sm: 8px;
  --border-radius: 4px;
}
```

### Responsive Design
- Mobile-first approach
- Breakpoints: 640px, 1024px, 1280px
- Flexible layouts with CSS Grid/Flexbox

### Accessibility (WCAG)
- Color contrast: 4.5:1
- Keyboard navigation
- ARIA labels
- Screen reader support

### Animation
- Transitions: 200-300ms
- Use CSS transforms
- Respect reduced motion

---

*Original OpenCode Skill*
