react-nextjs-development

React/Next.js Development Workflow Overview Specialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS. When to Use This Workflow Use this workflow when: Building new React applications Creating Next.js 14+ projects with App Router Implementing Server Components Setting up TypeScript with React Styling with Tailwind CSS Building full-stack Next.js applications Workflow Phases Phase 1: Project Setup Skills to Invoke app-builder - Application scaffolding senior-fullstack - Full-stack guidance nextjs-app-router-patterns - Next.js 14+ patterns typescript-pro - TypeScript setup Actions Choose project type (React SPA, Next.js app) Select build tool (Vite, Next.js, Create React App) Scaffold project structure Configure TypeScript Set up ESLint and Prettier Copy-Paste Prompts Use @app-builder to scaffold a new Next.js 14 project with App Router Use @nextjs-app-router-patterns to set up Server Components Phase 2: Component Architecture Skills to Invoke frontend-developer - Component development react-patterns - React patterns react-state-management - State management react-ui-patterns - UI patterns Actions Design component hierarchy Create base components Implement layout components Set up state management Create custom hooks Copy-Paste Prompts Use @frontend-developer to create reusable React components Use @react-patterns to implement proper component composition Use @react-state-management to set up Zustand store Phase 3: Styling and Design Skills to Invoke frontend-design - UI design tailwind-patterns - Tailwind CSS tailwind-design-system - Design system core-components - Component library Actions Set up Tailwind CSS Configure design tokens Create utility classes Build component styles Implement responsive design Copy-Paste Prompts Use @tailwind-patterns to style components with Tailwind CSS v4 Use @frontend-design to create a modern dashboard UI Phase 4: Data Fetching Skills to Invoke nextjs-app-router-patterns - Server Components react-state-management - React Query api-patterns - API integration Actions Implement Server Components Set up React Query/SWR Create API client Handle loading states Implement error boundaries Copy-Paste Prompts Use @nextjs-app-router-patterns to implement Server Components data fetching Phase 5: Routing and Navigation Skills to Invoke nextjs-app-router-patterns - App Router nextjs-best-practices - Next.js patterns Actions Set up file-based routing Create dynamic routes Implement nested routes Add route guards Configure redirects Copy-Paste Prompts Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes Phase 6: Forms and Validation Skills to Invoke frontend-developer - Form development typescript-advanced-types - Type validation react-ui-patterns - Form patterns Actions Choose form library (React Hook Form, Formik) Set up validation (Zod, Yup) Create form components Handle submissions Implement error handling Copy-Paste Prompts Use @frontend-developer to create forms with React Hook Form and Zod Phase 7: Testing Skills to Invoke javascript-testing-patterns - Jest/Vitest playwright-skill - E2E testing e2e-testing-patterns - E2E patterns Actions Set up testing framework Write unit tests Create component tests Implement E2E tests Configure CI integration Copy-Paste Prompts Use @javascript-testing-patterns to write Vitest tests Use @playwright-skill to create E2E tests for critical flows Phase 8: Build and Deployment Skills to Invoke vercel-deployment - Vercel deployment vercel-deploy-claimable - Vercel deployment web-performance-optimization - Performance Actions Configure build settings Optimize bundle size Set up environment variables Deploy to Vercel Configure preview deployments Copy-Paste Prompts Use @vercel-deployment to deploy Next.js app to production Technology Stack Category Technology Framework Next.js 14+, React 18+ Language TypeScript 5+ Styling Tailwind CSS v4 State Zustand, React Query Forms React Hook Form, Zod Testing Vitest, Playwright Deployment Vercel Quality Gates TypeScript compiles without errors All tests passing Linting clean Performance metrics met (LCP, CLS, FID) Accessibility checked (WCAG 2.1) Responsive design verified Related Workflow Bundles development - General development testing-qa - Testing workflow documentation - Documentation typescript-development - TypeScript patterns