Skills pour l’interface d’un SaaS : le comparatif

Demandez à un agent de code le premier écran d’un SaaS, et il vous fait souvent une page d’accueil marketing avec une barre latérale : un bandeau de bienvenue, quatre cartes de statistiques identiques, un graphique sans unités et un tableau de cinq lignes parfaites. Rien n’est prévu pour un compte encore vide, une requête qui échoue ou la personne qui travaille au clavier. Plusieurs skills ouverts couvrent une partie de l’interface d’une app. Pour un nouveau produit, je commence par saas, de molveau/skills : une courte méthode qui énumère ce qu’une app exige de plus qu’un site marketing et qui dit dans quel ordre appliquer les skills de design. Elle-même contient peu de règles de design. Si vous voulez une seule référence de design pour l’app et pour les pages marketing, Impeccable va beaucoup plus loin, et si le travail porte surtout sur des tableaux de bord, la référence app-screens de taste-skill est la plus détaillée que j’aie lue.

Les outils en lice

Skill	Auteur	Licence	Sa force	Ses limites
Impeccable	Paul Bakaus	Apache-2.0	Un mode Operate pour les écrans d’app, une entrevue de cadrage avant le code, des passes pour l’accueil et la robustesse	Rien sur la facturation ni les forfaits ; long à mettre en place, puisque c’est un système de design complet avec un lanceur
taste-skill, app-screens	Leonxlnx	MIT	Les tableaux de bord, le cadre de l’app, les tableaux denses, les graphiques, les paramètres et leurs états	Rien sur l’accueil ni sur l’ordre de travail ; son étude ne compte aucun écran mobile et peu d’états
web-design-guidelines	Vercel	MIT, selon le README du dépôt	Un audit au format fichier:ligne du focus, des formulaires, du mouvement réduit, du mode sombre et de l’état dans l’URL, sur du code existant	Aucun plan de ce qu’il faut construire : il relit seulement le code qui existe
marketingskills	Corey Haines	MIT	L’activation, les frictions à l’inscription, les forfaits et les écrans pour passer à un forfait supérieur	Rien sur l’interface elle-même : ni cadre, ni tableaux, ni variables de design, ni clavier
shadcn	shadcn	MIT	Assembler des écrans avec les composants shadcn/ui déjà installés, grâce à la CLI	Rien sur l’UX : les états, l’accueil et la facturation ne sont pas de son ressort
saas	Molveau Studio	MIT	Ce qu’une app exige de plus qu’un site, dans l’ordre, avec une liste pour savoir quand c’est fini	Peu de profondeur et aucun script : il confie chaque étape à d’autres skills

Chacun, sans parti pris

Impeccable, de Paul Bakaus

Impeccable range les surfaces par modes, et son mode Operate est pensé pour les interfaces d’app, les tableaux de bord, l’administration et les paramètres. La règle avec laquelle je suis le plus d’accord : l’univers du produit peut donner la typographie, la palette, la densité et un geste signature, mais jamais la mise en page, la navigation ni les contrôles. La commande shape vous pose des questions et rédige un brief avant le code, onboard vise à mener la personne le plus vite possible à un premier résultat utile, et harden s’occupe des débordements, des erreurs et des autres langues. Installez-le si vous voulez un seul système pour l’app et ses pages marketing, avec une commande pour chaque geste de design. Comme il vient avec un script de lancement, il est plus lourd qu’une simple méthode.

La référence app-screens de taste-skill, de Leonxlnx

Dans taste-skill, le fichier app-screens décrit la démarche pour un écran d’app : un inventaire, la seule question à laquelle l’écran doit répondre, le cadre, les données, les états, puis une vérification. Il couvre cinq types de cadres, les chiffres clés, les graphiques, les tableaux, les formulaires et les paramètres, et il énumère les signes d’un tableau de bord généré par l’IA. Il est franc sur ses sources, une étude de 23 écrans d’ordinateur sans aucun écran mobile et avec une seule page de paramètres, et il présente comme des règles maison tout ce qui va plus loin. Installez l’original si vous travaillez surtout sur des vues de données. Mon skill anti-slop en garde une copie figée et y renvoie pour les tableaux de bord.

web-design-guidelines, de Vercel

Le skill de Vercel va chercher ses règles dans le dépôt des Web Interface Guidelines et signale chaque problème au format fichier:ligne : noms accessibles, états de focus, formulaires, mouvement réduit, color-scheme pour le mode sombre, état conservé dans l’URL, dates et nombres formatés avec Intl. Dans le même dépôt, d’autres skills couvrent la performance React et la composition des composants. Comme il relit du code qui existe déjà, il fait une bonne dernière passe sur n’importe quelle app, mais un mauvais point de départ.

marketingskills, de Corey Haines

Ces skills parlent de croissance plus que d’interface. onboarding part du plus court chemin vers un premier résultat, signup réduit les frictions à l’inscription, pricing et paywalls s’occupent des forfaits et des écrans pour passer au forfait supérieur. Ils sont écrits pour des fondateurs et des gens de marketing à l’aise avec la technique. Servez-vous-en quand vos comptes d’essai ne s’activent pas ou ne passent pas à la caisse, et ajoutez un skill d’interface pour les écrans.

shadcn, de shadcn

Le skill officiel de shadcn/ui lit le components.json de votre projet par la CLI et assemble les écrans avec ce qui est installé : une page de paramètres avec des onglets, des cartes et des champs de formulaire, un tableau de bord avec une barre latérale, des cartes, un graphique et un tableau. Il garde des couleurs sémantiques et vérifie les registres avant d’écrire du code sur mesure. Il lui faut un projet shadcn/ui, et il s’arrête aux composants : les états et les textes restent à votre charge.

Ce que saas ajoute

• Une étape de direction pour les écrans d’app. Cinq lignes avant tout code (produit, caractère, univers, moments, signature), où les moments viennent du produit lui-même : un graphique dessiné avec soin, ou le document ou le billet que le produit traite, jamais une image générée. Les réflexes de second niveau sont nommés et écartés, dont l’écran d’accueil réduit à quatre cartes de statistiques identiques au-dessus d’un histogramme.
• Neuf choses qu’une app exige et qu’un site n’a pas. Le cadre et la navigation, les tableaux denses, quatre états par vue (chargement, vide, erreur, rempli), l’accueil jusqu’au premier résultat utile, les paramètres, la facturation dans l’app, le mode sombre construit sur des variables de design sémantiques, le clavier et le focus, et l’animation seulement pour confirmer une action.
• Un ordre de travail. D’abord le parcours, ensuite la direction et les variables de design, puis le cadre et le tableau réel le plus dense, les états, l’accueil, les paramètres et la facturation, l’animation, et la passe anti-slop en dernier. Chaque étape nomme le skill qui contient les règles : ux pour les textes et la robustesse, ui pour les écrans et la maquette, motion pour les confirmations d’action, anti-slop et son détecteur avant de dire que c’est terminé.
• Une liste pour savoir quand c’est fini. Le tableau le plus dense testé avec 0, 1 et 200 lignes, et avec des lignes très longues ; toute l’app utilisable au clavier ; les deux thèmes au contraste AA, graphiques et badges compris ; le forfait, la consommation, le prochain prélèvement et la résiliation visibles dans l’app ; l’affichage vérifié à 390 px.
• Un format léger, par choix. Un seul fichier, aucun script. Le revers de la médaille : installé seul, son ordre de travail nomme des skills que votre agent n’a pas. Installez-le avec le lot Design.

Installer

Le skill seul, avec la CLI skills :

npx skills add molveau/skills -s saas

Le lot Méthodes (saas, vitrine et workflow) :

npx skills add molveau/skills -s saas -s vitrine -s workflow

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. Les skills vers lesquels il renvoie ont chacun leur comparatif : les skills d’interface, les skills UX et accessibilité, les skills anti-slop et les skills de méthode de travail.

Liste de vérification

• Les trois tâches principales de l’utilisateur et le chemin vers le premier résultat utile sont écrits avant de dessiner un écran.
• La direction tient en cinq lignes, elle est approuvée, et l’écran d’accueil ne se résume pas à quatre cartes de statistiques au-dessus d’un graphique.
• Chaque vue a ses états chargement, vide, erreur et rempli, avec une prochaine étape dans chacun.
• Le tableau le plus dense tient le coup avec 0, 1 et 200 lignes, avec des lignes très longues, avec le tri et au clavier.
• Dans l’app, la facturation affiche le forfait, la consommation, le prochain prélèvement et la façon de résilier.
• Les thèmes clair et sombre passent le contraste AA ; l’animation sert seulement à confirmer une action et respecte le mouvement réduit.