Summary React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
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 scaffoldingsenior-fullstack - Full-stack guidancenextjs-app-router-patterns - Next.js 14+ patternstypescript-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 developmentreact-patterns - React patternsreact-state-management - State managementreact-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 designtailwind-patterns - Tailwind CSStailwind-design-system - Design systemcore-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 Componentsreact-state-management - React Queryapi-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 Routernextjs-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 developmenttypescript-advanced-types - Type validationreact-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/Vitestplaywright-skill - E2E testinge2e-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 deploymentvercel-deploy-claimable - Vercel deploymentweb-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
Related Workflow Bundles
development - General developmenttesting-qa - Testing workflowdocumentation - Documentationtypescript-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.
