---
name: react-atlas
description: Comprehensive React ecosystem orchestrator. Covers React patterns, state management, performance, Next.js, React Native, and modern React development. Use when building React applications.
---

## PRIMACY ZONE — Identity and Purpose

**What this atlas contains**

React-atlas is your specialized guide for React ecosystem development. It orchestrates skills covering React patterns, state management, performance optimization, Next.js, React Native, and modern React best practices.

**Use this atlas when**

- Building React applications or components
- Optimizing React performance
- Implementing state management
- Working with Next.js
- Building React Native mobile apps
- Modernizing legacy React code
- Implementing React Flow diagrams

**Do not use this atlas when**

- General frontend design without React (use frontend-atlas)
- Backend development (use backend-atlas)
- Non-React frameworks (Vue, Angular, Svelte)

---

## MIDDLE ZONE — Available Skills and Resources

### Core React Patterns

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **react-patterns** | Modern React patterns, hooks, composition | Structuring React code, solving common problems |
| **react-best-practices** | React coding standards, conventions | Code reviews, establishing standards |

### Performance Optimization

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **react-component-performance** | Performance optimization, profiling, memoization | Fixing slow renders, optimizing components |

### State Management

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **react-state-management** | State management strategies (Context, Zustand, Redux) | Choosing and implementing state solutions |

### Next.js Development

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **react-nextjs-development** | Next.js patterns, SSR, SSG, App Router | Building Next.js applications |

### React Native

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **react-native-architecture** | React Native app architecture, navigation | Building mobile apps (iOS/Android) with React Native |

**Note:** React Native is for mobile apps with JavaScript/React. For native desktop apps or creative tools with Rust, see makepad-atlas.

### React Flow

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **react-flow-architect** | React Flow architecture, node-based UIs | Building flow diagrams, node editors |
| **react-flow-node-ts** | React Flow with TypeScript | Type-safe React Flow implementations |

### UI Patterns

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **react-ui-patterns** | Common UI patterns in React | Implementing modals, dropdowns, forms, etc. |

### Modernization

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **react-modernization** | Upgrading legacy React code | Migrating class components, updating patterns |

### UI Generation & Animation

| Skill | Purpose | When to Use |
|-------|---------|-------------|
| **magic-ui-generator** | Rapid React component generation | Quickly scaffolding components |
| **magic-animator** | React animations and transitions | Adding animations to React components |
| **spline-3d-integration** | Spline 3D integration in React | Adding 3D scenes to React apps |

---

## Related External Skills

These skills complement react-atlas and should be invoked when needed:

### Frontend Foundation (frontend-atlas)

- **frontend-developer** — General frontend development, React 19+
- **frontend-patterns** — Frontend architecture patterns
- **ui-ux-designer** — UI/UX design principles
- **tailwind-design-system** — Tailwind-based design systems

**When to use:** For general frontend concerns beyond React-specific patterns.

### Styling & Design

- **tailwind-patterns** — Tailwind CSS v4 patterns
- **web-design-guidelines** — Web interface guidelines
- **landing-page-generator** — Landing page generation

**When to use:** For styling and design system implementation.

### Next.js Specific

- **nextjs-turbopack** — Next.js 16+ and Turbopack optimization
- **vercel-deployment** — Vercel deployment workflows
- **vercel-ai-sdk-expert** — Vercel AI SDK integration

**When to use:** For Next.js-specific features and deployment.

### TypeScript

- **typescript-expert** — TypeScript patterns and advanced types
- **javascript-pro** — Modern JavaScript patterns

**When to use:** For TypeScript-specific expertise in React projects.

### Testing

- **e2e-testing** — End-to-end testing with Playwright/Cypress
- **tdd-workflow** — Test-driven development
- **code-reviewer** — Code review and quality

**When to use:** For testing React applications.

### 3D Graphics

- **threejs-atlas** — Three.js integration with React
- **spline-3d-integration** — Spline 3D scenes

**When to use:** For 3D graphics in React applications.

### AI Integration

- **ai-engineer** — LLM integration in React apps
- **vercel-ai-sdk-expert** — Vercel AI SDK patterns

**When to use:** For AI-powered React features.

### Full-Stack

- **full-stack-orchestration-full-stack-feature** — Full-stack feature development
- **backend-atlas** — Backend integration

**When to use:** For full-stack React applications.

### Native Cross-Platform Alternatives

- **makepad-atlas** — Rust-based native desktop/mobile apps, creative tools, VR/AR
- **react-native-architecture** — React Native mobile apps (iOS/Android)

**When to use:** 
- **Makepad** — Native desktop apps, creative tools, graphics-heavy apps, VR/AR with Rust + GPU shaders
- **React Native** — Mobile apps (iOS/Android) with JavaScript/React ecosystem

**Key difference:** Makepad focuses on desktop + creative apps with GPU rendering. React Native focuses on mobile apps with native components.

---

## RECENCY ZONE — Usage Patterns

### Decision Tree

```
What are you building?

├── New React app from scratch
│   ├── Next.js → react-nextjs-development + nextjs-turbopack
│   └── Create React App → react-patterns + react-best-practices
│
├── React component library
│   ├── react-patterns (component architecture)
│   ├── react-ui-patterns (common patterns)
│   └── tailwind-design-system (styling)
│
├── Performance optimization
│   ├── react-component-performance (profiling and optimization)
│   └── react-patterns (memoization patterns)
│
├── State management implementation
│   ├── react-state-management (strategy selection)
│   └── react-patterns (state patterns)
│
├── React Native mobile app
│   ├── react-native-architecture (app structure)
│   ├── react-patterns (React patterns)
│   └── react-ui-patterns (mobile UI patterns)
│
├── Node-based UI (diagrams, flows)
│   ├── react-flow-architect (architecture)
│   └── react-flow-node-ts (TypeScript implementation)
│
├── Legacy React modernization
│   ├── react-modernization (migration strategy)
│   ├── react-patterns (modern patterns)
│   └── react-best-practices (current standards)
│
└── React with 3D graphics
    ├── react-patterns (React integration)
    ├── threejs-atlas (Three.js)
    └── spline-3d-integration (Spline)
```

### Typical Workflows

**Building a new Next.js app:**
1. react-nextjs-development (Next.js setup and patterns)
2. react-patterns (React component patterns)
3. react-state-management (state strategy)
4. tailwind-design-system (styling)
5. react-component-performance (optimization)
6. e2e-testing (testing strategy)

**Optimizing React performance:**
1. react-component-performance (identify bottlenecks)
2. react-patterns (apply memoization patterns)
3. react-state-management (optimize state updates)
4. frontend-developer (general optimization)

**Building a React component library:**
1. react-patterns (component architecture)
2. react-ui-patterns (common patterns)
3. react-best-practices (coding standards)
4. tailwind-design-system (design tokens)
5. typescript-expert (type definitions)

**Modernizing legacy React:**
1. react-modernization (migration strategy)
2. react-patterns (modern patterns)
3. react-best-practices (current standards)
4. react-component-performance (performance review)

---

## React Version Guidance

### React 19+ Features

Use these skills for React 19+ features:
- **react-patterns** — React 19 hooks (useActionState, useOptimistic, use)
- **react-nextjs-development** — Next.js 15+ with React 19
- **frontend-developer** — React 19 Server Components

### React 18 Features

- **react-patterns** — Concurrent features, Suspense, transitions
- **react-component-performance** — Concurrent rendering optimization

### Legacy React (< 18)

- **react-modernization** — Upgrade path to modern React
- **react-patterns** — Migration strategies

---

## Quick Reference

**Most commonly used skills:**
- react-patterns (core React patterns and hooks)
- react-nextjs-development (Next.js applications)
- react-state-management (state management)
- react-component-performance (performance optimization)

**When to invoke external skills:**
- General frontend → frontend-atlas
- Styling → tailwind-patterns, tailwind-design-system
- Next.js specific → nextjs-turbopack, vercel-deployment
- TypeScript → typescript-expert
- Testing → e2e-testing, tdd-workflow
- 3D graphics → threejs-atlas, spline-3d-integration
- AI features → ai-engineer, vercel-ai-sdk-expert
- Backend → backend-atlas

**Common combinations:**
- React + Next.js: react-nextjs-development + react-patterns
- React + TypeScript: react-patterns + typescript-expert
- React + Tailwind: react-patterns + tailwind-design-system
- React + 3D: react-patterns + threejs-atlas
- React + AI: react-patterns + vercel-ai-sdk-expert

**Remember:** React-atlas focuses on React-specific patterns and ecosystem. For general frontend concerns, use frontend-atlas. For backend integration, use backend-atlas.
