Interface de base

Impose une interface de base réfléchie pour éviter les débordements d'interface générés par IA.

Déclencheurs

/baseline-ui Appliquez ces contraintes à tout travail d'interface dans cette conversation.
/baseline-ui <file> Examinez le fichier par rapport à toutes les contraintes ci-dessous et affichez :
- les violations (citez la ligne/fragment exact)
- pourquoi c'est important (1 phrase courte)
- un correctif concret (suggestion au niveau du code)

DOIT utiliser les défauts Tailwind CSS sauf si des valeurs personnalisées existent déjà ou sont explicitement demandées
DOIT utiliser motion/react (anciennement framer-motion) quand une animation JavaScript est requise
DEVRAIT utiliser tw-animate-css pour les animations d'entrée et les micro-animations dans Tailwind CSS
DOIT utiliser l'utilitaire cn (clsx + tailwind-merge) pour la logique de classes

DOIT utiliser des primitives de composants accessibles pour tout ce qui a un comportement clavier ou de focus (Base UI, React Aria, Radix)
DOIT utiliser en priorité les primitives de composants existants du projet
NE JAMAIS mélanger les systèmes de primitives au sein de la même surface d'interaction
DEVRAIT préférer Base UI pour les nouvelles primitives si compatible avec le stack
DOIT ajouter un aria-label aux boutons avec icône uniquement
NE JAMAIS reconstruire le comportement clavier ou de focus à la main sauf demande explicite

NE JAMAIS ajouter d'animation sauf si elle est explicitement demandée
DOIT animer uniquement les props du compositeur (transform, opacity)
NE JAMAIS animer les propriétés de layout (width, height, top, left, margin, padding)
DEVRAIT éviter d'animer les propriétés de rendu (background, color) sauf pour petites interfaces locales (texte, icônes)
DEVRAIT utiliser ease-out à l'entrée
NE JAMAIS dépasser 200ms pour le feedback d'interaction
DOIT mettre en pause les animations en boucle quand elles sont hors écran
DEVRAIT respecter prefers-reduced-motion
NE JAMAIS introduire de courbes d'easing personnalisées sauf demande explicite
DEVRAIT éviter d'animer les grandes images ou surfaces plein écran

DOIT utiliser text-balance pour les titres et text-pretty pour le corps/paragraphes
DOIT utiliser tabular-nums pour les données
DEVRAIT utiliser truncate ou line-clamp pour les interfaces denses
NE JAMAIS modifier letter-spacing (tracking-*) sauf demande explicite

NE JAMAIS animer grandes surfaces avec blur() ou backdrop-filter
NE JAMAIS appliquer will-change en dehors d'une animation active
NE JAMAIS utiliser useEffect pour ce qui peut être exprimé en logique de rendu

NE JAMAIS utiliser de dégradés sauf demande explicite
NE JAMAIS utiliser de dégradés violets ou multicolores
NE JAMAIS utiliser d'effets de luminosité comme affordances primaires
DEVRAIT utiliser l'échelle d'ombre Tailwind CSS par défaut sauf demande explicite
DOIT donner aux états vides une action suivante unique et claire
DEVRAIT limiter l'usage de la couleur d'accent à une par vue
DEVRAIT utiliser les tokens couleur existants du thème ou Tailwind CSS avant d'en introduire de nouveaux

Le changement a été rendu dans un navigateur/simulateur et une capture d'écran ou un snapshot DOM a été capturé, pas seulement examiné au code
Le layout a été vérifié aux points d'arrêt que le guide baseline-ui appelle (mobile + desktop au minimum) ; une preuve de chacun est jointe
Les valeurs de couleur, typographie et espacement utilisées proviennent des tokens de conception/thème du projet, pas codées en dur de manière ponctuelle
La navigation au clavier et l'ordre de focus ont été testés sur chaque élément interactif introduit
Les variantes reduced-motion / dark-mode (quand supportées) ont été vérifiées, pas supposées hériter
Aucune erreur console ni avertissement d'hydratation émis lors du rendu de vérification