# Prompt: Neue Komponente erstellen

Verwende diesen Prompt wenn du eine neue Komponente zu CSS-Framework hinzufügst.
Arbeite die Schritte der Reihe nach ab und hake jeden Punkt ab, bevor du zum nächsten gehst.

---

## Vorbereitung

Bevor du anfängst:
- Prüfe ob semantisches HTML (`base.css`) die Aufgabe bereits löst — dann braucht es keine Komponente
- Prüfe ob eine bestehende Komponente aus `components.css` angepasst werden kann statt einer neuen
- Entscheide: CSS-only oder minimales JS nötig?

---

## Checkliste

### 1. CSS in `components.css`
- Neue Klassen am Ende der Datei, mit `/* === KOMPONENTENNAME === */`-Header
- Keine harten Farb-, Spacing-, Radius- oder Shadow-Werte — ausschließlich Tokens aus `tokens.css`
- Klammerbalance prüfen (jedes `{` hat ein `}`)

### 2. JavaScript (nur wenn nötig)
- Funktion ist framework-unabhängig und funktioniert ohne HTMX
- Funktion ist global aufrufbar und hat eine klare Signatur (`functionName(param)`)
- Nicht inline im HTML (CSP): als benannte Funktion in `framework.js` und zusätzlich als `data-action` im Objekt `frameworkActions`
- Signatur und `data-action` dokumentieren (siehe Schritt 6)
- Kein `style`-Attribut, kein `on…`-Attribut in Beispielen und Demo; die Demo muss unter strenger CSP ohne Verstöße laufen (siehe README, „Content Security Policy“)

### 3. Demo in `index.html`
- Neue `<section class="section" id="...">` direkt vor dem schließenden `</div><!-- /stack -->`
- Struktur: `section-header` (Label, h2, Beschreibung) + `demo-preview` mit allen Varianten
- Praxisnahe Demo — keine Dummy-Daten wie "Lorem ipsum"
- Sidebar-Link ergänzen: `<a href="#...">Name</a>` in der passenden Kategorie

### 4. `README.md`
- Komponente im thematisch passenden Abschnitt eintragen
- Minimales HTML-Beispiel + Variantenübersicht
- Bei JS: Funktion in der JS-API-Tabelle ergänzen

### 5. `.opencode/skills/SKILL.md`
- Schnellreferenz-Snippet in die passende Kategorie (max. 5–8 Zeilen)
- Varianten als Kommentar, nicht als vollständige Beispiele

### 6. `.opencode/skills/references/components.md`
- Vollständige Dokumentation mit allen Varianten und Modifiern
- Beispiel so vollständig, dass es direkt kopiert werden kann

### 7. `REPO_MAP.md`
- Neue Komponente in der Komponenten-Übersicht unter der passenden Kategorie eintragen

---

## Erlaubte Abkürzungen

- CSS-only Komponente ohne Varianten: Schritt 2 entfällt
- Kleiner neuer Modifier einer bestehenden Komponente: kein eigener README-Abschnitt, eine Zeile im bestehenden reicht; REPO_MAP.md-Eintrag entfällt

## Nicht erlaubt

- Hardcoded Farben, Abstände oder Radien (immer Token)
- JavaScript das HTMX voraussetzt
- Neue Komponente ohne Demo in `index.html`
- Neue Klassen ohne Eintrag in `SKILL.md` und `references/components.md`