ben-eddy74/agent-skills

Vite + Lit-Webkomponenten-Workflow

Geltungsbereich & Verzeichnisgrenze

• STRENGE GRENZE: Nur innerhalb von frontend/ arbeiten. Niemals backend/-Quellcode ändern.
• Quelle der Wahrheit: Der Backend-API-Vertrag ist schreibgeschützt aus ../backend/target/generated/openapi/openapi.yaml.

Ausführungsschritte

Schritt 1: OpenAPI-Vertrag & Komponenten-Header synchronisieren (STOPP FÜR MENSCHLICHE ÜBERPRÜFUNG)

1. Führen Sie npm run sync-api in frontend/ aus, um src/api/schema.d.ts aus der Backend-OpenAPI-Spezifikation neu zu generieren.
2. Erstellen oder aktualisieren Sie die Ziel-Lit .ts-Komponentendateien mit NUR dem oberen Vertrags-Header (erste ~30 Zeilen):
   • @customElement('...')
   • Typisierte @property()-Deklarationen (die auf OpenAPI-generierte Typen verweisen, niemals any).
   • CustomEvent-Detail-Typdefinitionen für ausgelöste Ereignisse.
   • declare global { interface HTMLElementTagNameMap { ... } }
3. PAUSE: Wenn eine neue Ansicht erstellt oder Komponentenverträge geändert werden, lassen Sie den Benutzer den @property()-Header überprüfen, bevor Sie schweres DOM/CSS schreiben. (Pause für reine CSS/visuelle Anpassungen überspringen).

Schritt 2: Blackbox-Implementierung

1. Implementieren Sie render() und static styles = css innerhalb der Lit-Komponente.
2. Kapselungsregeln:
   • Eigenschaften nach unten, Ereignisse nach oben.
   • Niemals document.querySelector verwenden oder das shadowRoot einer anderen Komponente durchbrechen.
   • Niemals rohe fetch()-Aufrufe mit untypisiertem JSON schreiben; den typisierten API-Client verwenden.
   • Jede Komponentendatei unter 250 Zeilen halten.

Schritt 3: Mechanische Überprüfung & statischer Bundle-Build

Führen Sie innerhalb von frontend/ aus und beheben Sie alle Fehler, bevor Sie die Fertigstellung melden:

npm run verify && npm run build