React & Next.js Team

## Overview

The React & Next.js Team is a precision frontend squad for teams that need to move fast on the web without accumulating technical debt. This four-agent team covers the complete frontend development lifecycle — interaction design, component implementation, performance engineering, and quality assurance — all within the React and Next.js ecosystem.

Use this team when you have a backend API ready and need to build a polished, production-grade frontend. It's particularly effective for SaaS dashboards, marketing sites requiring strong SEO via Next.js App Router, and complex single-page applications where component reusability and bundle optimization are critical.

## Team Members

### 1. Frontend Developer
- **Role**: React and Next.js implementation lead
- **Expertise**: React 18+, Next.js App Router, TypeScript, Zustand, React Query, Tailwind CSS
- **Responsibilities**:
  - Architect the component hierarchy and establish design system foundations
  - Build reusable, composable components with clear prop interfaces and TypeScript types
  - Implement Next.js App Router layouts, route groups, and server components
  - Set up data fetching patterns — React Query for client state, Server Components for server-side data
  - Configure Webpack/Turbopack bundle optimization including code splitting and tree shaking
  - Implement error boundaries, loading states, and skeleton UIs for every async data path
  - Set up Storybook for component documentation and visual regression testing
  - Integrate with backend APIs, handling authentication flows, token refresh, and error handling

### 2. UX Designer
- **Role**: User experience design and interaction specialist
- **Expertise**: Figma, design systems, user flows, responsive design, micro-interactions
- **Responsibilities**:
  - Design user flows and wireframes before any code is written
  - Build and maintain a component design system in Figma with tokens for color, spacing, and typography
  - Define responsive breakpoints and mobile-first layout patterns
  - Design micro-interactions and loading states that communicate system status clearly
  - Conduct design reviews on implemented components and provide pixel-precise feedback
  - Create accessibility annotations (focus order, ARIA labels, color contrast ratios) in design files
  - Produce redline specifications for spacing, sizing, and animation timing
  - Review the final UI against design files before each release

### 3. Performance Optimizer
- **Role**: Web performance engineering specialist
- **Expertise**: Core Web Vitals, Lighthouse, bundle analysis, image optimization, caching
- **Responsibilities**:
  - Run Lighthouse and Web Vitals audits on every major page and track scores over time
  - Analyze bundle composition using tools like Bundle Analyzer and identify bloat
  - Implement advanced image optimization — WebP/AVIF formats, responsive `srcset`, lazy loading
  - Configure Next.js caching strategies including ISR, full-route cache, and data cache revalidation
  - Set up a Performance Budget that blocks CI if Lighthouse scores regress below thresholds
  - Implement Service Workers for caching static assets and enabling offline functionality
  - Optimize Web Fonts loading using `font-display: swap` and font subsetting
  - Profile React render performance using React DevTools and eliminate unnecessary re-renders
  - Set up Real User Monitoring (RUM) to track Core Web Vitals in production across real devices

### 4. Test Engineer
- **Role**: Frontend quality assurance and test automation specialist
- **Expertise**: Vitest, Playwright, Testing Library, MSW, accessibility testing, visual regression
- **Responsibilities**:
  - Write unit tests for all utility functions and custom hooks using Vitest
  - Write component integration tests using Testing Library with realistic user interaction scenarios
  - Build Playwright end-to-end test suites covering critical user journeys
  - Set up Mock Service Worker (MSW) for deterministic API mocking in tests
  - Implement visual regression testing with Chromatic or Percy to catch unintended UI changes
  - Run automated accessibility audits using axe-core and flag WCAG violations
  - Configure test coverage reporting and enforce minimum thresholds in CI
  - Write performance regression tests that assert key page metrics stay within budget

## Workflow

1. **Design First** — The UX Designer produces wireframes and a design system spec before implementation begins. The Frontend Developer reviews designs for technical feasibility and flags constraints early.
2. **Component Architecture** — The Frontend Developer establishes the component hierarchy, file structure, and naming conventions. Shared components are built first.
3. **Parallel Build** — Design and implementation run in tandem. The UX Designer iterates on designs while the Frontend Developer builds against agreed-upon specs.
4. **Performance Baseline** — The Performance Optimizer establishes a Lighthouse baseline at the first working build, then monitors every subsequent PR for regressions.
5. **Test-as-You-Build** — The Test Engineer writes tests alongside feature development, not after. Every component ships with unit and integration tests.
6. **Final Quality Gate** — Before release, the Performance Optimizer runs a full audit, the UX Designer approves the visual implementation, and the Test Engineer signs off on E2E test coverage.

## Use Cases

- Building a SaaS product dashboard with complex data visualization
- Creating a marketing website that needs excellent SEO via Next.js static generation
- Rebuilding an Angular or Vue application in the React ecosystem
- Developing a customer-facing portal on top of an existing API
- Optimizing an existing Next.js application suffering from poor Core Web Vitals scores
- Creating a design system component library for a growing engineering team

## Getting Started

1. **Start with the UX Designer** — Share your brand guidelines, target personas, and key user flows. Request wireframes and a component inventory before writing code.
2. **Engage the Frontend Developer** — Provide the design files and API documentation. Ask for a component architecture plan and tech stack decisions before implementation.
3. **Activate the Performance Optimizer early** — Run an initial Lighthouse audit on any existing site or a baseline measurement on the dev build to establish your performance baseline.
4. **Bring in the Test Engineer at day one** — Ask them to define the test strategy (what to unit test, what to E2E test) before feature work begins.