Polissage d'Interface
Utilisez cette compétence lorsque l'utilisateur souhaite qu'une interface existante paraisse plus aboutie, ou lors de l'implémentation d'un composant où les petits détails visuels comptent. Améliorez la clarté, la cohérence et le feedback sans changer l'identité visuelle, l'architecture de l'information ou le modèle d'interaction du produit, sauf demande explicite.
Établir le langage visuel local
Avant d'éditer, identifiez le framework, l'approche de style, la bibliothèque de composants, les tokens de design et les conventions des composants voisins. Suivez le système existant et réutilisez les composants et valeurs partagés. Préférez une correction à la source partagée plutôt que plusieurs correctifs locaux. N'ajoutez pas de dépendance ou de système de style pour un détail de polissage.
La cohérence visuelle est une preuve, mais le goût personnel n'est pas un défaut. Préservez les conventions délibérées du projet, comme les surfaces plates ou les animations restreintes, lorsqu'elles sont appliquées de manière cohérente.
Choisir le bon mode
Implémentation. Apportez uniquement les modifications qui résolvent un problème observé ou qui complètent un traitement explicitement demandé. Maintenez un comportement accessible et une implémentation idiomatique pour le projet.
Revue. Restez en lecture seule sauf si l'implémentation est également demandée. Indiquez le périmètre inspecté, évaluez les états pertinents et ne rapportez que les conclusions étayées par l'interface rendue ou des preuves dans le code source. Ne présentez pas un comportement visuel non observé comme un fait.
Pour l'un ou l'autre mode, consultez references/polish-checklist.md pour le guide de décision, la couverture des états et le format de rapport. Pour l'implémentation, consultez references/implementation-recipes.md uniquement pour la stack réelle du projet : CSS, Tailwind, React Motion, GSAP ou Three.js. Pour le travail sur les couleurs, le focus, les animations, les contrôles ou la taille des cibles, consultez references/wcag-accessibility.md ; exécutez scripts/check_contrast.py lorsque les couleurs de premier plan et d'arrière-plan peuvent être résolues en valeurs hexadécimales.
Appliquer des améliorations à forte valeur ajoutée
- Texte : Choisissez le retour à la ligne en fonction de la longueur du contenu et de la fenêtre d'affichage ; stabilisez les valeurs numériques en direct lorsque leur largeur changeante perturbe le contenu environnant.
- Surfaces : Traitez le rayon imbriqué, la profondeur, les bords d'image et le placement des icônes comme des relations visuelles. Corrigez-les lorsqu'ils semblent incorrects dans leur contexte rendu.
- Feedback : Rendez les états de repos, survol, focus, pression, sélection, chargement et désactivé facilement distinguables. Ne faites pas de l'animation le seul signe qu'un changement s'est produit.
- Animation : Utilisez des transitions réversibles pour les changements d'état initiés par l'utilisateur. Réservez les animations par étapes aux moments peu fréquents où elles expliquent la hiérarchie ou la direction. Respectez
prefers-reduced-motion. - Contextes de saisie : Ne laissez pas les appareils tactiles hériter d'un traitement de survol collant. Maintenez un comportement de focus visible, une utilisation du clavier et des tailles de cibles pratiques tout en polissant les contrôles.
Évitez les modifications décoratives sans bénéfice utilisateur visible. N'utilisez pas de transitions larges, d'indices de performance permanents ou d'animations qui rendent les actions courantes plus lentes ou plus difficiles à interpréter.