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