Stack UI canonique (registry-first) : le detail

La regle courte vit dans la racine CLAUDE.md. Ce fichier garde le detail (residuel Radix, migration en cours), deplace par platform-ops/3048.

La regle courte vit dans la racine CLAUDE.md. Ce fichier garde le detail (residuel Radix, migration en cours), deplace par platform-ops/3048.

Le detail

Toute creation ou modification de composant UI doit suivre les regles ci-dessous : ce tableau, le workflow obligatoire et la liste d'anti-patterns qui le suivent font autorite et se suffisent. (Cette section renvoyait a ~/.claude/rules/registry-first.md, un fichier du HOME d'un poste : injoignable depuis un clone, la CI ou un agent, donc une regle imposee que personne ne pouvait lire.)

Conventions par domaine : voir aussi les CLAUDE.md locaux, charges automatiquement selon le repertoire de travail, src/components/CLAUDE.md (design system), messages/CLAUDE.md (i18n).

Domaine	Source obligatoire	CLI / Import
Primitives + patterns	shadcn/ui — primitives `src/components/ui/` sur Base UI (`@base-ui/react`), residuel Radix dans `ui/shadcn-compat/` (chat runtime) ET, hors de ce repertoire, deux imports encore vivants : `Slot` dans `ui/button`, `Label` + `Slot` dans `ui/form` (migration en cours : ne pas desinstaller `@radix-ui/*` en se fiant au seul nom du repertoire, `Button` casserait). Nommement : `ui/button/button.tsx` (`react-slot`) et `ui/form/form.tsx` (`react-slot`, plus `react-label` en type seul). Il y en avait un TROISIEME, `useControllableState` dans `patterns/ai-elements/chat/reasoning` : il est parti avec le composant, exporte sans qu'aucun ecran ne le rende	`npx shadcn@latest add <name>`
Composants chat IA	AI Elements (Vercel)	`npx ai-elements@latest`
Transcript et lignes du chat	shadcn `marker`, `message-scroller`, `questionnaire` (base) dans `src/components/ui/`, comportement headless de `@shadcn/react`. `Conversation` (`patterns/ai-elements/chat/conversation.tsx`) est le `MessageScroller` : ancrage du message operateur, suivi du bord vivant seulement quand le lecteur y est, reouverture sur `last-anchor`. `askBrief` (`chat/brief.tsx`) est un `Questionnaire`. Toute ligne en ligne d'un tour est un `Marker` (saveur Base UI : `render` et non `asChild`), jamais une ligne refaite a la main (`design-system/3067`). Une grammaire : en cours = `role="status"` + `Spinner` dans `MarkerIcon` + `MarkerContent className="shimmer"` (seuls l'en-tete du tour et le placeholder portent le `role`, une ligne-bouton n'en porte pas) ; fini = son icone, `tone` pour dire comment ca s'est termine ; duree et coupure (« A travaille pendant », compaction) = `variant="separator"` ; appels d'un run d'outils = `variant="border"` ; cliquable = `render` vers le bouton ou le trigger Base UI. `shimmer` est un `@utility` de `src/styles/theme.css` (l'amont le livre dans `shadcn/tailwind.css`, non importe ici), et `TextShimmer` n'en est qu'un habillage. Nos ajouts a l'amont (`tone`, anneau de focus et survol d'une racine interactive) sont declares dans `src/components/patterns/CLAUDE.md`. Gardes : `src/test/chat-inline-rows-use-marker.test.ts`, les deux `inline-rows.test.ts` (rendu reel)	`pnpm ui:add <name>` (registre `base`). Si `ui.shadcn.com` est injoignable, les sources sont `shadcn-ui/ui` `apps/v4/registry/bases/base/ui/`
Animations	Motion v12	`import { motion } from "motion/react"`
Lottie	`@lottiefiles/dotlottie-react` (prevu — PAS encore installe, fallback image statique dans team-carousel)	npm
Icones	`lucide-react` (canonique, seule bibliotheque de glyphes) + `@icons-pack/react-simple-icons` (logos de marques uniquement). `@hugeicons/*` a ete retire : dix primitives `ui/` l'importaient contre le `"iconLibrary": "lucide"` de `components.json`, donc chaque `pnpm ui:add` sur l'une d'elles effacait l'edit (`design-system/0297`)	npm
Toasts	`sonner`	npm (Radix Toast retire)
Forms	`react-hook-form` + `zod` + shadcn `form`	shadcn + npm
Charts	`recharts` via shadcn charts	`npx shadcn@latest add chart`
Dark mode	`next-themes` en `forcedTheme="dark"` — l'app est dark-only, pas de switch user	npm
Styling	Tailwind 4 (`@import "tailwindcss"`)	postcss

Workflow obligatoire :

1. Context7 query-docs sur la library concernee
2. Grep src/components/ pour verifier non-duplication
3. CLI officielle pour installer (jamais copier-coller depuis la doc)
4. Custom uniquement avec justification ecrite + composition de primitives registry

Anti-patterns interdits dans ce repo : framer-motion, react-hot-toast, Modal/Drawer/Tooltip custom, SVG icon inline, chart.js, lottie-react, @tailwind base/components/utilities (v3). Voir la rule pour la liste complete.

Was this page helpful?