Impeccable, le skill que j'installe sur tous mes projets

Je ne l'ai pas écrit. C'est Impeccable, un skill open source de Paul Bakaus (licence Apache 2.0), et c'est franchement le meilleur que j'utilise. On le prend souvent pour un outil de design. Il fait du design, oui, mais il sait surtout critiquer et auditer une interface, avec des notes et des priorités. Il marche avec Claude Code, Cursor, Codex, Gemini CLI, Copilot et une quinzaine d'autres outils.

La critique : un vrai regard de designer

/impeccable critique fait relire votre page par deux agents qui ne se parlent pas. Le premier fait une revue de design à l'œil. Le second lance le détecteur et inspecte la page dans un vrai navigateur. Ensuite, il croise les deux, pour que le jugement « à l'œil » ne soit pas influencé par les résultats automatiques.

Le rapport contient :

• une note sur les 10 heuristiques de Nielsen, les règles classiques d'ergonomie (visibilité de l'état, prévention des erreurs, cohérence...), chacune sur 4, donc un total sur 40. Il prévient lui-même que la plupart des vraies interfaces font entre 20 et 32 ;
• les 3 à 5 problèmes prioritaires, classés de P0 (bloquant) à P3 ;
• 2 ou 3 « personas » qui essaient de faire l'action principale de la page, avec ce qui casse pour chacun ;
• la charge mentale, les points forts, et des questions pour savoir quoi améliorer en premier.

Chaque critique est sauvegardée. La suivante montre si la note monte ou descend, et /impeccable polish sait reprendre la liste des problèmes pour les corriger.

L'audit : la partie technique

/impeccable audit ne touche à rien. Il vérifie le code et donne une note sur 20, répartie sur 5 domaines :

• l'accessibilité : contrastes, navigation au clavier, ARIA, textes alternatifs, formulaires ;
• la performance : animations coûteuses, images non optimisées, dépendances inutiles ;
• les thèmes : couleurs codées en dur, mode sombre cassé ;
• le responsive : mobile, tablette, grands écrans ;
• l'intégrité : les fausses fonctions, les faux contenus, les raccourcis d'implémentation.

Chaque problème a une gravité et la commande à lancer pour le corriger. Il existe aussi une version pour les apps iOS et Android.

Le design et les retouches

Pour construire, /impeccable shape planifie une interface avant d'écrire le code. Pour retoucher, il y a une commande par besoin :

Et /impeccable live est bluffant : il ouvre votre site en local avec une surcouche, vous cliquez sur un élément, il propose des variantes qu'il remplace en direct, et celle que vous acceptez est écrite dans votre code. Ça marche avec Next, Vite, Astro, SvelteKit, Nuxt et le HTML simple.

Le contexte du projet

Première commande à lancer dans un projet : /impeccable init. Il lit votre code, vous pose seulement ce qu'il ne peut pas deviner (pour qui, pour quoi faire) et écrit un fichier PRODUCT.md. Puis /impeccable document décrit votre style actuel dans un DESIGN.md : couleurs, polices, espacements. Toutes les autres commandes relisent ces deux fichiers, donc elles restent fidèles à votre identité au lieu de tout refaire à leur goût.

Le détecteur

Il repère automatiquement les défauts typiques des sites générés : polices par défaut, contrastes trop faibles, emoji à la place d'icônes, texte trop petit... Trois façons de s'en servir :

• dans le terminal, sur un dossier ou une page en ligne : npx impeccable detect src/ ou npx impeccable detect https://monsite.com (il y a aussi un mode pour GitHub Actions) ;
• avec le « hook », qui vérifie chaque fichier d'interface que l'IA vient de modifier, avant qu'elle annonce que c'est fini ;
• avec l'extension Chrome, qui affiche les défauts sur n'importe quel site, le vôtre ou celui des autres.

L'installer

À la racine de votre projet :

npx impeccable install

L'installeur repère vos outils, vous demande si vous l'installez pour ce projet ou partout, et propose le hook. Acceptez-le : c'est là qu'il attrape le plus de défauts. Relancez ensuite Claude Code. Il existe aussi en plugin Claude Code : /plugin marketplace add pbakaus/impeccable, puis installez-le depuis /plugin. Pour le mettre à jour : npx impeccable update.

Mon petit ajout : amz-antislop

Par-dessus Impeccable, j'ai un mini skill avec mes propres règles « anti-slop », plus strictes sur les points que les détecteurs « est-ce fait par une IA ? » repèrent le plus : une icône seulement quand elle sert à une action, un seul système d'arrondis, une police choisie et hébergée sur le site, aucune fausse fonction ni faux chiffre, et une liste de mots creux à bannir (« seamless », « all-in-one »...).

Au début, j'avais copié tout Impeccable pour ajouter mes règles. Mauvaise idée : ma copie ne recevait plus les mises à jour. Maintenant c'est un petit ajout séparé, et Impeccable reste à jour.

Résultat sur mon portfolio : un détecteur en ligne le notait à 35 % « fait IA ». Après le passage, 12 %. Et les 12 % restants viennent juste du fait que le site tourne sur Next.js.

Article suivant : les erreurs que je faisais en codant avec l'IA, et le skill qui vérifie la sécurité avant chaque mise en ligne.