bifroest/app/static/css-framework/.opencode/commands/create-component.md

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