| name | react-nextjs-development |
| description | React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns. |
| category | granular-workflow-bundle |
| risk | safe |
| source | personal |
| date_added | 2026-02-27 |
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
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.