Skills pour agents7 min de lecture
Skills anti-slop : unslop, taste-skill, Impeccable
Quatre skills ouverts qui débarrassent une interface de son air fait à l’IA : la force de chacun, quand prendre l’original, et le skill que j’utilise.
Demandez un tableau de bord à un agent de code sans rien préciser d’autre, et c’est presque toujours le même écran qui revient : un dégradé violet, quatre cartes de statistiques identiques, des émojis dans les libellés, de l’Inter sur fond blanc. Plusieurs skills ouverts existent pour empêcher ça. Pour la plupart des projets, j’installerais anti-slop, de molveau/skills. Il combine la méthode unslop de Damir Sokolovsky et le taste-skill de Leonxlnx, y ajoute une étape de direction et un détecteur de 20 signes, et nomme les deux auteurs. Si vous ne voulez suivre qu’une seule méthode, les originaux sont excellents, et chaque section plus bas vous dit quand en choisir un.
Les outils en lice
| Skill | Auteur | Licence | Sa force | Ses limites |
|---|---|---|---|---|
| unslop | Damir Sokolovsky | CC BY 4.0 | Corriger un écran existant, une passe à la fois ; la vidéo qui raconte la correction | Aucun script pour repérer les signes dans le code |
| taste-skill | Leonxlnx | MIT | La direction artistique et de vraies images pour une nouvelle page ou un nouvel écran d’app | Trop long pour un écran qui a seulement besoin d’un ménage ; certains scripts demandent Node 22 et un navigateur |
| Impeccable | Paul Bakaus | Apache-2.0 | Une commande pour chaque geste de design, un détecteur de slop déterministe, un mode en direct | Une installation lourde : il faut l’installer, l’initialiser et lui fournir des fichiers de contexte |
| frontend-design | Anthropic | Apache-2.0 | Une consigne courte qui pousse le modèle vers une direction qui se démarque | Aucun audit, aucune liste de vérification, aucun script |
| anti-slop | Molveau Studio | MIT ; les parties adaptées d’unslop restent sous CC BY 4.0 | Une seule démarche, de l’audit à la direction puis aux neuf passes, avec un détecteur | Pas les scripts ni le mode en direct d’Impeccable ; un dossier plus lourd que chacun des originaux |
Chacun, sans parti pris
unslop, de Damir Sokolovsky
unslop traite un écran fait à l’IA comme un designer traite une maquette qu’il annote en rouge. Il relève chaque signe d’un travail bâclé par l’IA et l’endroit où il se trouve, propose une direction tirée de votre produit (un caractère, un univers, les un ou deux moments qui reçoivent la couleur, un détail signature), attend votre accord, puis corrige l’écran en neuf passes, toujours dans le même ordre : espacement, couleur, icônes, textes, typographie, mise en page, détails, visuels, animation. Il fonctionne aussi à partir d’une URL en ligne, et il peut générer une courte vidéo carrée où l’écran se nettoie sous vos yeux. Damir a lancé la série Unslopping sur X, et on sent dans la méthode qu’il l’a pratiquée souvent.
Installez l’original si vous voulez sa méthode telle qu’il l’entretient, sans aucune couche ajoutée par-dessus. Sa licence CC BY 4.0 vous permet de l’adapter, même à des fins commerciales, tant que vous le créditez et mettez un lien vers son travail.
taste-skill, de Leonxlnx
taste-skill est à son meilleur quand la page n’existe pas encore. Il dresse la liste de ce que ce produit est seul à avoir, pige une direction dans sa propre bibliothèque, rédige tous les textes, construit la page, puis vérifie le résultat dans un vrai navigateur. Sa référence sur les écrans d’app est la plus détaillée que j’aie lue sur les tableaux de bord et les pages de paramètres. Installez l’original si vous faites surtout de nouvelles pages marketing et que vous voulez sa bibliothèque et les mises à jour de l’auteur sans intermédiaire.
Impeccable, de Paul Bakaus
Impeccable donne un vocabulaire à l’agent : polish, bolder, quieter, critique, audit et les autres, chacun avec son propre guide. Il inclut un détecteur de slop qui fonctionne sans modèle ni clé d’API, et un mode en direct qui fait alterner des variantes d’un élément dans votre serveur de développement. Mes skills ui et ux reprennent les fichiers de référence d’Impeccable, mais aucun de ses scripts. Si vous voulez ce détecteur dans votre intégration continue, ou le mode en direct, installez Impeccable lui-même.
frontend-design, d’Anthropic
Le skill d’Anthropic tient en un seul fichier. Il demande au modèle de se mettre dans la peau du directeur artistique d’un studio dont les clients ont refusé tout ce qui ressemble à un gabarit, et de tirer la palette, la typographie et la mise en page du sujet lui-même. C’est un bon premier coup de pouce pour une nouvelle interface, et il ne coûte presque rien à charger. Comme il n’a ni audit ni rien pour vérifier le résultat, il fait bon ménage avec le détecteur de l’un des autres.
Ce que le skill fusionné ajoute
- L’aiguillage. Une seule installation. Le
SKILL.mdcontient un tableau qui dit quoi lire selon la tâche : pour un tableau de bord, l’agent ouvre la référence de taste sur les écrans d’app ; pour des valeurs précises, il ouvre les variables de design d’unslop, plutôt que de tout charger. - Des copies figées, jamais retouchées. unslop et taste-skill sont conservés sous
references/vendor/à un commit précis, et personne ne les modifie à la main. Chaque semaine, une GitHub Action les compare à leur dépôt d’origine et ouvre un ticket dès que l’un des deux change. Une personne lit chaque mise à jour avant qu’elle entre. - Un guide qui règle les désaccords. Les sources se contredisent par endroits. unslop se rabat sur les icônes Lucide, que je considère comme un signe. La méthode de taste-skill pour une page demande une couche d’animation avec une entrée par section, unslop permet une seule entrée, et moi j’interdis les apparitions au défilement. Chaque conflit est tranché par écrit, avec sa raison, pour que l’agent ne choisisse pas au hasard.
- L’étape de direction. Avant toute ligne de code : cinq lignes (produit, caractère, univers, moments, signature), de 8 à 12 éléments qu’aucun concurrent ne partage, une liste de réflexes de second niveau à écarter (la page crème avec un accent terracotta, Fraunces par habitude), un test de substitution avec le nom d’un concurrent, puis une pause en attendant votre accord.
- Les 20 signes et un détecteur.
detect-tells.mjsn’a aucune dépendance et fonctionne avec Node 20. Il repère les signes mécaniques (texte en dégradé, émojis dans les textes, bordure colorée sur un seul côté, boutons qui pâlissent au survol, tirets cadratins, mots à la mode) et il est fourni avec une recette de test à cliquet, pour que le compte ne puisse que baisser. - Une vidéo qui raconte la correction, avec une étape d’accessibilité en direct. Le moteur de rendu est adapté de celui d’unslop. Une étape nommée Accessibility affiche les ratios de contraste WCAG et la taille des cibles qui changent à mesure que l’écran est corrigé, en rouge tant qu’ils ne passent pas. Le crédit à unslop apparaît sur chaque image.
- Un vrai exemple, que vous pouvez vérifier. Claude Opus a nettoyé un tableau de bord fait à l’IA en une seule passe avec ce skill, sans aucune retouche à la main. L’avant, l’après, le fichier qui raconte la correction et la vidéo sont dans le dépôt, sous
examples/.
Installer
Le skill seul, avec la CLI skills (Claude Code, Codex, Cursor et les autres agents qui lisent les SKILL.md) :
npx skills add molveau/skills -s anti-slopLe lot Design (anti-slop, ui, ux, motion, design-grill et l’index d’inspiration) :
npx skills add molveau/skills -s anti-slop -s ui -s ux -s motion -s design-grill -s design-inspiration-indexDans Claude Code, les onze skills dans un seul plugin :
/plugin marketplace add molveau/skills
/plugin install molveau-skills@molveauTous les skills et tous les lots sont sur la page des skills, et le code source est sur github.com/molveau/skills. Les skills voisins ont chacun leur comparatif : les skills d’interface, les skills UX et accessibilité et les skills d’animation.
Liste de vérification
- Vous savez si l’écran existe déjà (l’ordre des passes d’unslop) ou s’il reste à faire (la démarche de taste).
- La direction est écrite en cinq lignes et approuvée avant tout code.
- Le test de substitution échoue : avec le nom d’un concurrent, l’écran ne tient plus.
-
detect-tells.mjspasse sur les fichiers modifiés et son compte n’augmente pas. - Toute affirmation que vous n’avez pas pu vérifier est retirée ou signalée dans le rapport.
- unslop est crédité partout où sa méthode est adaptée.
Stanislas Molveau
Fondateur, Molveau Studio
Je conçois et développe des produits web et mobiles, et j'écris ces guides à partir de démontages d'apps réelles plutôt que de théorie.