sukirman1901/polish

Polish (Polissage UI)

Présentation

Après les tokens, la structure et l'anti-slop, appliquez le micro-artisanat pour que l'interface soit agréable dans le rendu final. Les recettes numériques ici sont des heuristiques, sauf si une norme ou un token de projet les définit.

Quand l'utiliser

• Pour finaliser les constructions /ui (après anti-slop-design)
• /polish / « raffinage de détail » / « l'interface semble bizarre »
• Micro-interactions de survol, pression, entrée/sortie, échange d'icônes

Quand l'ignorer

• Grille structurelle / espacement / hiérarchie → design-foundations
• Comparaison des directions de rendu / test de tous les états → prototype
• Langage des coins arrondis / élévation → design-surfaces
• Rôles typographiques, habillage, troncature → design-typography
• Conformité (contraste, noms, clavier) → accessibility
• Systèmes de mouvement / familles nommées → motion
• Contenu uniquement / « texte IA » / libellés d'état vide → content-design
• « Raffinage de code » / implémentation générée → anti-slop-code
• Modifications uniquement back-end sans changement d'interface rendue

OBLIGATOIRE

Règle	Détail
Preuve rendue	Juger l'habillage, l'alignement, la pression et les coins arrondis à partir de l'interface rendue, pas seulement du code source
Tokens d'abord	Utiliser --radius, les tokens d'espacement et de type ; ne pas inventer de valeurs uniques quand un token existe
Classer les recettes	Étiqueter 0.96, le décalage en ms et les nombres similaires comme heuristiques
Correctif valide le moins coûteux	Supprimer la décoration → CSS natif → réutiliser les tokens du projet → puis ajouter une abstraction
Artisanat mobile	CTA principal pleine largeur <768 px ; safe-area sur les éléments sticky ; actions accessibles au pouce
Pas de transition: all	Nommer les propriétés ; éviter la transition nue de Tailwind
Preuve de géométrie des contrôles	Rendre la matrice complète des contrôles, y compris les états en attente/chargement et LTR/RTL applicables, avant d'accepter l'alignement optique

Artisanat (points de départ)

Problème	Point de départ	Classe	Transfert
Coins arrondis imbriqués	Extérieur ≈ intérieur + retrait lorsque les courbes partagent un centre	Heuristique	design-surfaces
Icône dans un contrôle	Ajustement optique par rapport au centre géométrique	Recommandation	—
Profondeur de section	Langage de bordure/élévation du projet	Valeur par défaut du projet	design-surfaces
Survol/basculement	Transitions CSS interruptibles	Recommandation	motion si chorégraphie
Pression	scale(0.96) si un retour de pression est souhaité	Heuristique	—
Nombres dynamiques	tabular-nums	Recommandation	design-typography
Titres courts	text-wrap: balance	Recommandation	design-typography
Zone de contact	44×44 tactile / ≥40 desktop dense	Recommandation	accessibility pour WCAG 2.5.8 (24px)

Exceptions : pilules / cercles, barres d'outils denses (désactiver l'échelle de pression), mouvement réduit, langage de marque non concentrique, images qui n'ont pas besoin de contours.

Géométrie des contrôles

• Matrice des variantes optiques rendues : texte uniquement, icône en tête, icône en queue, icône uniquement, et en attente/chargement.

Le centrage géométrique (inline-flex / items-center / justify-center) est nécessaire mais ne constitue pas une preuve. Il n'existe pas de décalage universel en pixels : comparez d'abord la matrice rendue, puis appliquez la plus petite compensation dans l'emplacement fixe de l'icône ou du glyphe.

Jugez si le groupe de contenu icône-étiquette combiné et sa masse visuelle perçue sont équilibrés et centrés dans toutes les variantes et tous les états. Évaluez séparément la relation entre la ligne de base / hauteur de capitale de l'étiquette et l'icône ; l'étiquette elle-même n'a pas besoin d'occuper le centre du contrôle dans une variante icône+texte. Vérifiez ensemble le poids visuel de l'icône, l'écart de token, le remplissage symétrique du token, le focus, la zone de contact, l'état désactivé et l'état en attente/chargement, sans décalage involontaire du groupe de contenu ou de la largeur du contrôle. Incluez à la fois LTR et RTL lorsque le produit les prend en charge.

La géométrie stable en attente est la valeur par défaut. Pour une exception explicite de morphisme mesuré (references/component-patterns.md), inspectez les deux points d'arrivée et la lecture cible, confirmez que les actions voisines restent stables et signalez l'exception avec des preuves. Un morphisme délibéré n'excuse pas les décalages accidentels de spinner ou l'absence de noms accessibles.

Flux de travail

1. Périmètre — nommer la surface ; ignorer le travail structurel ou sur le système de tokens.
2. Parcourir — rendu 1x/2x, clair/sombre, survol/pression/focus, largeur mobile.
3. Matrice des contrôles — comparer texte uniquement, icône en tête/queue, icône uniquement, en attente/chargement, et LTR/RTL applicable à la taille rendue.
4. Corriger — modification valide la moins coûteuse ; mapper les valeurs aux tokens ; maintenir la compensation optique à l'intérieur de l'emplacement de l'icône.
5. Rapporter — tableaux Avant/Après groupés par principe ; marquer les états non inspectés comme Non vérifié.

Limites

• Peut décider : ajustements optiques, transitions nommées, tabular-nums, aides à l'habillage du texte, retour de pression lorsque le projet n'en a pas.
• Ne doit pas : traiter 0.96, le rebond 0 ou les coins arrondis concentriques comme une loi universelle ; polir sur une disposition cassée ; remplacer les polices de la marque.

Liste de vérification

• Coins arrondis imbriqués vérifiés optiquement (ou transmis à design-surfaces)
• Icônes centrées optiquement là où elles semblaient décalées
• Matrice complète des contrôles rendus vérifiée : texte uniquement, icône en tête/queue, icône uniquement, en attente/chargement, et LTR/RTL le cas échéant
• Groupe icône-étiquette / masse visuelle perçue centré ; relation ligne de base / hauteur de capitale de l'étiquette, poids visuel de l'icône, écart et remplissage de token vérifiés
• Le focus, la zone de contact, l'état désactivé et le chargement préservent la géométrie sans décalage de l'étiquette ou de la largeur
• Pas de transition: all ; survol/pression interruptible
• Les nombres dynamiques utilisent tabular-nums là où ils trembleraient
• Titres text-balance ; texte court text-pretty là où c'est utile
• Zones de contact conformes aux directives 44/40 sans chevauchement
• Artisanat mobile : CTA principal pleine largeur <768, safe-area, zone du pouce
• Heuristiques étiquetées ; états non testés marqués Non vérifié

Approfondissement

Exemples complets : references/polish.md. Liés : design-surfaces, design-foundations, design-typography, motion, accessibility, references/evidence-policy.md.