SanyamPunia/verso

Que fait verso ?

Transformez une partie d'une interface existante en une page d'un carnet de travail de la Haute Renaissance : encre ferrogallique, délavée en bruns, sur papier chiffon vergé.

Les références sont cinq des dessins de Léonard de Vinci : les notes anatomiques de Windsor (RCIN 919070 verso), une page du Codex Leicester, l'Homme de Vitruve, une page du Codex Arundel et une page du carnet du Codex Forster. Lisez references/style.md avant la première conversion d'une session. Ce fichier explique chaque fait physique du style et la décision d'interface qui en découle. Les décisions ci-dessous n'ont de sens qu'avec lui.

Fichiers de cette compétence

• references/style.md – la recherche : papier, encre, main, composition, palette avec contraste mesuré, et une table de correspondance entre les parties d'interface courantes et les parties d’un manuscrit.
• assets/manuscript.css – le thème en CSS pur, délimité sous .ms-scope, avec quatre préréglages de papier définis par data-ms-paper. La source de vérité pour chaque valeur.
• assets/defs.svg – quatre filtres SVG (plume, ligne libre, bord irrégulier, lavis). Montez une fois par document.
• assets/sketches.svg – croquis à la plume à placer dans une page : une construction géométrique, un mécanisme, une ligne de renvoi, une tache d'encre, des rayons lumineux avec points lettrés, un solide hachuré.
• examples/ – deux conversions abouties, chacune avec un avant et un après : before.html et after.html (une carte de paramètres, windsor), et release-before.html et release-after.html (notes de version, leicester). examples/index.html les montre côte à côte et permet de changer le préréglage. Considérez les fichiers après comme la norme qu'une conversion terminée doit atteindre.

Étape 1. Corriger le périmètre

L'utilisateur nomme une partie : un fichier, un composant, une route, un sélecteur ou une description. Convertissez cette partie et rien d'autre.

• Si aucune cible n'est donnée, demandez-en une. Ne restylez pas toute une application sur une simple hypothèse.
• Trouvez l'élément racine de la partie. Tout ce que le thème fait repose sur une classe ms-scope sur cette racine, afin que le reste de l'application reste intact.
• Si la partie est partagée par d'autres écrans (un bouton de système de design, une mise en page), dites-le et demandez s'il faut convertir la partie partagée ou encapsuler une copie locale.

Étape 2. Lire le projet avant d'écrire

• Trouvez comment le projet stylise les choses : Tailwind, modules CSS, CSS pur, une bibliothèque CSS-in-JS, une bibliothèque de composants. Adaptez le thème dans cet idiome. N'ajoutez pas un deuxième système de styles dans un projet qui en a déjà un.
• Lisez le fichier de règles du projet (CLAUDE.md, AGENTS.md ou similaire). S'il interdit les couleurs hexadécimales brutes dans les composants, ajoutez d'abord les valeurs --ms-* dans sa feuille de style principale, puis utilisez les tokens. S'il a une échelle typographique ou un chargeur de polices, ajoutez les trois polices via ce chargeur (par exemple next/font/google dans Next.js) et non via la ligne @import, qui est réservée au HTML simple.
• Conservez les primitives propres au projet. Restylez son Button via une variante ou une classe ; ne le remplacez pas par un <button> brut.

Étape 3. Installer les primitives une fois

1. Tokens et classes. Importez assets/manuscript.css, ou son équivalent dans l'idiome du projet. Dans Tailwind v4, les tokens vont dans @theme et les éléments multicouche (.ms-page::before, .ms-frame, .ms-cast, .ms-button) vont dans @layer components, car les piles de pseudo-éléments ne sont pas adaptées aux utilitaires.
2. Filtres. Montez assets/defs.svg une fois, à l'intérieur ou avant la racine délimitée. Dans React, créez-en un petit composant. Sans cela, les cadres et les règles s'affichent en ligne droite et le bord irrégulier disparaît, ce qui est un échec silencieux : vérifiez-le.
3. Polices. EB Garamond (lecture), IM Fell English (titres), La Belle Aurore (notes marginales). Chargez uniquement les graisses utilisées.

Étape 4. Choisir un préréglage

Choisissez le préréglage en fonction de la forme de la partie, en utilisant le tableau de la section 6 de references/style.md. En résumé :

• windsor pour les formulaires, les paramètres et les panneaux d'outils denses,
• leicester pour les articles, la documentation, les notes de version, les héros et les états vides,
• arundel pour les tableaux de bord, les toiles et les planches de nombreuses petites parties,
• forster pour les cartes étroites, les barres latérales, les listes et les écrans mobiles.

Définissez-le comme data-ms-paper="..." sur la racine délimitée. windsor n'a pas besoin d'attribut. L'utilisateur peut nommer un préréglage ou un codex, et cela l'emporte. Un préréglage par surface.

Étape 5. Convertir, partie par partie

Parcourez la partie avec la table de correspondance dans references/style.md. Les règles les plus importantes :

• Surface. La racine de la partie devient .ms-page : papier, grain, lignes de chaîne et lignes de châssis, bord irrégulier. Les surfaces intérieures ou grises disparaissent. Utilisez .ms-repair pour au plus un patch plus clair, là où un bloc a besoin d'être séparé.
• Cartes. Une carte devient un cadre de plume lâche (.ms-frame) ou rien. La plupart des groupes n'ont pas besoin de cadre : l'espace et une règle à la main les séparent, comme sur la feuille. Utilisez les cadres pour un ou deux blocs qui sont des notes encadrées.
• Ombres. Chaque box-shadow et élévation devient des hachures (.ms-cast) ou disparaît. Il n'y a pas d'ombres douces grises dans ce thème.
• Coins. Remplacez les rayons par --ms-radius (un rayon dessiné à la main) ou aucun.
• Couleur. Encre brune uniquement. Corps en --ms-ink, secondaire en --ms-ink-2, légendes en --ms-ink-3. La couleur de marque devient sanguine, utilisée une seule fois par surface : l'action primaire, les liens et l'anneau de focus.
• Typographie. Corps en EB Garamond avec chiffres elzéviriens. Le titre en IM Fell. Un titre de section en IM Fell italic avec une double règle à la main en dessous. Ne mettez jamais le texte du corps dans la police manuscrite : elle est réservée aux courtes notes.
• Champs. Une entrée est une ligne tracée (.ms-input), une zone de texte est des lignes tracées, une case à cocher est un carré d'encre avec une croix (.ms-check). Conservez le vrai <input> et <label> ; seul le dessin change.
• Badges et tags deviennent des mots encerclés (.ms-circled).
• Listes de valeurs, statistiques et tableaux deviennent un livre de comptes (.ms-ledger) : lignes tracées, points de conduite vers la valeur, chiffres elzéviriens.
• Icônes. Conservez les icônes du projet. Mettez-les en teinte d'encre et passez-les par le filtre ms-ink. Ne les échangez pas contre des emoji ou glyphes.
• Images prennent .ms-plate : sépia, multipliées dans le papier.
• Graphiques deviennent des lignes de plume et des remplissages hachurés. Pas de dégradés. Nommez les points et les régions avec des lettres en italique (.ms-point) comme le font les diagrammes de Leicester.
• Barres de progression, compteurs et pistes de curseur deviennent l'échelle de Vitruve (.ms-scale avec --value). Conservez le rôle de l'élément et ses valeurs aria. Pour un <input type="range"> ou <progress> natif, conservez l'élément natif et dessinez l'échelle derrière lui.
• Numéros d'étape, rangs et indices deviennent des numéros de figure dans la marge (.ms-figno), comme dans Forster.
• Une valeur modifiée est une correction : <del> barré par la plume, <ins> en écriture manuscrite. Uniquement là où l'UI affiche déjà une valeur ancienne et une nouvelle.
• Totaux et décompositions peuvent être une somme travaillée (.ms-sum), comme dans Arundel.
• Sections dans un texte long commencent par une initiale simple (.ms-initial) et se terminent par une ligne tracée (.ms-endrule), comme dans Leicester.

Étape 6. Composer comme une page de travail

Une conversion directe d'une grille de cartes en cartes brunes est le mode d'échec. Recomposez la partie pour qu'elle se lise comme une feuille qui a été remplie, pas conçue :

• Utilisez .ms-folio : la colonne principale et une marge. Déplacez les faits secondaires, les indices et le texte d'aide dans la marge comme .ms-note, avec un croquis en renvoi pointant vers leur sujet si cela aide.
• Laissez les blocs différer en largeur. Mettez un croquis à l'intérieur du texte, pas dans sa propre bande.
• Inclinez deux ou trois petits blocs avec .ms-tilt-l, .ms-tilt-r ou .ms-tilt-s. N'inclinez jamais un champ de formulaire, un tableau ou quoi que ce soit d'environ plus d'un tiers de la page.
• Ajoutez un croquis à la plume depuis assets/sketches.svg qui correspond au sujet : le mécanisme pour les paramètres ou les systèmes, la construction pour la mise en page, les données ou les mesures. Dessinez-en un nouveau de la même manière si aucun ne convient. Un par surface.
• Respectez le budget décoratif pour une surface : un croquis (deux maximum), une tache ou une auréole, un effet de transparence, deux blocs en miroir. Une page qui porte tous ces éléments se lit comme un costume. La plupart des surfaces en ont besoin de deux ou trois, pas de tous.
• Remplissez le véritable espace vide avec au plus deux blocs d'écriture spéculaire décorative (.ms-mirror, aria-hidden="true"). Écrivez-le en italien de la manière de l'époque (notes personnelles, listes, mesures). Ne le présentez pas comme une citation réelle.
• L'ordre du DOM reste l'ordre de lecture. La mise en page peut déplacer visuellement les choses ; l'ordre source doit toujours avoir un sens pour un lecteur d'écran et pour la navigation Tab.

Étape 7. Garde-fous

• Contraste. Le texte réel n'utilise jamais --ms-wash. Mesurez tout nouvel élément par rapport au papier : 4,5:1 pour le texte, 3:1 pour un graphique significatif ou le bord d'un contrôle.
• Le texte en miroir n'est jamais du contenu. Les étiquettes, valeurs, erreurs et instructions restent lisibles et dans le bon sens.
• La sémantique reste. Mêmes éléments, rôles, noms, états et gestionnaires d'événements. Un composant converti doit se comporter exactement comme avant.
• Les contrôles restent reconnaissables. Un bouton paraît toujours cliquable, un champ paraît toujours saisissable, le focus est toujours visible (contour sanguine).
• L'animation. L'animation du thème est celle de l'encre : un croquis qui se dessine avec data-draw, une marque qui apparaît dans une case à cocher. Le survol et l'appui sont un lavis, jamais une échelle. Respectez prefers-reduced-motion, ce que manuscript.css fait déjà.
• Coût. Chaque élément filtré est un passage de filtre. Limitez les filtres aux pseudo-éléments, aux cadres et aux croquis, pas à de longues listes de lignes ou à du contenu défilant. Ne mettez pas ms-ink sur le texte du corps.
• Pas de marques institutionnelles. Ne copiez pas un timbre de bibliothèque ou de collection, un numéro de catalogue de musée comme marque, ou le nom de Léonard comme signature. La page est dans sa manière, pas présentée comme étant de lui.
• Clair uniquement. La feuille est un objet, donc elle ne s'inverse pas en mode sombre. Si l'application a un thème sombre, la partie délimitée conserve son papier.

Étape 8. Vérifier

1. Rendez la partie convertie et prenez une capture d'écran. Si un outil de navigation est disponible (agent-browser, Playwright, le panneau de prévisualisation), utilisez-le. Regardez-la.
2. Vérifiez que les cadres et les règles sont ondulés. S'ils sont droits, cela signifie que les defs ne sont pas montées, ou que les identifiants de filtres entrent en conflit.
3. Naviguez par Tab dans la partie. Chaque contrôle est atteint dans un ordre logique et montre l'anneau de focus.
4. Vérifiez la page à une largeur de téléphone. Le folio se réduit à une colonne.
5. Exécutez la propre vérification du projet (typecheck, lint, build) si elle existe.

Rapport

Quand c'est fait, informez l'utilisateur en quelques courtes lignes :

• quelle partie a changé et quels fichiers,
• quel préréglage, et pourquoi il correspond à la partie,
• ce qui a été ajouté une fois (tokens, polices, filtres) et où,
• toute partie laissée en l'état, et pourquoi,
• comment la voir (la route ou le fichier à ouvrir).