CDS Frontend (Design / Implementieren / Refaktorieren)

Was macht Implementieren / Refaktorieren)?

Die Quelle der Wahrheit ist das Upstream-Repository https://github.com/Caho1/open-claude-ui (MIT): AGENTS.md (Tokens, Voreinstellungen, Komponenten), code-examples/ und docs/v2/ (Claude Desktop 2.0, v2.37337.1). Die nachfolgenden Pfade sind relativ zu diesem Repository; klonen oder öffnen Sie es parallel zu Ihrem Projekt oder lesen Sie es auf GitHub. Dieser Skill ist der Workflow; er dupliziert nicht die Werte. Lesen Sie references/v2-delta.md, wenn die Aufgabe das v2-Verhalten betrifft (Dichte, Sidebar, Aufwand, Compositor-Bewegung, Offline-Warteschlange).

0. Zuerst die Grundlinie wählen

• CDS 1.x (Standard in code-examples/): warmer Lehm-Akzent, 20px Composer, 8px Radius, Framer Motion-Federn.
• CDS 2.0 (docs/v2): kalte #FCFCFB-Leinwand, 12/14px Composer, 6/8px Radius, 24/32px Steuerelemente, CSS-Compositor-Bewegung. Fragen Sie oder leiten Sie ab, welche Version verwendet wird; mischen Sie sie nicht innerhalb einer Oberfläche. Viele v2-Tokens (--cds-h-control, data-density) sind in der Dokumentation beschrieben, aber noch nicht in code-examples/cds-theme.css definiert: Definieren Sie sie vor der Verwendung.

1. Workflow

1. Klassifizieren Sie die Aufgabe: neue Komponente / Restyle / Refactoring / Audit.
2. Wiederverwenden vor Schreiben: Überprüfen Sie code-examples/ (30 Module, Index in AGENTS.md §3) und src/index.ts. Kombinieren oder erweitern Sie; leiten Sie nicht neu ab.
3. Tokens: Jede Farbe, jeder Radius, jede Dauer und jede Beschleunigung stammt von einer --cds-*-Variable oder einem Tailwind-Alias. Keine rohen Hex-Farben, keine ad-hoc ms.
4. Bewegung: Wählen Sie gemäß der nachstehenden Tabelle.
5. Edge-Guards (Abschnitt 3) für jeglichen Input, Scroll oder iframe-Code.
6. Verifizieren (Abschnitt 4). Melden Sie Fehler wörtlich.

2. Entscheidungsregeln

Bewegungswahl

Situation	Verwendung
Hover/Press/Fade/Skeleton/Eintritt, alles was während des Streamings läuft	Reines CSS + --cds-dur-* + --cds-ease-* (nur Compositor: transform, opacity, filter)
Drag loslassen, Breite/Höhe die von Geschwindigkeit oder Layout abhängt	Framer Motion mit einer der Federn SPRING_BOUNCY / SNAPPY / GENTLE / HEAVY_SNAP
Reduced Motion	Snap, niemals Zustandsänderung entfernen. prefers-reduced-motion beachten
Niemals transition: all, niemals linear, niemals hartcodierte Federzahlen. Eine transition-Kurzform mit var(--cds-dur-*) stirbt still, wenn das Token undefiniert ist; definieren Sie daher alle fünf (60ms/120/200/300/450).

Oberflächen und Ränder: Schichten mit surface-0..3 + Haarlineal border-subtle (0,5px in v2). Nur ein Strich: Steuerelemente innerhalb eines umrandeten Containers erhalten border-none. Leiten Sie Schatten mit color-mix() von der Oberfläche ab, nicht mit festem Alpha-Schwarz. Niemals reines #000/#fff (Code-Block #0d0d0c ausgenommen).

Dichte: Größe der Steuerelemente über --cds-h-control / --cds-radius / --cds-icon, niemals feste px, sodass sowohl Kompakt als auch Bequem funktionieren. Kompakte Zeilen, die unter 44px Berührungsfläche fallen, verwenden den negativen Margin-Touch-Wachstum (--cmp-chin-touch-grow).

Zahlen: Jeder Timer, Zähler, Token-Anzeige, Zeilennummer erhält tabular-nums.

Informationsdesign (v2-Haltung): Eine Workstation, kein Chat-Spielzeug. Bevorzugen Sie dichte Statuszeilen (28px, Branch, PR, Run-Heartbeat) gegenüber geräumigen Karten; stellen Sie Kosten/Risiko explizit dar (Aufwandsstufen mit einer Max-Warnung, Verbrauchsanzeige); behandeln Sie Benutzereingaben als wertvoll.

3. Nicht verhandelbare Guards

• IME: if (e.nativeEvent.isComposing || e.keyCode === 229) return; vor jedem Enter-to-Send.
• Streaming-Scroll: Nicht automatisch einrasten, wenn Date.now() - lastUserScroll < 150; nur innerhalb von 40px des unteren Rands einrasten.
• Iframes für modellgeneriertes HTML: Sandbox ohne allow-same-origin, origin-geprüfter postMessage, durch navigator.userActivation geschützt.
• Null-Verlust-Eingabe: Fehlgeschlagene/Offline-Sends persistieren (IndexedDB-Warteschlange) und werden beim Neuladen wiederhergestellt.
• Umgebungsunveränderlichkeit: Kontextfenster / Worktree / MCP-Konfiguration sind nach der Erstellung einer Sitzung eingefroren; erstellen Sie kein UI, das sie während der Sitzung bearbeitet.
• Keine binären Assets (.ttf/.otf/.mp3/.wav); nur System-Schriftarten und Web-Audio-Synthese.
• Sowohl helles (:root) als auch dunkles (.dark) Schema müssen überprüft werden. Keine kalten Lila/Neon-Verläufe (1.x).
• Tastatur: Listen/Raster verwenden Roving-Fokus (useClaudeRovingFocus); Dialoge fangen den Fokus.

4. Checkliste für Refactoring / Audit

Durchsuchen Sie das Ziel nach: Hex-Literalen, rounded-[…px], transition-all, ease-linear, duration-[…], stiffness: außerhalb von Voreinstellungen, onKeyDown mit Enter ohne IME-Guard, scrollTo/scrollTop = in Streaming-Code, allow-same-origin, 1px-Ränder, die in umrandeten Eltern verschachtelt sind. Ersetzen Sie jedes durch das Token/die Voreinstellung/den Guard. Verhalten beibehalten; nur Präsentation ändern, sofern nicht anders verlangt.

Dann ausführen, alle müssen mit Exit 0 beenden:

npm run typecheck && npm run check:tokens && npm run build

Wenn Sie einen --cds-*-Verweis zu AGENTS.md hinzugefügt haben, erfordert check:tokens, dass er in cds-theme.css existiert.

5. Ausgabe-Vertrag

Geben Sie an, welche Grundlinie (1.x/2.0), welche vorhandenen Module wiederverwendet wurden, welche Tokens/Voreinstellungen gewählt wurden und warum, sowie das Verifikationsergebnis. Markieren Sie alles, was nicht verifiziert wurde (z.B. visuelle Dunkelmodusprüfung), als nicht verifiziert.