bifroest/app/static/css-framework/.opencode/commands/add-token.md

Prompt: Neues Design-Token hinzufügen

Verwende diesen Prompt wenn du einen neuen Wert in tokens.css einführst. Tokens sind die einzige Source of Truth — kein Hardcoding in Komponenten oder Utilities.

---

Vorbereitung

Bevor du anfängst:

• Prüfe ob ein vorhandener Token den Bedarf bereits deckt (z.B. --surface-raised statt neuem --card-bg)
• Prüfe ob ein semantischer Alias eines Rohwerts ausreicht (z.B. --accent-subtle statt neuem --highlight-bg)
• Entscheide: Rohpalette (--color-xxx-500) oder semantischer Alias (--surface-interactive)?
  • Rohpaletten-Tokens gehören in die Farbpaletten-Sektion
  • Semantische Aliases gehören in :root (Light) und [data-theme="dark"] (Dark) — beide müssen gepflegt werden

---

Checkliste

1. Token in tokens.css

• Einordnen unter dem passenden /* === ABSCHNITT === */-Header
• Semantische Aliases: in :root und [data-theme="dark"] eintragen
• Naming: --kategorie-name (z.B. --color-brand-500, --surface-interactive, --space-18)
• Kein direktes Verwenden von Rohpaletten-Tokens in Komponenten — immer über semantische Alias

2. .opencode/skills/references/tokens.md aktualisieren

• Token in der passenden Kategorie mit Wert und Verwendungszweck dokumentieren
• Dark-Mode-Wert ebenfalls eintragen falls abweichend

3. .opencode/skills/SKILL.md — Kurzübersicht prüfen

• Falls der Token für häufige Aufgaben relevant ist: in der Token-Kurzübersicht ergänzen

4. Sofort verwenden

• Vorhandene Stellen im CSS identifizieren, die denselben Wert hardcoded haben
• Diese Stellen auf den neuen Token umstellen

---

Nicht erlaubt

• Rohpaletten-Tokens direkt in components.css oder utilities.css verwenden (var(--color-accent-500) → immer var(--accent))
• Token mit identischem Wert wie ein bereits vorhandener Token
• Semantischer Alias ohne Dark-Mode-Gegenstück in [data-theme="dark"]
• Token ohne Eintrag in references/tokens.md