Polissage UI
Le polissage émerge d'une accumulation de petits détails qui s'additionnent. Ce skill sert de référence pour savoir lesquels valent la peine et quelles valeurs leur attribuer.
Lors de la révision, ralentissez l'interface. Ce qui semble décalé à 10% de la vitesse est ce qui est subtilement incorrect à pleine vitesse.
Respectez la bibliothèque de composants, les tokens et la densité du projet, et suivez son langage de mouvement, sauf si une règle ci-dessous prescrit une interaction exacte.
Chaque durée, courbe, échelle et flou ci-dessous est une valeur spécifique, pas une plage approximative. cubic-bezier(0.2, 0, 0, 1) n'est pas cubic-bezier(0.4, 0, 0.2, 1), et 0.96 n'est pas 0.95. Utilisez ce qui est écrit.
Le retour à la ligne du texte, le rendu des polices, les nombres tabulaires et l'espacement du texte appartiennent à better-typography. Les zones de clic, le focus, le support clavier, ARIA et le mouvement réduit appartiennent à better-accessibility. Le regroupement, l'espacement des sections, les points de rupture et le RTL spatial appartiennent à better-layout.
Rayons de bordure concentriques
Rayon extérieur = rayon intérieur + remplissage. Des rayons non correspondants sur des éléments imbriqués est la chose la plus courante qui rend une interface décalée. Les recettes pour les rayons, les ombres et les contours se trouvent dans surfaces.md.
Alignement optique plutôt que géométrique
Lorsque le centrage géométrique semble faux, alignez optiquement. Les boutons avec des icônes, les triangles de lecture et les icônes asymétriques nécessitent tous un ajustement manuel.
Ombres pour l'élévation, bordures pour la structure
Là où une bordure existe uniquement pour créer de la profondeur, préférez des valeurs box-shadow transparentes superposées. Gardez les bordures qui communiquent la structure ou l'état : séparateurs, diviseurs et états sélectionnés ou focus.
Animations interruptibles
Utilisez des transitions CSS pour les changements d'état interactifs, car elles peuvent être interrompues au milieu de l'animation. Réservez les keyframes pour les séquences scénarisées qui s'exécutent une seule fois.
Fractionner et décaler les animations d'entrée
Pour une entrée scénarisée peu fréquente où la séquence communique une hiérarchie, divisez le contenu en blocs sémantiques et décalez-les d'environ 100 ms chacun. Animer un seul conteneur offre moins de résultats pour le même coût. Laissez les interactions à haute fréquence non décalées. Voir enter-exit.md.
Animations de sortie subtiles
Utilisez un petit translateY fixe plutôt qu'une hauteur complète. Les sorties doivent être plus douces que les entrées. Utilisez ease-out dans les deux directions.
Animations d'icônes contextuelles
Animez les icônes avec opacity, scale et blur plutôt qu'en basculant la visibilité. Utilisez exactement ces valeurs : échelle de 0.25 à 1, opacité de 0 à 1, flou de 4px à 0px.
Avec une bibliothèque de motion (motion ou framer-motion dans package.json), utilisez le chemin d'import de cette bibliothèque, ou les imports voisins lorsque les deux existent. Utilisez transition: { type: "spring", duration: 0.3, bounce: 0 }. Le rebond est toujours 0.
Sans bibliothèque, gardez les deux icônes dans le DOM, l'une étant positionnée de manière absolue, et réalisez un fondu croisé avec cubic-bezier(0.2, 0, 0, 1). Cela donne une entrée et une sortie sans dépendance. Les deux recettes se trouvent dans icon-transitions.md.
Contours d'image
Donnez aux images un contour de 1px à faible opacité pour une profondeur cohérente. Noir pur en mode clair (oklch(0 0 0 / 0.1)), blanc pur en mode sombre (oklch(1 0 0 / 0.1)). Jamais un noir presque pur comme ardoise ou zinc, et jamais un neutre teinté. Un contour teinté capte la surface en dessous et donne l'impression d'une saleté sur le bord de l'image.
Échelle au clic
Un scale(0.96) au clic donne un retour tactile au bouton. Toujours 0.96 ; en dessous de 0.95 semble exagéré. Ajoutez une propriété static pour le désactiver là où le mouvement distrait. Voir les recettes pour CSS, Tailwind et Motion.
Ignorer l'animation au chargement de la page
Utilisez initial={false} sur AnimatePresence pour éviter les animations d'entrée au premier rendu. Vérifiez que cela laisse les entrées de page intentionnelles intactes.
Supprimer les transitions lors du changement de thème
Un basculement de thème change la couleur, l'arrière-plan, la bordure et l'ombre sur presque tous les éléments à la fois. Toutes les transitions sur ces propriétés se déclenchent simultanément et le basculement devient flou au lieu d'être net. Injectez *,*::before,*::after{transition:none !important}, forcez un reflow, puis supprimez-le à l'image suivante. Voir la recette.
Transition uniquement sur ce qui change
Nommez toujours les propriétés exactes : transition-property: scale, opacity. transition-transform de Tailwind couvre transform, translate, scale, rotate.
Utilisation modérée de will-change
Seulement pour transform, opacity et filter, que le GPU peut composer. Jamais will-change: all. Ajoutez-le lorsque vous constatez un bégaiement dès la première image, pas avant. Voir performance.md.
Correspondre l'épaisseur du trait de l'icône au poids du texte
Une icône à côté d'un texte porte le poids optique du texte : trait de 1.5px à côté d'un texte normal (400), 2px à côté d'un texte semi-gras (600). Un poids de trait par ensemble d'icônes et une bibliothèque d'icônes par surface. Le dimensionnement et le retournement RTL se trouvent dans icons.md.
Un seul SVG, recoloré par état
Les icônes utilisent currentColor et prennent les états de survol, sélectionné et désactivé depuis la couleur et l'opacité CSS, jamais depuis des actifs séparés. Le contour est la variante par défaut ; le remplissage marque l'état actif.
Retenue dans le mouvement
Donnez un retour instantané aux interactions à haute fréquence, ou une transition de 150ms ou moins sur l'opacité et la couleur. Une animation personnalisée y facture son coût d'attention à chaque déclenchement.
Chaque changement d'état animé a également besoin d'un indice statique : couleur, icône ou étiquette. Le mouvement n'est jamais le seul canal de retour.
Avant de terminer
| Erreur | Correctif |
|---|---|
| Les icônes semblent décentrées | Ajustez optiquement avec du padding, ou corrigez le SVG |
| Entrée ou sortie scénarisée saccadée | Décalez les entrées peu fréquentes ; gardez les sorties subtiles |
| Le basculement de thème traverse toute la page en fondu | Désactivez les transitions pour l'échange, forcez un reflow, restaurez à l'image suivante |
transition: all sur les éléments | Spécifiez les propriétés exactes |
| Bégaiement d'animation à la première image | Ajoutez will-change: transform (avec parcimonie) |
| Icône au trait fin à côté d'un texte en gras | Faites correspondre l'épaisseur du trait au poids du texte |
Signalement
Sévérité. HIGH casse une interaction, rend le mouvement inutilisable, ou laisse un changement d'état visible uniquement pendant l'animation. MEDIUM est une incohérence visible dans les surfaces, les icônes ou le mouvement. LOW est un polissage isolé.
Vérification. Sans navigateur : chaque état défini par le composant, c'est-à-dire survol, focus, actif, chargement et vide, ainsi que les durées et courbes de mouvement lues depuis le code. Avec navigateur : parcourez chaque état, et rejouez le mouvement à 10% de la vitesse dans le panneau Animations du navigateur. Signalez chaque vérification que vous n'avez pas pu effectuer comme Non vérifié.
Format. Regroupez les constatations sous le principe qu'elles violent, ordonnées par sévérité, une ligne par cause racine listant chaque emplacement où elle apparaît :
| Sévérité | Emplacement | Avant | Après | Pourquoi |
|---|
Emplacement est chemin/vers/fichier:ligne. Pourquoi nomme le principe et l'impact utilisateur.
Terminez par Bloqué si un HIGH subsiste, Approuvé sinon, laissant le reste dans le tableau comme travail à faire. N'approuvez jamais une couverture que vous n'avez pas inspectée. S'il n'y a rien à signaler, indiquez "Aucune constatation de polissage UI exploitable" et rapportez la vérification.