Skills UX et accessibilité : le comparatif

Un agent livre un formulaire d’inscription avec un bouton « Soumettre », un bouton désactivé sans qu’on sache pourquoi, un message qui dit « Une erreur est survenue » et un texte indicatif trop pâle pour passer le test de contraste. Pour chacun de ces défauts, il existe un skill qui l’aurait repéré, mais chaque fois d’un auteur différent. Pour la plupart des projets, j’installerais ux, de molveau/skills. Il réunit dans un seul guide les skills d’écriture et d’accessibilité de Jakub Krehel, les commandes clarify, harden et onboard de l’Impeccable de Paul Bakaus et le fixing-accessibility de Julien Thibeaut, et il tranche par écrit là où ils ne s’entendent pas. Si vous avez besoin de mesures Lighthouse ou d’une vérification en direct selon les règles de Vercel, mieux vaut installer l’un des originaux présentés plus bas.

Les outils en lice

Skill	Auteur	Licence	Sa force	Ses limites
better-writing et better-accessibility	Jakub Krehel	MIT	Les textes d’interface et l’accessibilité côté code, avec des modèles	Rien sur la robustesse de la mise en page : textes longs, débordements, hors ligne
Impeccable (clarify, harden, onboard)	Paul Bakaus	Apache-2.0	Réécrire un texte flou, prévoir les cas limites, concevoir la première utilisation	Peu de profondeur sur les lecteurs d’écran et ARIA
fixing-accessibility	Julien Thibeaut (ibelick)	MIT	Une passe ciblée qui audite et corrige le HTML selon les WCAG	Rien sur les textes ni les états
web-design-guidelines	Vercel	MIT	Une revue au format fichier:ligne selon les Web Interface Guidelines de Vercel	Inutilisable hors ligne : il télécharge les règles à chaque revue
web-quality-skills	Addy Osmani	MIT	Des audits chiffrés avec Lighthouse et Chrome DevTools	Rien sur les textes, l’accueil ni la formulation des erreurs
ux	Molveau Studio	MIT	Les textes, les états, la robustesse et l’accessibilité en une seule passe, conflits réglés	Aucune mesure en direct ; aucun script intégré

Chacun, sans parti pris

better-writing et better-accessibility, de Jakub Krehel

Le skill d’écriture de Jakub commence par le bon bout : il fait l’inventaire des chaînes de texte et des fichiers de traduction avant de changer un seul mot, et quand une marque a choisi son ton, c’est ce ton qu’il garde. Son skill d’accessibilité couvre le focus, le clavier, les formulaires, les lecteurs d’écran et ARIA, avec des modèles de référence. Si c’est son jugement à lui que vous voulez, installez son dépôt.

clarify, harden et onboard, de l’Impeccable de Paul Bakaus

Trois commandes d’Impeccable qui s’occupent des mots et des cas difficiles. clarify réécrit les libellés, les messages d’erreur et les consignes, harden s’occupe de la gestion des erreurs, des textes longs, de l’internationalisation et des débordements, et onboard conçoit la première utilisation et les états vides. En installant Impeccable, vous obtenez ces trois commandes avec le reste de son vocabulaire et ses scripts.

fixing-accessibility, de Julien Thibeaut

Un skill court, qui va droit au but : auditer le HTML, corriger les libellés ARIA, la navigation au clavier, le focus, le contraste et les erreurs de formulaire, sans ajouter d’ARIA là où un élément natif fait déjà le travail. Son dépôt ui-skills contient aussi baseline-ui, fixing-motion-performance et fixing-metadata, que je n’intègre pas. Installez-le pour passer rapidement un seul composant au crible de l’accessibilité.

web-design-guidelines, de Vercel

Le skill de Vercel relit vos fichiers selon ses Web Interface Guidelines et signale chaque problème au format fichier:ligne. Il va chercher la dernière version des règles dans leur dépôt à chaque revue : il reste donc à jour, mais il a besoin d’un accès réseau. Il couvre beaucoup de terrain (focus, formulaires, animation, tactile, internationalisation, hydratation) dans une seule liste, ce qui en fait un bon deuxième relecteur à côté de n’importe lequel des autres.

web-quality-skills, d’Addy Osmani

La collection d’Addy mise d’abord sur la mesure. Son skill d’accessibilité suit les WCAG 2.2 et, quand l’agent a accès à Chrome DevTools, il lance un audit Lighthouse en direct et lit l’arbre d’accessibilité de la page affichée avant de toucher au code. Si vous voulez des preuves tirées de la page réelle plutôt qu’une lecture du code source, installez-le à côté d’ux.

Ce que le skill fusionné ajoute

• L’aiguillage. Une seule installation. Le SKILL.md envoie les textes vers better-writing de Jakub, les consignes floues vers clarify, les débordements et l’internationalisation vers harden, la première utilisation vers onboard, et les corrections WCAG vers fixing-accessibility.
• Des copies figées, jamais retouchées, conservées sous references/vendor/ à un commit précis. Chaque semaine, une GitHub Action vérifie les dépôts d’origine et ouvre un ticket quand une source change ; une personne révise chaque mise à jour.
• Un guide qui règle les désaccords. Contraste du texte indicatif : pour Jakub, il en est exempté, Impeccable exige 4,5:1, et le guide retient 4,5:1 parce que le critère WCAG 1.4.3 ne prévoit pas d’exception. Taille des cibles : viser 44 px au tactile et 40 px dans une interface dense, et signaler tout ce qui fait moins de 24 px comme un échec au critère WCAG 2.5.8. États vides : un titre, une phrase et une action, avec une image seulement si c’est un vrai aperçu.
• Des règles qui s’appliquent en tout temps, sans qu’on ait à les demander : des boutons qui disent ce qu’ils font, des erreurs affichées à côté du champ qui gardent ce que la personne a tapé, des états vide, chargement, erreur et hors ligne pensés d’avance, un focus toujours visible, et aucune information transmise par la couleur seule.
• Des voisins qui ont des scripts. ux n’a aucun script intégré. Sa passe complète se termine par un parcours au clavier seulement et un parcours avec un lecteur d’écran, et tout ce qui n’a pas été vérifié est déclaré comme tel. Le détecteur d’anti-slop et le vérificateur de motion s’occupent, à côté, des signes qu’on peut repérer mécaniquement.

Installer

Le skill seul, avec la CLI skills :

npx skills add molveau/skills -s ux

Le lot Design :

npx skills add molveau/skills -s anti-slop -s ui -s ux -s motion -s design-grill -s design-inspiration-index

Dans Claude Code, les onze skills dans un seul plugin :

/plugin marketplace add molveau/skills
/plugin install molveau-skills@molveau

Tous les skills et tous les lots sont sur la page des skills, et le code source est sur github.com/molveau/skills. À lire aussi : les skills anti-slop, les skills d’interface, les skills d’animation.

Liste de vérification

• Chaque bouton dit ce qui va se passer.
• Chaque message d’erreur s’affiche à côté du champ, dit quoi faire et garde ce qui a été saisi.
• Les états vide, chargement, erreur, succès et hors ligne ont chacun leur texte et une prochaine étape.
• Tout le parcours se fait au clavier seulement, avec un focus visible à chaque étape.
• Les cibles tactiles font 44 px, et rien de moins de 24 px n’est mis en ligne.
• Les noms longs et la langue la plus verbeuse ne brisent pas la mise en page.
• S’il vous faut un audit Lighthouse chiffré, il a été lancé sur la page affichée.