Molveau
Tous les guides

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.md indique quel fichier ouvrir pour chaque tâche : pour la typographie, better-typography de Jakub puis typeset d’Impeccable ; pour revoir une branche, interface-review ; pour un écran trop chargé, distill et quieter. 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. ui n’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 skills motion et ux.
  • 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 ui

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 UX et accessibilité, les skills d’animation.

Liste de vérification

  • Les variables de design du projet et son DESIGN.md ont 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.

LinkedInVoir mes projets