make-interfaces-feel-better

name: make-interfaces-feel-better description: Principes de design engineering pour rendre les interfaces polies. À utiliser lors de la construction de composants UI, de la revue de code frontend, de l'implémentation d'animations, d'états hover, d'ombres, de bordures, de typographie, de micro-interactions, d'animations d'entrée/sortie, ou de tout travail de détail visuel. Se déclenche sur le polish UI, les détails de design, "make it feel better", "feels off", les animations échelonnées, le border radius, l'alignement optique, le font smoothing, les numéros tabulaires, les contours d'image, les box shadows.

Core Principles

1. Border Radius Concentrique

Rayon externe = rayon interne + padding. Les rayons mal appariés sur des éléments imbriqués sont la raison la plus courante pour laquelle les interfaces semblent décalées.

2. Alignement Optique plutôt que Géométrique

Quand le centrage géométrique semble décalé, alignez optiquement. Les boutons avec icônes, les triangles de lecture et les icônes asymétriques nécessitent tous un ajustement manuel.

3. Ombres plutôt que Bordures

Superposez plusieurs valeurs box-shadow transparentes pour une profondeur naturelle. Les ombres s'adaptent à n'importe quel arrière-plan ; les bordures solides non.

4. Animations Interruptibles

Utilisez les transitions CSS pour les changements d'état interactifs — elles peuvent être interrompues au cours de l'animation. Réservez les keyframes pour les séquences en étapes qui s'exécutent une seule fois.

5. Animations d'Entrée Divisées et Échelonnées

Ne pas animer un seul conteneur. Divisez le contenu en blocs sémantiques et échelonnez chacun avec un délai d'environ 100 ms.

6. Animations de Sortie Subtiles

Utilisez un petit translateY fixe au lieu d'une hauteur complète. Les sorties doivent être plus douces que les entrées.

7. Animations d'Icônes Contextuelles

Animez les icônes avec opacity, scale et blur au lieu de basculer la visibilité. Utilisez exactement ces valeurs : scale de 0.25 à 1, opacity de 0 à 1, blur de 4px à 0px. Si le projet a motion ou framer-motion dans package.json, utilisez transition: { type: "spring", duration: 0.3, bounce: 0 } — bounce doit toujours être 0. Si aucune bibliothèque de mouvement n'est installée, conservez les deux icônes dans le DOM (une positionnée en absolu) et faites un fondu croisé avec des transitions CSS en utilisant cubic-bezier(0.2, 0, 0, 1) — cela donne des animations d'entrée et de sortie sans aucune dépendance.

8. Font Smoothing

Appliquez -webkit-font-smoothing: antialiased au layout racine sur macOS pour un texte plus net.

9. Numéros Tabulaires

Utilisez font-variant-numeric: tabular-nums pour tout nombre mis à jour dynamiquement pour éviter les décalages de layout.

10. Retours à la Ligne de Texte

Utilisez text-wrap: balance sur les titres. Utilisez text-wrap: pretty pour le corps du texte pour éviter les orphelins.

11. Contours d'Image

Ajoutez un subtil contour de 1px avec une faible opacité aux images pour une profondeur cohérente.

12. Scale au Clic

Un subtil scale(0.96) au clic donne un retour tactile aux boutons. Utilisez toujours 0.96. N'utilisez jamais une valeur inférieure à 0.95 — tout ce qui est en dessous semble exagéré. Ajoutez une prop static pour la désactiver quand le mouvement serait distrayant.

13. 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 ne casse pas les animations d'entrée intentionnelles.

14. Ne Jamais Utiliser transition: all

Spécifiez toujours les propriétés exactes : transition-property: scale, opacity. Le transition-transform de Tailwind couvre transform, translate, scale, rotate.

15. Utiliser will-change Avec Parcimonie

Uniquement pour transform, opacity, filter — propriétés que le GPU peut composer. N'utilisez jamais will-change: all. Ajoutez-le uniquement si vous remarquez un tremblement à la première image.

16. Zone de Clic Minimale

Les éléments interactifs ont besoin d'une zone de clic d'au moins 40×40px. Étendez avec un pseudo-élément si l'élément visible est plus petit. Ne laissez jamais les zones de clic de deux éléments se chevaucher.

Erreurs Courantes

Checklist de Revue

• [ ] Les éléments arrondis imbriqués utilisent le border radius concentrique
• [ ] Les icônes sont centrées optiquement, pas seulement géométriquement
• [ ] Les ombres utilisées à la place des bordures le cas échéant
• [ ] Les animations d'entrée sont divisées et échelonnées
• [ ] Les animations de sortie sont subtiles
• [ ] Les nombres dynamiques utilisent tabular-nums
• [ ] Le font smoothing est appliqué
• [ ] Les titres utilisent text-wrap: balance
• [ ] Les images ont des contours subtils
• [ ] Les boutons utilisent scale au clic le cas échéant
• [ ] AnimatePresence utilise initial={false} pour les éléments en état par défaut
• [ ] Pas de transition: all — uniquement les propriétés spécifiques
• [ ] will-change uniquement sur transform/opacity/filter, jamais all
• [ ] Les éléments interactifs ont au moins 40×40px de zone de clic

Fichiers de Référence

• typography.md — Retours à la ligne de texte, font smoothing, numéros tabulaires
• surfaces.md — Border radius, alignement optique, ombres, contours d'image
• animations.md — Animations interruptibles, transitions d'entrée/sortie, animations d'icônes, scale au clic
• performance.md — Spécificité des transitions, utilisation de will-change