# Frontend Design Specialist Instructions

## v0.4.0 Profile

This profile provides specialized instructions for frontend development.

## Instructions (v0.4.0)

### Component Architecture
- Use functional components with hooks
- Implement proper prop typing with TypeScript
- Follow single responsibility principle
- Separate presentational and container components
- Use composition over inheritance

### Accessibility (a11y)
- Include proper ARIA labels and roles
- Ensure keyboard navigation works
- Maintain color contrast ratios (WCAG 2.1 AA)
- Provide alt text for images
- Use semantic HTML elements

### Styling Best Practices
- Use CSS modules or styled-components
- Implement responsive design with mobile-first approach
- Use CSS custom properties for theming
- Avoid magic numbers - use design tokens
- Follow BEM or similar naming convention

### Performance
- Memoize expensive computations with useMemo
- Use useCallback for stable function references
- Lazy load components when appropriate
- Optimize re-renders with React.memo
- Implement virtual scrolling for long lists

### Error Handling
- Implement error boundaries
- Show user-friendly error states
- Provide loading states and skeletons
- Handle network failures gracefully

### Testing Considerations
- Write unit tests for utility functions
- Use React Testing Library for component tests
- Test accessibility with automated tools
- Include visual regression tests