afrexai-react-production

# React Production Engineering

Complete methodology for building production-grade React applications. Covers architecture decisions, component design, state management, performance optimization, testing, and deployment — not just API reference, but engineering methodology with decision frameworks, templates, and scoring systems.

## Phase 1: Architecture Assessment

### Quick Health Check (score /16)
- [ ] Component tree depth < 6 levels (+2)
- [ ] No prop drilling past 2 levels (+2)
- [ ] Bundle size < 200KB gzipped (+2)
- [ ] LCP < 2.5s on 4G (+2)
- [ ] Test coverage > 70% on business logic (+2)
- [ ] Zero `any` types in production code (+2)
- [ ] No direct DOM manipulation (+2)
- [ ] Consistent error boundaries (+2)

### Architecture Brief

```yaml
project:
  name: ""
  type: "" # spa | ssr | hybrid | static
  framework: "" # next | remix | vite-spa | astro
  scale: "" # small (<20 routes) | medium (20-100) | large (100+)
  team_size: "" # solo | small (2-5) | medium (6-15) | large (15+)
current_state:
  react_version: "" # 18 | 19
  typescript: true
  router: "" # react-router | next-app | tanstack-router
  state_management: "" # useState | zustand | jotai | redux | tanstack-query
  styling: "" # tailwind | css-modules | styled-components | vanilla-extract
  testing: "" # vitest | jest | playwright | cypress
  ci_cd: "" # github-actions | gitlab-ci | vercel
pain_points: []
goals: []
```

### Framework Selection Decision Matrix

| Factor | Vite SPA | Next.js | Remix | Astro |
|--------|----------|---------|-------|-------|
| SEO needed | ❌ | ✅ Best | ✅ Good | ✅ Best |
| Dashboard/app | ✅ Best | ✅ Good | ✅ Good | ❌ |
| Content-heavy | ❌ | ✅ Good | ✅ Good | ✅ Best |
| Team familiarity | ✅ Simple | ⚠️ Learning curve | ⚠️ Web standards | ⚠️ Islands |
| Deployment | Anywhere | Vercel optimal | Anywhere | Anywhere |
| Bundle size | You control | Framework overhead | Smaller | Minimal JS |

**Decision rules:**
1. Dashboard/internal tool with no SEO → Vite...

# React Production Engineering ⚛️

Complete methodology for building production-grade React applications — architecture decisions, component design, state management, performance, testing, and deployment.

**Not another API reference.** This is engineering methodology with decision frameworks, code patterns, quality scoring, and production checklists.

## Install

```bash
clawhub install afrexai-react-production
```

## What's Inside

- **Architecture assessment** — framework selection matrix, project structure, naming conventions
- **Component design** — composition patterns, compound components, 10 component rules
- **State management** — decision tree (TanStack Query vs Zustand vs Context vs useState)
- **TypeScript integration** — strict config, discriminated unions, branded types, Zod validation
- **Performance** — budget targets, optimization priority stack, React Compiler guidance
- **Hooks engineering** — custom hook patterns, essential hooks library
- **Error handling** — 3-level error boundary architecture
- **Forms** — React Hook Form + Zod patterns
- **Testing** — pyramid strategy (Vitest + Testing Library + Playwright)
- **Accessibility** — 10-point a11y checklist
- **Production checklist** — deployment readiness scoring (0-100)

## Quick Start

Tell your agent: "Set up a new React project following the React Production Engineering skill"

## ⚡ Level Up

This skill gives you the methodology. For industry-specific patterns:

👉 **[AfrexAI Context Packs](https://afrexai-cto.github.io/context-packs/)** — $47 each, 10 verticals

### 🔗 More Free Skills by AfrexAI
- [`afrexai-nextjs-production`](https://clawhub.com/skills/afrexai-nextjs-production) — Next.js production engineering
- [`afrexai-vibe-coding`](https://clawhub.com/skills/afrexai-vibe-coding) — AI-assisted development
- [`afrexai-test-automation-engineering`](https://clawhub.com/skills/afrexai-test-automation-engineering) — Testing strategy
- [`afrexai-ui-design-system`](https://clawhub.com/skill...