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

1. Choose project type (React SPA, Next.js app)
2. Select build tool (Vite, Next.js, Create React App)
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 compon