React Expert Skill

Position dans l'Architecture

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

code

┌─────────────────────────────────────────────────────────────────┐
│  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

code

┌─────────────────────────────────────────────────────────────────────────────┐
│                              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

code

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

code

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

code

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)