65 lines
2.7 KiB
Markdown
65 lines
2.7 KiB
Markdown
# 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`
|