Interface Polish
Une grille concrète, basée sur une liste de contrôle, pour le polissage de l'interface utilisateur : rayon, ombres, zones de clic, timing d'animation.
Testé · Fonctionne
Ce que fait
Une liste de contrôle d'ingénierie de conception pour rendre les interfaces polies — rayon de bordure concentrique, alignement optique, ombres superposées sur les bordures, animations d'entrée divisées/décalées, nombres tabulaires, zones de clic minimales de 40x40px et règles sans décalage de mise en page — avec un format de sortie de tableau markdown avant/après obligatoire. À utiliser lors de la construction d'interfaces utilisateur, de la révision de code frontend ou du travail sur tout détail visuel/d'animation.
Rapport de test
A transformé une revue vague 'ce bouton semble bizarre' en quatre constats mesurables (zone de clic de 32px sous le minimum de 40px, border-radius imbriqués non concordants, transition-all, tabular-nums manquants), chacun mappé à un principe numéroté et inséré dans le tableau avant/après obligatoire de la compétence.
Testé le: 2026-07-14 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/wellwelwel/blue-spec cd blue-spec mkdir -p ~/.claude/skills cp -r .claude/skills/interface ~/.claude/skills/interface
Commandes et exemples de prompts
/interfaceUne grille concrète, basée sur une liste de contrôle, pour le polissage de l'interface utilisateur : rayon, ombres, zones de clic, timing d'animation.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
This button feels off, can you polish the interaction?Review this component's CSS for spacing and animation issues.Add a nice enter animation to this modal component.