Skills pour agents6 min de lecture
Skills d’interface : Impeccable, Krehel, Kowalski
Les skills ouverts de design d’interface pour agents de code : la force de chacun, quand prendre l’original, et le skill ui que j’utilise pour mes clients.
Un bouton qui rétrécit à 0,96 ou à 0,97 quand on appuie dessus, des lignes de 65 ou de 75 caractères, une fenêtre superposée qui s’ouvre en 300 ou en 500 ms : installez trois bons skills d’interface en même temps et votre agent reçoit trois réponses à chacune de ces questions, puis en prend une au hasard. Pour la plupart des projets, j’installerais ui, de molveau/skills. Il réunit les skills de Jakub Krehel, son make-interfaces-feel-better, Impeccable de Paul Bakaus et un guide de goût tiré du travail d’Emil Kowalski, et il tranche ces questions noir sur blanc. Si vous voulez la voix d’un seul auteur, installez plutôt l’original : les sections plus bas vous disent lequel.
Les outils en lice
| Skill | Auteur | Licence | Sa force | Ses limites |
|---|---|---|---|---|
| Impeccable | Paul Bakaus | Apache-2.0 | Une commande pour chaque geste de design, la critique, l’audit et un mode en direct | Une mise en route plus longue : il faut l’installer, l’initialiser et lui fournir des fichiers de contexte |
| skills | Jakub Krehel | MIT | Des valeurs précises pour la mise en page, la typo, la couleur et la revue | Aucune étape pour fixer la direction d’un nouvel écran |
| make-interfaces-feel-better | Jakub Krehel | MIT | Les détails de finition : arrondis, ombres, alignement optique | Rien au-delà de la finition, et c’est voulu |
| skills (emil-design-eng) | Emil Kowalski | MIT | Le goût et les détails invisibles qui font une interface soignée | Peu de profondeur sur la mise en page et la couleur ; il penche vers l’animation |
| frontend-design | Anthropic | Apache-2.0 | Une consigne courte qui pousse vers une direction qui se démarque | Aucune valeur, aucune revue, aucune vérification |
| ui-ux-pro-max | nextlevelbuilder | MIT | Une base de données de styles, de palettes et de paires de polices qu’on peut interroger | Il est lourd et il lui faut Python 3 |
| ui | Molveau Studio | MIT | Un seul guide, de la direction à la revue, où les conflits sont déjà réglés | Pas les scripts ni le mode en direct d’Impeccable ; aucun script intégré |
Chacun, sans parti pris
Impeccable, de Paul Bakaus
Impeccable est le vocabulaire de design le plus complet que je connaisse pour un agent : polish, bolder, quieter, distill, typeset, critique, audit et d’autres, chaque commande chargeant un guide consacré à ce seul geste. init écrit un PRODUCT.md que toutes les commandes suivantes consultent. Sa critique évalue un écran selon des heuristiques d’utilisabilité, et son mode en direct vous laisse sélectionner un élément dans le navigateur pour en faire défiler des variantes. Mon skill ui reprend ses fichiers de référence, mais pas ses scripts : pour le mode en direct ou son détecteur, installez Impeccable lui-même.
Les skills de Jakub Krehel et make-interfaces-feel-better
Quand j’ai besoin de valeurs précises, ce sont les skills de Jakub que je consulte. better-layout, better-typography, better-colors et better-ui disent quoi régler et pourquoi, interface-review passe une branche au peigne fin pour repérer les régressions d’interface, et make-interfaces-feel-better s’occupe des petits détails qui font qu’un écran paraît terminé. Son dépôt compte d’autres skills que ceux que je reprends, comme build-design (à partir d’un fichier Figma ou d’une image), variant, state-machine et break. Installez son dépôt pour ceux-là, ou si vous voulez lire Jakub sans personne d’autre.
Le skill d’ingénierie design d’Emil Kowalski
Dans emil-design-eng, Emil met par écrit sa façon d’aborder la finition, la conception des composants et ces détails qu’on remarque sans savoir les nommer. Si c’est son goût à lui que vous cherchez, installez ses skills. Mon skill ui en contient une synthèse dans mes propres mots, qui cite ses chiffres en le nommant, et la copie intégrale de ses skills se trouve dans mon skill motion.
frontend-design, d’Anthropic
Un seul fichier, qui demande au modèle de se comporter en directeur artistique avec un point de vue affirmé, ancré dans le sujet. Pour une nouvelle interface, c’est un premier coup de pouce qui ne coûte presque rien. Comme il ne donne aucune valeur et ne vérifie rien, il donne de meilleurs résultats aux côtés d’un skill qui le fait.
ui-ux-pro-max, de nextlevelbuilder
Un tout autre genre d’outil : une base de données hors ligne de styles, de palettes, de paires de polices et de règles UX, avec un script de recherche. Si vous voulez lancer une requête comme « une palette pour une marque de santé chaleureuse », c’est lui qu’il faut installer. Il est lourd et demande Python, c’est pourquoi j’y renvoie au lieu de l’intégrer.
Ce que le skill fusionné ajoute
- L’aiguillage. Une seule installation. Le
SKILL.mdindique quel fichier ouvrir pour chaque tâche : pour la typographie,better-typographyde Jakub puistypesetd’Impeccable ; pour revoir une branche,interface-review; pour un écran trop chargé,distilletquieter. L’agent ne lit que ce dont la tâche a besoin. - Des copies figées, jamais retouchées. Chaque fichier repris est conservé tel quel 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. Chaque conflit entre les sources est tranché par écrit. Bouton qui rétrécit au clic : Jakub dit 0,96, Emil 0,97, unslop de 0,97 à 0,98 ; le guide retient 0,96 et accepte un 0,97 déjà en place. Durées : Emil garde la rétroaction sous 300 ms et Impeccable permet des fenêtres superposées de 300 à 500 ms ; le guide retient de 150 à 250 ms, et jusqu’à 300 ms pour les fenêtres superposées, parce qu’une réaction trop longue donne l’impression que l’interface tarde à répondre.
- L’étape de direction. Cinq lignes (produit, caractère, univers, moments, signature), la liste de ce que ce produit est seul à avoir, les réflexes de second niveau à écarter, un test de substitution, puis une pause en attendant votre accord.
- Des vérifications confiées aux voisins.
uin’a aucun script intégré. Avant de déclarer le travail terminé, il lance le détecteur d’anti-slop, puis votre vérification des types, votre linter et vos tests, et il confie l’animation, les textes et l’accessibilité aux skillsmotionetux. - Un recueil de prompts et une règle « la maquette d’abord » pour les équipes qui valident une maquette avant d’écrire le code.
Installer
Le skill seul, avec la CLI skills :
npx skills add molveau/skills -s uiLe lot Design :
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. À lire aussi : les skills anti-slop, les skills UX et accessibilité, les skills d’animation.
Liste de vérification
- Les variables de design du projet et son
DESIGN.mdont priorité sur les valeurs par défaut des skills. - Un seul skill de design fait autorité à la fois, et sa passe se termine avant que la suivante commence.
- La direction en cinq lignes d’un nouvel écran est approuvée avant le code.
- Quand les sources donnent des valeurs différentes, on suit le guide, pas le dernier fichier lu.
- Le détecteur d’
anti-slop, la vérification des types, le linter et les tests passent avant qu’on dise que l’interface est terminée. - S’il vous faut le mode en direct, une recherche dans une base de données ou un seul auteur, installez plutôt l’original.
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.