web-design-guidelines : une revue d’interface selon Vercel
Un bouton sans aria-label, un focus invisible ou une animation qui ignore prefers-reduced-motion passent facilement entre les mailles d’une revue. Avant chaque passage, ce skill télécharge la version à jour des Web Interface Guidelines depuis le dépôt de Vercel, lit les fichiers indiqués et rend ses constats au format file:line.
Télécharge les Web Interface Guidelines en vigueur depuis GitHub avant chaque revue, la liste se met donc à jour sans réinstaller
Contrôle l’accessibilité : aria-label, HTML sémantique, gestion du clavier et états de focus visibles avec focus-visible
Examine formulaires et images : autocomplete, validation et messages d’erreur, dimensions, chargement différé et texte alternatif
Couvre animation, typographie et thèmes : prefers-reduced-motion, transformations côté compositeur, tabular-nums, color-scheme, theme-color
Rend chaque constat sous la forme file:line et, sans fichiers précisés, demande lesquels examiner
Quand s’en servir
Avant une sortie, il faut vérifier l’accessibilité et la navigation au clavier d’un nouveau formulaire
Les revues de design tournent au débat de goût et l’équipe a besoin d’un référentiel commun
Vous voulez vérifier que l’état de l’interface est dans l’URL et que chaque écran s’ouvre par un lien direct
Demandez à l’agent
Vérifie l’accessibilité de components/Checkout avec web-design-guidelines
Audite le formulaire d’inscription : autocomplete, messages d’erreur, focus
Compare mon site aux bonnes pratiques UX et liste les constats en file:line
Questions
Comment installer web-design-guidelines ?
Lancez npx skills add vercel-labs/agent-skills@web-design-guidelines ; l’installateur demande ensuite l’agent et la portée.
D’où viennent les règles ?
Du fichier command.md du dépôt vercel-labs/web-interface-guidelines, récupéré à nouveau avant chaque revue.
Quelle différence avec React Best Practices ?
React Best Practices traite la vitesse de React et Next.js ; ce skill examine l’interface : accessibilité, formulaires, focus, animation, typographie, i18n.
