# Frontend Design

Auto-invoked guidance for building distinctive, production-grade UI.

## Usage

This skill automatically activates when working on frontend code.

## Focus Areas

### Typography
- Font pairing recommendations
- Responsive typography scales
- Line height and letter spacing
- Hierarchy establishment

### Motion & Animation
- Micro-interactions
- Page transitions
- Loading states
- Scroll animations
- Performance-conscious animations

### Visual Polish
- Color theory application
- Spacing consistency (8px grid)
- Shadow and depth
- Border radius patterns
- Icon consistency

### Production Quality
- Cross-browser compatibility
- Responsive breakpoints
- Accessibility (WCAG 2.1)
- Performance optimization
- Dark mode support

## Best Practices

1. **Consistency** - Design tokens and CSS variables
2. **Hierarchy** - Clear visual hierarchy
3. **Whitespace** - Generous breathing room
4. **Feedback** - Interactive state feedback
5. **Polish** - Attention to detail

## Output

- Component suggestions
- Style improvements
- Animation recommendations
- Accessibility fixes

$ARGUMENTS