react-nextjs-developmentlisted

# 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 components 3. Implement layout components 4. Set up state management 5. Create custom hooks #### Copy-Past