Que fait implémentation / refonte) ?
La source de vérité est le dépôt upstream https://github.com/Caho1/open-claude-ui (MIT) : AGENTS.md (tokens, presets, composants), code-examples/ et docs/v2/ (Claude Desktop 2.0, v2.37337.1). Les chemins ci-dessous sont relatifs à ce dépôt ; clonez-le ou ouvrez-le à côté de votre projet, ou lisez-les sur GitHub. Ce skill est le flux de travail ; il ne duplique pas les valeurs. Lisez references/v2-delta.md lorsque la tâche touche au comportement v2 (densité, sidebar, effort, mouvement du compositeur, file d'attente hors ligne).
0. Choisir la baseline en premier
- CDS 1.x (par défaut dans
code-examples/) : accent argile chaud, compositeur de 20px, rayon de 8px, ressorts Framer Motion. - CDS 2.0 (docs/v2) : canevas
#FCFCFBfroid, compositeur de 12/14px, rayon de 6/8px, contrôles de 24/32px, mouvement du compositeur CSS. Demandez ou déduisez laquelle ; ne les mélangez pas dans une même surface. Plusieurs tokens v2 (--cds-h-control,data-density) sont documentés dans les docs mais pas encore définis danscode-examples/cds-theme.css: définissez-les avant utilisation.
1. Flux de travail
- Classifiez la tâche : nouveau composant / restylage / refonte / audit.
- Réutilisez avant d'écrire : vérifiez
code-examples/(30 modules, index dans AGENTS.md §3) etsrc/index.ts. Composez ou étendez ; ne redérivez pas. - Tokens : chaque couleur, rayon, durée et easing provient d'une var
--cds-*ou d'un alias Tailwind. Pas de hex brut, pas demsad-hoc. - Mouvement : choisissez selon le tableau ci-dessous.
- Gardes de bord (section 3) pour tout code d'entrée, scroll ou iframe.
- Vérifiez (section 4). Signalez les échecs textuellement.
2. Règles de décision
Choix du mouvement
| Situation | Utilisez |
|---|---|
| Survol/appui/fondu/squelette/entrée, tout ce qui s'exécute pendant le streaming | CSS pur + --cds-dur-* + --cds-ease-* (compositeur uniquement : transform, opacity, filter) |
| Relâchement de glisser, largeur/hauteur qui dépend de la vélocité ou de la disposition | Framer Motion avec un des SPRING_BOUNCY / SNAPPY / GENTLE / HEAVY_SNAP |
| Mouvement réduit | Snap, ne supprimez jamais le changement d'état. Respectez prefers-reduced-motion |
Jamais transition: all, jamais linear, jamais de nombres de ressort codés en dur. Une shorthand transition utilisant var(--cds-dur-*) meurt silencieusement si le token n'est pas défini, donc définissez les cinq (60ms/120/200/300/450). |
Surface et bordures : superposez avec surface-0..3 + bordure fine border-subtle (0.5px en v2). Un seul trait : les contrôles à l'intérieur d'un conteneur avec bordure reçoivent border-none. Dérivez les ombres avec color-mix() depuis la surface, pas de noir alpha fixe. Jamais de #000/#fff pur (bloc de code #0d0d0c excepté).
Densité : taille des contrôles depuis --cds-h-control / --cds-radius / --cds-icon, jamais de px fixe, donc Compact et Comfortable fonctionnent tous les deux. Les lignes compactes qui tombent sous 44px de zone de contact utilisent la croissance tactile de marge négative (--cmp-chin-touch-grow).
Nombres : tout minuteur, compteur, jauge de tokens, numéro de ligne reçoit tabular-nums.
Conception d'information (position v2) : un poste de travail, pas un jouet de chat. Préférez les lignes d'état denses (28px, branche, PR, pulsation d'exécution) aux cartes aérées ; exposez le coût/risque explicitement (niveaux d'effort avec un avertissement Max, jauge d'utilisation) ; traitez la saisie utilisateur comme précieuse.
3. Gardes non négociables
- IME :
if (e.nativeEvent.isComposing || e.keyCode === 229) return;avant tout Entrée pour envoyer. - Scroll streaming : ne pas épingler automatiquement si
Date.now() - lastUserScroll < 150; épingler uniquement à moins de 40px du bas. - Iframes pour HTML généré par le modèle : sandbox sans
allow-same-origin, postMessage vérifié par origine, conditionné parnavigator.userActivation. - Saisie sans perte : les envois échoués/hors ligne persistent (file d'attente IndexedDB) et se restaurent au rechargement.
- Immuabilité de l'environnement : fenêtre de contexte / arbre de travail / configuration MCP sont figés une fois une session créée ; ne construisez pas d'interface qui les modifie en milieu de session.
- Pas d'actifs binaires (
.ttf/.otf/.mp3/.wav) ; uniquement des piles de polices système et de la synthèse Web Audio. - Les modes clair (
:root) et sombre (.dark) doivent tous deux être vérifiés. Pas de dégradés froids violets/néon (1.x). - Clavier : les listes/grilles utilisent le focus roving (
useClaudeRovingFocus) ; les dialogues piègent le focus.
4. Checklist de refonte / audit
Grep sur la cible pour : littéraux hex, rounded-[…px], transition-all, ease-linear, duration-[…], stiffness: en dehors des presets, onKeyDown avec Entrée sans garde IME, scrollTo/scrollTop = dans le code de streaming, allow-same-origin, bordures de 1px imbriquées dans des parents avec bordure. Remplacez chacun par le token/preset/garde. Gardez le comportement ; changez uniquement la présentation sauf indication contraire.
Ensuite, exécutez, toutes doivent sortir avec 0 :
npm run typecheck && npm run check:tokens && npm run build
Si vous avez ajouté une référence --cds-* à AGENTS.md, check:tokens nécessite qu'elle existe dans cds-theme.css.
5. Contrat de sortie
Indiquez quelle baseline (1.x/2.0), quels modules existants ont été réutilisés, quels tokens/presets ont été choisis et pourquoi, ainsi que le résultat de la vérification. Marquez tout ce qui n'a pas été vérifié (par exemple, la vérification visuelle du mode sombre) comme non vérifié.