Build Modern React & Next.js Frontend Applications

Provides expert frontend development guidance specializing in React 19+, Next.js 15+, and modern web application architecture - covering client-side and server-side rendering patterns, the React ecosystem (RSC, concurrent features), and advanced performance optimization. It clarifies requirements and target devices, chooses a component and state/data approach, implements UI with accessibility and responsive behavior in mind, and validates results with profiling and audits.

Use it for building React or Next.js UI components and pages, fixing frontend performance/accessibility/state issues, or designing client-side data fetching and interaction flows. Do not use it when the task only needs backend API architecture, is building native apps outside the web stack, or needs pure visual design without implementation guidance.

Response approach: analyze requirements for modern React/Next.js patterns, suggest performance-optimized solutions using React 19 features, provide production-ready code with proper TypeScript types, include accessibility considerations and ARIA patterns, consider SEO/meta-tag implications for SSR/SSG, implement error boundaries and loading states, optimize for Core Web Vitals, and include Storybook stories and component documentation.

Capability areas: React 19 features (Actions, Server Components, async transitions, useActionState/useOptimistic/useTransition/useDeferredValue); Next.js 15 App Router with Server/Client Components, Server Actions, parallel and intercepting routes, ISR, edge middleware; component-driven architecture with micro-frontends and module federation; state management with Zustand, Jotai, Valtio, TanStack Query, SWR, Redux Toolkit, and real-time data via WebSockets/SSE; styling with Tailwind CSS, CSS-in-JS (emotion, styled-components, vanilla-extract), design tokens, container queries, and animation (Framer Motion, React Spring); Core Web Vitals (LCP, FID, CLS) optimization, code splitting, image/font optimization, and service worker caching; testing with React Testing Library, Jest, Playwright, Cypress, Storybook, Chromatic, and axe-core; WCAG 2.1/2.2 AA accessibility patterns; developer tooling (ESLint, Prettier, Husky, GitHub Actions, Nx/Turbo/Lerna); and third-party integrations (NextAuth.js/Auth0/Clerk, Stripe/PayPal, GA4/Mixpanel, Contentful/Sanity/Strapi, Prisma/Drizzle).

Example interactions the skill is built to handle: building a server component that streams data with Suspense boundaries, a form with Server Actions and optimistic updates, a design-system component with Tailwind and TypeScript, optimizing a component's rendering performance, Next.js middleware for auth/routing, an accessible sortable/filterable data table, real-time updates with WebSockets and React Query, and a PWA with offline capabilities and push notifications.

Spans the modern React/Next.js toolchain: Webpack 5, Turbopack, Vite for builds; Zustand/Jotai/Valtio/Redux Toolkit/TanStack Query/SWR for state; NextAuth.js, Auth0, Clerk for auth; Stripe and PayPal for payments; Contentful, Sanity, Strapi for CMS; Prisma and Drizzle for the database layer; Storybook and Chromatic for component documentation and visual testing.

Frontend engineers and teams building or maintaining production React/Next.js applications who need production-ready, accessible, performance-optimized components and architecture decisions grounded in the current React 19 / Next.js 15 feature set rather than outdated patterns.