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

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.