Que fait unslop-components ?
Les applications générées par l'IA partagent une même silhouette : un titre de page, une rangée de quatre cartes KPI, un tableau, un formulaire avec menus déroulants. C'est correct et oubliable. Les composants doivent être modelés par ce que sont les données, pas par ce que propose la bibliothèque de composants.
Construisez d'abord sur les fondations (unslop-foundation) : tokens de palette, style d'icônes, système d'illustration, langage de mouvement et une feuille de composants approuvée. Les composants utilisent ici ces tokens et ces parties ; ils n'inventent pas de couleurs ni de styles.
La liste d'interdiction (aspect par défaut)
Pensez d'abord en composants : nommez les blocs de construction du produit, construisez-les et révisez-les, puis composez les écrans. Ne livrez pas un écran dont le contenu principal est l'un de ceux-ci, sauf si les données le sont vraiment :
- des lignes ou groupes séparés par des bordures et des filets (séparez par espace et ton)
- un formulaire étiqueté (grille de champs plus Enregistrer) comme moyen d'édition ; utilisez les motifs d'édition dans
unslop-foundation/references/designer-standard.md - une rangée de cartes KPI/statistiques (utilisez une phrase, ou montrez le nombre à l'intérieur de la chose qu'il mesure)
- un tableau avec menus déroulants d'édition dans les cellules (les tableaux servent à comparer plusieurs attributs de plusieurs lignes)
- une grille uniforme de cartes identiques
- un formulaire comme interface principale (les formulaires servent à saisir des données, pas à les visualiser)
- un statut en texte de couleur unie ou en pastilles avec seulement un nom (donnez une forme au statut, voir ci-dessous)
- des camemberts pour la progression, des jauges, des anneaux de donut comme décoration
Processus (par écran)
- Nommez la forme des données. Séquence/parcours, parties d'un tout, comparaison, relation, changement dans le temps, classement, emplacement, hiérarchie, ou un flux de choses nécessitant une attention.
- Choisissez la forme qui correspond à la forme dans
references/patterns.md. Écrivez une ligne : « Cet écran est une carte d'itinéraire car les données sont un flux ordonné par zone. » - Définissez un composant signature par écran : la chose dont un utilisateur se souviendrait. Elle porte la richesse ; tout autour d'elle est texte discret et lignes fines.
- Donnez au statut un langage visuel avec au moins deux canaux (forme/remplissage et couleur, pas la couleur seule), utilisé de manière identique sur chaque écran.
- Affichez, puis éditez. La vue par défaut est lecture prioritaire. L'édition se situe un niveau plus profond (un bloc de détails, un tiroir, une page de détails), pas dans chaque ligne.
- Manipulation directe plutôt que contrôles. Des filtres qui sont aussi la légende. Cliquez sur l'élément au lieu d'un bouton « Voir ». Glissez-déposez seulement si cela remplace un menu déroulant par quelque chose de plus rapide.
- Variez la densité. Un grand moment, un milieu calme, un petit détail de soutien. Pas cinq boîtes égales.
- Vérifiez le barrage ci-dessous.
Barrage
- L'élément principal de l'écran n'est pas un tableau, une grille de cartes, une rangée de statistiques ou un formulaire.
- Une raison d'une ligne lie le composant choisi à la forme des données.
- Le statut utilise forme/remplissage plus couleur et est cohérent sur tous les écrans.
- Lecture prioritaire : aucun écran n'a plus d'une poignée de menus déroulants ou de champs visibles sans un clic.
- Le composant fonctionne toujours à 360 px (s'adapte, s'empile ou défile intentionnellement) et est accessible au clavier avec un focus visible.
- Le mouvement réduit est respecté ; rien n'anime juste pour décorer.
- Vous l'avez regardé : captures d'écran prises avec Playwright MCP (
claude mcp add playwright npx @playwright/mcp@latest) à 360 px et 1280 px. Si vous n'avez pas pu regarder, dites-le ; ne qualifiez pas un écran de créatif ou de terminé à partir du seul code.
Quand les tableaux sont appropriés
Beaucoup de lignes, beaucoup de colonnes comparables, le tri est important (journaux d'audit, listes de prix, exportations). Concevez alors le tableau : nombres tabulaires, colonnes alignées, règles discrètes, survol de ligne, pas de rayures zébrées ni de cellules encadrées, et aucun contrôle dans les cellules.
Fichiers
references/patterns.md- catalogue forme des données vers composant, langage de statut, exemple travaillé (carte d'itinéraire pour les flux de produits)