# 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`