React Expert Skill

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.

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

2. components/ - Patterns Composants (5 agents)

Patterns et architecture de composants.

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

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

State management React.

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.

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

5. testing/ - Tests React (4 agents)

Testing de composants et hooks.

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

6. styling/ - Styling React (3 agents)

Solutions de styling pour React.

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

7. performance/ - Performance React (3 agents)

Optimisation de performance.

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

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)