React Expert

---
name: react-expert
description: Expert React - Hooks, composants, state management, data fetching, testing, styling et patterns modernes
version: 1.0.0
status: active
---

# React Expert Skill

## Position dans l'Architecture

Skill de **NIVEAU 3 : COMMENT** (implémentation) spécialisé dans l'écosystème React.

```
┌─────────────────────────────────────────────────────────────────┐
│  NIVEAU 1 : POURQUOI (direction-technique)                      │
│  → Choisir React ? Architecture ? Patterns globaux ?            │
├─────────────────────────────────────────────────────────────────┤
│  NIVEAU 2 : QUOI (web-dev-process)                              │
│  → Process de dev, workflow tests, conventions équipe           │
├─────────────────────────────────────────────────────────────────┤
│  NIVEAU 3 : COMMENT (react-expert) ← CE SKILL                   │
│  → Code React, hooks, composants, tests, styling                │
└─────────────────────────────────────────────────────────────────┘
```

## Philosophie

Ce skill fournit l'**implémentation concrète** pour React :

- ✅ Code React (hooks, composants, patterns)
- ✅ State management (Context, Zustand, Redux)
- ✅ Data fetching (React Query, SWR)
- ✅ Testing (RTL, mocks)
- ✅ Styling (Tailwind, CSS-in-JS)
- ✅ Performance (memo, code splitting)

Il ne fournit PAS :
- ❌ Décisions "React vs Vue vs Angular" → `direction-technique`
- ❌ Process de code review → `web-dev-process`
- ❌ Conventions d'équipe → `web-dev-process`
- ❌ Next.js spécifique → `nextjs-expert` (skill séparé à créer)

## Architecture

```
┌─────────────────────────────────────────────────────────────────────────────┐
│                              react-expert                                    │
│                           (28 agents)                                        │
│                                                                              │
│  ┌─────────────────────────────────────────────────────────────────────┐   │
│  │                          7 DOMAINES                                  │   │
│  │                                                                       │   │
│  │  hooks/           components/        state/          data/           │   │
│  │   (5)                (5)              (4)             (4)            │   │
│  │                                                                       │   │
│  │  testing/         styling/         performance/                       │   │
│  │   (4)               (3)              (3)                             │   │
│  └─────────────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────────────┘
```

## Domaines et Agents

### 1. hooks/ - React Hooks (5 agents)

Implémentation et patterns de hooks.

| Agent | Responsabilité | Produit |
|-------|----------------|---------|
| `orchestrator` | Coordination hooks | Routage |
| `state-hooks` | useState, useReducer | Code gestion état local |
| `effect-hooks` | useEffect, useLayoutEffect | Code effets, cleanup |
| `ref-hooks` | useRef, useImperativeHandle | Code refs DOM/valeurs |
| `custom-hooks` | Création de hooks personnalisés | Hooks réutilisables |

**Mots-clés** : useState, useEffect, useRef, useReducer, useCallback, useMemo, hook, custom hook

### 2. components/ - Patterns Composants (5 agents)

Patterns et architecture de composants.

| Agent | Responsabilité | Produit |
|-------|----------------|---------|
| `orchestrator` | Coordination composants | Routage |
| `functional` | Composants fonctionnels, props, children | Code composants |
| `composition` | Compound, Render Props, HOC | Patterns composition |
| `forms` | Formulaires, validation, controlled/uncontrolled | Code formulaires |
| `error-boundaries` | Gestion d'erreurs, Suspense boundaries | Code error handling |

**Mots-clés** : composant, component, props, children, compound, render props, HOC, form, formulaire

### 3. state/ - Gestion d'État (4 agents)

State management React.

| Agent | Responsabilité | Produit |
|-------|----------------|---------|
| `orchestrator` | Coordination state | Routage |
| `context` | Context API, providers, consumers | Code Context |
| `zustand` | Stores Zustand, slices, middleware | Code Zustand |
| `redux-toolkit` | Redux Toolkit, slices, thunks | Code RTK |

**Mots-clés** : state, context, provider, zustand, redux, store, slice, global state

### 4. data/ - Data Fetching (4 agents)

Récupération et synchronisation de données.

| Agent | Responsabilité | Produit |
|-------|----------------|---------|
| `orchestrator` | Coordination data | Routage |
| `react-query` | TanStack Query, queries, mutations | Code React Query |
| `swr` | SWR, revalidation, cache | Code SWR |
| `suspense` | Suspense, lazy, streaming | Code Suspense |

**Mots-clés** : fetch, query, mutation, react-query, tanstack, swr, suspense, cache, data

### 5. testing/ - Tests React (4 agents)

Testing de composants et hooks.

| Agent | Responsabilité | Produit |
|-------|----------------|---------|
| `orchestrator` | Coordination testing | Routage |
| `rtl` | React Testing Library, queries, events | Code tests composants |
| `hooks-testing` | renderHook, act, async hooks | Code tests hooks |
| `mocking` | Mocks, providers, MSW | Code mocking |

**Mots-clés** : test, testing, rtl, testing library, render, screen, userEvent, mock, msw

### 6. styling/ - Styling React (3 agents)

Solutions de styling pour React.

| Agent | Responsabilité | Produit |
|-------|----------------|---------|
| `orchestrator` | Coordination styling | Routage |
| `tailwind-react` | Tailwind + React, cn, cva | Code Tailwind |
| `css-in-js` | styled-components, Emotion | Code CSS-in-JS |

**Mots-clés** : style, css, tailwind, styled-components, emotion, className, cn

### 7. performance/ - Performance React (3 agents)

Optimisation de performance.

| Agent | Responsabilité | Produit |
|-------|----------------|---------|
| `orchestrator` | Coordination perf | Routage |
| `memoization` | memo, useMemo, useCallback | Code memo |
| `code-splitting` | lazy, Suspense, dynamic imports | Code splitting |

**Mots-clés** : performance, memo, useMemo, useCallback, lazy, code splitting, optimization

## Règles de Routage

### Par mots-clés

```
SI question contient [useState, useReducer, état local]
   → hooks/state-hooks.md

SI question contient [useEffect, cleanup, effet de bord]
   → hooks/effect-hooks.md

SI question contient [useRef, ref, DOM element, focus]
   → hooks/ref-hooks.md

SI question contient [custom hook, créer un hook, extraire]
   → hooks/custom-hooks.md

SI question contient [composant, props, children, functional]
   → components/functional.md

SI question contient [compound, render props, HOC, composition]
   → components/composition.md

SI question contient [formulaire, form, input, validation, controlled]
   → components/forms.md

SI question contient [Context, Provider, Consumer, useContext]
   → state/context.md

SI question contient [Zustand, store, create, slice]
   → state/zustand.md

SI question contient [Redux, RTK, createSlice, thunk]
   → state/redux-toolkit.md

SI question contient [React Query, useQuery, useMutation, TanStack]
   → data/react-query.md

SI question contient [SWR, useSWR, revalidate]
   → data/swr.md

SI question contient [test, Testing Library, render, screen]
   → testing/rtl.md

SI question contient [renderHook, test hook, act]
   → testing/hooks-testing.md

SI question contient [memo, useMemo, useCallback, re-render]
   → performance/memoization.md

SI question contient [lazy, code splitting, dynamic import]
   → performance/code-splitting.md
```

## Composition avec Autres Skills

### Flux typique : Nouvelle feature

```
1. direction-technique/architecture/patterns-design
   → Décide : "Utiliser le pattern Container/Presenter"

2. web-dev-process/development/coding-standards
   → Définit : "Conventions fichiers, tests obligatoires"

3. react-expert/components/functional
   → Implémente : Code React avec le pattern
```

### Flux typique : Tests

```
1. direction-technique/qualite/metriques-qualite
   → Décide : "Coverage 80%, tests critiques"

2. web-dev-process/testing/unit-tests
   → Définit : "Pyramide tests, quoi tester"

3. react-expert/testing/rtl
   → Implémente : Code tests composants

4. react-expert/testing/hooks-testing
   → Implémente : Code tests hooks
```

## Points d'Escalade

### Vers direction-technique
- Architecture globale (monorepo, micro-frontend)
- Choix de state management (Context vs Zustand vs Redux)
- Trade-offs majeurs

### Vers web-dev-process
- Workflow de PR et code review
- Organisation des tests
- Standards de documentation

### Vers frontend-developer
- Questions CSS/HTML générales
- Questions JavaScript/TypeScript générales
- Outils de build (Vite, Webpack)

### Vers nextjs-expert (skill séparé)
- App Router, Server Components
- Server Actions, API Routes
- Middleware, ISR, SSR

## Skills Associés

| Skill | Niveau | Relation |
|-------|--------|----------|
| `direction-technique` | POURQUOI | Décisions architecture React |
| `web-dev-process` | QUOI | Process de développement |
| `frontend-developer` | COMMENT | JS/TS/CSS génériques (délègue ici pour React) |
| `design-system-foundations` | COMMENT | Tokens et composants design |
| `nextjs-expert` | COMMENT | Implémentation Next.js (à créer) |

## Changelog

### v1.0.0
- Création initiale avec 7 domaines et 28 agents
- Focus sur React 18+ (hooks, Suspense, concurrent features)
- Architecture POURQUOI/QUOI/COMMENT
- Next.js extrait vers skill séparé (à créer)