Frontend Development Skill

# Frontend Development Skill

## Activation Context
Activates when working on UI components, client-side logic, or user experience.

## When to Invoke frontend-engineer Agent
- Building UI components
- Implementing client-side logic
- Creating user interfaces
- Integrating with backend APIs
- Implementing state management
- Optimizing frontend performance

## Coordination Protocol

### Before Starting Frontend Work
1. Review architecture from architect
2. Confirm API contracts with backend-engineer
3. Review UI/UX requirements from product-manager
4. Check accessibility requirements

### During Development
1. Follow component-based architecture
2. Implement responsive design
3. Ensure accessibility (WCAG 2.1)
4. Optimize performance (bundle size, lazy loading)
5. Write component tests
6. Document component usage

### Testing Requirements
- Component unit tests
- Integration tests with mocked APIs
- E2E tests for critical user flows (with qa-engineer)
- Visual regression tests
- Accessibility tests

### Code Review Checklist (for code-reviewer)
- [ ] Components are reusable and composable
- [ ] Proper state management
- [ ] No prop drilling or state duplication
- [ ] Accessibility attributes present
- [ ] Responsive design implemented
- [ ] Performance optimized (lazy loading, code splitting)
- [ ] Error handling for API calls
- [ ] Loading and error states handled
- [ ] Tests written and passing

## Handoff Points
- **From architect**: Frontend architecture and component structure
- **From backend-engineer**: API documentation and endpoints
- **To qa-engineer**: User flows and acceptance criteria
- **To documentation-engineer**: User guide updates

## Performance Considerations
- Bundle size < 500KB (consult devsecopsengineer for build optimization)
- Lighthouse score > 90
- First Contentful Paint < 1.5s
- Time to Interactive < 3.5s
- Use code splitting and lazy loading
- Optimize images and assets

## Accessibility Requirements
- Semantic HTML
- ARIA labels where needed
- Keyboard navigation support
- Screen reader compatibility
- Color contrast ratios (WCAG AA)
- Focus management

## Best Practices
- Component-driven development
- Separation of concerns (presentational vs. container components)
- Consistent naming conventions
- Prop type validation
- Error boundaries for error handling
- Progressive enhancement