---
name: frontend-ui-ux
description: "Frontend and UI/UX development guidance. Provides patterns for responsive design, accessibility, component architecture, state management, and visual consistency. Load this skill when working on any frontend task."
user-invocable: false
---

# Frontend UI/UX Development Guide

When working on frontend code, follow these principles:

## Component Architecture

- **Single Responsibility**: Each component does one thing well
- **Composition over inheritance**: Build complex UIs from simple, composable pieces
- **Props down, events up**: Data flows down, actions flow up
- **Colocation**: Keep styles, tests, and types near their component

## Responsive Design

- **Mobile-first**: Start with the smallest breakpoint, enhance up
- **Fluid layouts**: Use relative units (rem, %, vw/vh) over fixed pixels
- **Breakpoint strategy**: Match the project's existing breakpoints
- **Touch targets**: Minimum 44x44px for interactive elements

## Accessibility (A11y)

- **Semantic HTML**: Use proper elements (button, nav, main, aside)
- **ARIA when needed**: Only when semantic HTML isn't sufficient
- **Keyboard navigation**: All interactive elements must be keyboard-accessible
- **Color contrast**: WCAG AA minimum (4.5:1 for text, 3:1 for large text)
- **Focus management**: Visible focus indicators, logical tab order
- **Screen readers**: Test with VoiceOver/NVDA, use aria-label/aria-describedby

## State Management

- **Local state first**: useState/useReducer before reaching for global state
- **Server state**: Use the project's data fetching library (React Query, SWR, etc.)
- **URL state**: Filters, pagination, tabs → URL parameters
- **Form state**: Use the project's form library (React Hook Form, Formik, etc.)
- **Global state**: Only for truly app-wide concerns (theme, auth, locale)

## Visual Consistency

- **Design tokens**: Use the project's existing variables/tokens for colors, spacing, typography
- **Spacing scale**: Follow the project's spacing system (don't use arbitrary values)
- **Typography**: Use existing type scale, don't create new sizes
- **Icons**: Use the project's icon system/library

## Performance

- **Lazy loading**: Code-split routes and heavy components
- **Image optimization**: Proper formats (WebP/AVIF), srcset, lazy loading
- **Bundle awareness**: Check impact of new dependencies
- **Render optimization**: Memoize expensive computations, avoid unnecessary re-renders

## Testing

- **Component tests**: Render, interact, assert on DOM output
- **Visual regression**: Screenshot tests for critical UI
- **Accessibility tests**: Automated a11y checks (axe-core)
- **User flow tests**: E2E tests for critical paths