react

React/Next.js Stack Guide

Installation

curl -fsSL https://raw.githubusercontent.com/krovomi/ai-agent-kit/main/install | bash -s -- --stack=react

Agents

Communs (tous les stacks)

Agent	Rôle	Model
@architect	Design, SOLID, Clean Architecture	Sonnet
@reviewer	Code review, sécurité	Sonnet
@docwriter	Documentation API	Haiku

React spécifiques

Agent	Rôle	Model	Tokens
@architect	Architecture React + Atomic Design	Sonnet	~100
@frontend-developer	React/Next.js implementation	Sonnet	~80
@api-integrator	.NET API → TypeScript	Haiku	~60
@component-builder	UI components accessibles	Haiku	~40
@frontend-tester	Tests Vitest/RTL/MSW	Haiku	~50

Chains

Chain	Séquence	Usage
@chain:frontend-feature	api → dev → test → review	Feature avec API
@chain:api-integration	api → test	Intégration API .NET
@chain:component	component → test	Composant UI seul

Architecture (Feature-Sliced Design)

src/
├── app/           # Pages (Next.js App Router, Server Components)
├── widgets/       # Blocs UI composites
├── features/      # Interactions utilisateur
├── entities/      # Modèles métier, API services, hooks
└── shared/        # Code partagé
    ├── api/       # Client API
    ├── ui/        # Composants UI (shadcn)
    ├── lib/       # Utilitaires
    └── hooks/     # Hooks partagés

Dépendances: app → widgets → features → entities → shared

Stack Technique

Catégorie	Technologie
Framework	Next.js 15 (App Router)
Language	TypeScript 5.x (strict)
State serveur	TanStack Query v5
State client	Zustand
Formulaires	React Hook Form + Zod
Styling	Tailwind CSS v4 + shadcn/ui
Tests	Vitest + React Testing Library + MSW
E2E	Playwright

Intégration API .NET

Mapping types

.NET	TypeScript
string	string
int, long, decimal	number
DateTime, Guid	string
T?	T | null
List<T>	T[]
Dictionary<K,V>	Record<K, V>

Service API

export const userService = {
  getAll: () => apiClient.get<User[]>('/api/users'),
  getById: (id: string) => apiClient.get<User>(`/api/users/${id}`),
  create: (data: CreateUserDto) => apiClient.post<User>('/api/users', data),
};

Query Hook

export const userKeys = {
  all: ['users'] as const,
  detail: (id: string) => [...userKeys.all, id] as const,
};

export function useUsersQuery() {
  return useQuery({ queryKey: userKeys.all, queryFn: userService.getAll });
}

Gates

gates:
  - name: types
    command: "pnpm run type-check"
  - name: build
    command: "pnpm run build"
  - name: test
    command: "pnpm test"
  - name: coverage
    command: "pnpm run test:coverage"
    expect: "coverage >= 80"

Compact Mode (~200 tokens)

Voir templates/react/.claude/compact/ pour le mode documentation condensée.

Pour les tâches complexes:

@frontend-developer:full "Design auth flow with JWT refresh"

Exemples

# Feature complète avec API
@chain:frontend-feature "Add user management page with CRUD"

# Intégrer une API .NET existante
@chain:api-integration --api-path="../backend-dotnet"
# Génère: types.ts, service.ts, hooks.ts, handlers.ts (MSW)

# Composant UI seul
@chain:component "DataTable with sorting and pagination"

# Agent individuel
@frontend-developer "Add product list page with filters"

# Agent spécialisé
@component-builder "Create Modal component with variants"

→ Voir templates/react/.claude/ pour les détails