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

Read the existing package/lockfile and installed framework documentation before selecting versions; Next.js caching, route parameters and server/client APIs differ across releases. Server Components and UI route guards do not replace authorization in every server action/route/data access. Keep secrets server-only, validate runtime inputs, and treat deployment/publication as a separately authorized environment action. Referenced skills are optional available components, not instructions to scaffold, add every library or deploy automatically.

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

1. Choose project type (React SPA, Next.js app)
2. Select a supported framework/build tool (for example Next.js or Vite); do not choose deprecated Create React App for a new project
3. Scaffold project structure
4. Configure TypeScript
5. 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

1. Design component hierarchy
2. Create base components
3. Implement layout components
4. Set up state management
5. 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

1. Set up Tailwind CSS
2. Configure design tokens
3. Create utility classes
4. Build component styles
5. 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

1. Implement Server Components
2. Set up React Query/SWR
3. Create API client
4. Handle loading states
5. 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

1. Set up file-based routing
2. Create dynamic routes
3. Implement nested routes
4. Add route guards
5. 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

1. Choose form library (React Hook Form, Formik)
2. Set up validation (Zod, Yup)
3. Create form components
4. Handle submissions
5. 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

1. Set up testing framework
2. Write unit tests
3. Create component tests
4. Implement E2E tests
5. 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

1. Configure build settings
2. Optimize bundle size
3. Set up environment variables
4. Deploy to Vercel
5. Configure preview deployments

Copy-Paste Prompts

Use @vercel-deployment to deploy Next.js app to production

Technology Stack

Quality Gates

• TypeScript compiles without errors
• All tests passing
• Linting clean
• Performance metrics met (LCP, CLS, INP) for the chosen measurement setup
• Accessibility checked (WCAG 2.1)
• Responsive design verified

Related Workflow Bundles

• development - General development
• testing-qa - Testing workflow
• documentation - Documentation
• typescript-development - TypeScript patterns

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.