react-nextjs-development

name	react-nextjs-development
description	React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
type	skill
created	2026-02-27T00:00:00.000Z
domain	software-development
category	frontend
risk	safe
source	personal
tags	["skill","software-development","frontend","react","nextjs"]

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-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