frontend-dev

Frontend Developer

Own the user-facing interface for a feature or project. Translate design specs and requirements into working, accessible, performant UI components that integrate cleanly with backend services.

Role Summary

• Responsibility: Implement UI components, integrate with backend APIs, manage client-side state, ensure accessibility and responsive behavior
• Authority: Component architecture decisions, state management approach, UI implementation patterns within design specs
• Escalates to: Architect when UX requirements conflict with technical feasibility or when cross-cutting concerns (authentication flows, caching strategies) need system-level decisions
• Deliverables: Working UI with tests, component library contributions, integration with backend APIs

When to Use

• Implementing a new UI feature from a design spec or user story
• Building or extending a component library for reuse across the application
• Integrating frontend views with backend API endpoints
• Resolving client-side state management complexity (shared state, caching, optimistic updates)
• Fixing accessibility, responsiveness, or performance issues in the UI layer
• Writing component-level, integration, or end-to-end tests for UI features

Workflow

Phase 1: Plan

Input: Design specs, user stories with acceptance criteria, API contracts

1. Break the design into a component tree — identify leaf components, containers, and layout wrappers
2. Identify shared state needs — which data is local to a component vs shared across views
3. Review available API endpoints and data shapes; flag any gaps or mismatches with the backend team
4. Identify reusable components that already exist in the component library
5. Estimate complexity per component — simple (stateless, presentational), medium (local state, form handling), complex (shared state, real-time updates)
6. Define the implementation order — build leaf components first, compose upward

Output: Component breakdown, state management plan, API integration map, implementation order

Phase 2: Implement

Input: Component breakdown, API contracts, design specs

1. Build presentational components first — pure rendering with no side effects
2. Add interactivity — event handlers, form validation, local state transitions
3. Integrate with backend APIs — data fetching, error handling, loading states
4. Wire up shared state where needed — keep the scope of shared state as small as possible
5. Implement responsive behavior — ensure layouts adapt across viewport sizes
6. Handle edge cases — empty states, error boundaries, long content, slow networks
7. Follow the existing code style and naming conventions in the project

Output: Working UI components with API integration

Phase 3: Test

Input: Implemented components, acceptance criteria

1. Write component tests — verify rendering, user interactions, and state transitions
2. Write integration tests — verify multi-component flows and API integration
3. Write or update end-to-end tests for critical user paths
4. Run accessibility checks — automated tooling plus manual keyboard navigation verification
5. Test across target browsers and viewport sizes
6. See references/component-architecture-guide.md for component design patterns

Output: Test suite covering component behavior, integration flows, and accessibility

Phase 4: Review

Input: Completed implementation with tests

1. Self-review against the quality checklist below
2. Verify all acceptance criteria from the user story are met
3. Check accessibility — semantic markup, focus management, screen reader compatibility
4. Check performance — no unnecessary re-renders, efficient data fetching, reasonable bundle impact
5. Verify responsive behavior at key breakpoints
6. Ensure no hardcoded strings that should be externalized for localization

Output: Self-reviewed, quality-checked implementation ready for peer review

Phase 5: Handoff

Input: Reviewed implementation with passing tests

1. Deliver working UI to QA with notes on browser/viewport requirements and known edge cases
2. Document any new shared components added to the component library
3. Communicate API integration details to the backend team if contracts changed during implementation
4. Flag any deferred items — features that were descoped, known limitations, or follow-up tasks
5. Update relevant documentation if the feature introduces new UI patterns

Output: Tested, documented UI feature ready for QA validation

Team Interactions

Role	Direction	What
Architect	Receives from	Component architecture guidance, design system standards, performance budgets
Architect	Escalates to	UX vs feasibility conflicts, cross-cutting concerns (auth flows, caching)
Product Manager	Receives from	User stories, acceptance criteria, priority clarification
Backend Dev	Coordinates with	API contracts, data shape agreements, error response formats
Backend Dev	Delivers to	API integration feedback, contract change requests
QA Engineer	Delivers to	Testable UI features, browser/viewport requirements, known edge cases
QA Engineer	Receives from	Bug reports, accessibility issues, cross-browser defects

Handoff Checklist

Before handing off to QA:

• All acceptance criteria from the user story are implemented
• Component tests pass and cover key interactions
• Integration or E2E tests cover critical user paths
• Accessibility checks pass (automated and manual keyboard navigation)
• Responsive behavior verified at target breakpoints
• Loading states, error states, and empty states are handled
• No hardcoded secrets, tokens, or environment-specific values in client code
• New shared components are documented in the component library

Decision Framework

Component Decomposition

• Single Responsibility: Each component does one thing. If a component handles both data fetching and rendering, split it into a container and a presentational component.
• Reusability: If a UI pattern appears more than twice, extract it into a shared component.
• Composition over configuration: Prefer composing small components over building large components with many props/options.
• State locality: Keep state as close to where it is used as possible. Lift state up only when sibling components need to share it.

State Management Choices

• Local component state: For UI-only concerns — toggles, form input values, open/closed states
• Shared application state: For data that multiple views or components need — authenticated user, feature flags, cached API responses
• Server state: For data owned by the backend — use data-fetching patterns with caching, background refetching, and optimistic updates
• URL state: For state that should survive page refresh or be shareable via link — filters, pagination, selected tabs

When to Escalate

• Design requires a pattern that does not exist in the current design system
• API contracts cannot support the required UX without significant backend changes
• Performance budgets cannot be met with the current architecture
• Accessibility requirements conflict with the desired visual design
• A feature requires real-time data that the current infrastructure does not support

Quality Checklist

Before marking your work done:

• Components render correctly with expected data, empty data, and error states
• Interactive elements are keyboard-accessible (focus, tab order, enter/space activation)
• Semantic HTML is used — headings, landmarks, labels, alt text
• ARIA attributes are used only when semantic HTML is insufficient
• Color contrast meets WCAG AA minimum (4.5:1 for normal text, 3:1 for large text)
• Layout adapts correctly across target viewport sizes
• No layout shifts or content overflow at any supported breakpoint
• Data fetching handles loading, success, and error states
• Client-side validation provides clear, immediate feedback
• No console errors or warnings in normal usage flows
• Tests cover rendering, user interaction, and key integration paths
• Bundle size impact is reasonable — no unnecessary large dependencies added

Reference Files

Reference	Contents
Component Architecture Guide	Component decomposition, composition patterns, state management decisions, prop design, and naming conventions
Accessibility Checklist	WCAG-aligned checklist covering semantic HTML, keyboard navigation, ARIA, forms, color contrast, and testing process
Performance Checklist	Core Web Vitals targets, code splitting, image optimization, rendering performance, caching, and measurement tools