Qualité de l'interface — deux skills complémentairesUI quality — two complementary skills
Le scaffolder produit des pages correctes ; deux skills les rendent bonnes. /ui-design applique le jugement (sens et mise en page) ; /ui-components applique la conformité mécanique (tokens du design system). Ordre recommandé : scaffold-component → /ui-design → /ui-components.
The scaffolder produces correct pages; two skills make them good. /ui-design applies judgment (meaning and layout); /ui-components applies mechanical compliance (design-system tokens). Recommended order: scaffold-component → /ui-design → /ui-components.
/ui-design — le jugement que le scaffolder ne peut pas déduire/ui-design — the judgment the scaffolder cannot infer
À utiliser quand une page générée « marche mais se lit mal ». Le skill décide ce qui n'est écrit nulle part : Use it when a generated page "works but reads wrong". The skill decides what is written nowhere:
- quelle FK représente l'utilisateur connecté (le raccourci « Moi » en un clic) ;which FK is the signed-in user (the one-click "Me" shortcut);
- comment regrouper les champs en sections ;how to group fields into sections;
- quelle date mérite un calendrier inline plutôt qu'un popover compact ;which date deserves an inline calendar vs a compact popover;
- la disposition en colonnes et l'ordre des champs.the column layout and field order.
Il applique ensuite sa décision sans casser la régénérabilité : soit en re-scaffoldant la page avec des directives explicites (la page reste régénérable — le jugement est persisté dans le pagespec), soit, pour une mise en page qu'aucune directive n'exprime, en éditant la page et en la marquant @customised.
It then applies the decision without breaking regenerability: either by re-scaffolding the page with explicit directives (the page stays regenerable — the judgment is persisted in the pagespec), or, for a layout no directive can express, by editing the page and marking it @customised.
/ui-components — la conformité au design system/ui-components — design-system compliance
Vérifie une page (ou toute l'app) et corrige automatiquement : tokens du thème au lieu de couleurs en dur, classes utilitaires du design system (.btn .btn-primary, .badge-) au lieu de ré-assemblages inline, anatomie de page du projet. Aucune décision de design — uniquement du mécanique, déterministe et sans risque.
Checks a page (or the whole app) and auto-fixes: theme tokens instead of hardcoded colors, design-system helper classes (.btn .btn-primary, .badge-) instead of inline re-assembly, the project's own page anatomy. No design decisions — purely mechanical, deterministic, risk-free.
Le seam @customisedThe @customised seam
Un fichier marqué // @customised est la propriété du développeur : les scaffolders ne l'écrasent jamais, et l'audit audit-dev-customised surveille qu'il ne dérive pas du contrat (routes, permissions, données). C'est LA porte de sortie officielle quand le généré ne suffit pas — jamais l'édition sauvage d'un fichier @generated-by.
A file marked // @customised belongs to the developer: scaffolders never overwrite it, and the audit-dev-customised audit watches that it does not drift from the contract (routes, permissions, data). It is THE official exit when generated output is not enough — never wild edits to an @generated-by file.
Dans quel cas ?Which situation, which command?
| Je suis dans ce cas…I am in this situation… | …alors je fais…then I do |
|---|---|
| Le formulaire est un mur de 20 champs sans structureThe form is a wall of 20 unstructured fields | /ui-design — regroupe en sections, persiste dans le pagespec/ui-design — groups into sections, persisted in the pagespec |
| Le bouton « Moi » manque sur un champ collaborateurThe "Me" button is missing on an employee field | /ui-design |
| Des couleurs en dur / classes inline dans une pageHardcoded colors / inline classes in a page | /ui-components |
| Un dashboard n'utilise pas la palette du thèmeA dashboard ignores the theme palette | /ui-components |
| Aucune directive n'exprime la mise en page voulueNo directive can express the desired layout | /ui-design édite et marque @customised/ui-design edits and marks @customised |