Initial commit

skills/DEFINITION_OF_DONE.md

@@ -0,0 +1,199 @@
+# Definition of Done
+
+Harte Abnahmekriterien. Eine Aufgabe gilt erst als abgeschlossen, wenn alle Kriterien erfüllt sind.
+
+---
+
+## Scope
+
+Diese Datei definiert **verbindliche Abnahmekriterien** für:
+- Build und Deployment
+- Code-Qualität
+- Responsive Design
+- Accessibility
+- SEO
+- Projektspezifikation
+
+**Geltungsbereich:** Gilt global für jedes Projekt. Keine Aufgabe ist fertig, bis diese Checkliste erfüllt ist.
+
+---
+
+## Read Order
+
+Diese Datei wird nach den anderen Skills gelesen:
+
+1. `skills/SYSTEM_SKILLS.md`
+2. `skills/UI_GUIDELINES.md`
+3. `skills/DEFINITION_OF_DONE.md` (diese Datei)
+4. `skills/CLIENT_OVERRIDES.md`
+
+Die Definition of Done ist die finale Prüfinstanz vor Abschluss einer Aufgabe.
+
+---
+
+## Non-Goals
+
+Diese Datei definiert **NICHT**:
+- Wie das Design aussehen soll
+- Welche Farben oder Layouts verwendet werden
+- Konkrete UI-Vorgaben
+- Wie Code strukturiert sein soll (siehe SYSTEM_SKILLS.md)
+
+Diese Datei prüft nur, ob Qualitätsstandards eingehalten wurden.
+
+---
+
+## Build & Deployment
+
+### Pflicht
+
+- [ ] `npm run build` erfolgreich ohne Fehler
+- [ ] Keine TypeScript-Fehler
+- [ ] Keine ESLint-Fehler (Warnungen dokumentieren falls unvermeidbar)
+- [ ] Keine Runtime-Errors in der Console
+
+### Bei Fehlern
+
+Build-Fehler müssen vor Abschluss behoben werden. Keine Ausnahmen.
+
+---
+
+## Code-Qualität
+
+### Pflicht
+
+- [ ] Keine `any` Types in TypeScript
+- [ ] Keine auskommentierten Code-Blöcke
+- [ ] Keine `console.log` im Production-Code
+- [ ] Konsistente Namenskonventionen
+- [ ] Keine ungenutzten Imports oder Variablen
+- [ ] Keine Dead Code (ungenutzte Funktionen/Komponenten)
+
+### Abhängigkeiten
+
+- [ ] Keine ungenutzten Dependencies in `package.json`
+- [ ] Keine Sicherheitslücken in Dependencies (soweit bekannt)
+
+---
+
+## Responsive Design
+
+### Pflichtprüfung
+
+| Viewport | Bereich | Status |
+|----------|---------|--------|
+| Mobile | 320px - 767px | [ ] geprüft |
+| Tablet | 768px - 1023px | [ ] geprüft |
+| Desktop | 1024px+ | [ ] geprüft |
+
+### Kriterien
+
+- [ ] Keine horizontalen Scrollbars auf keinem Viewport
+- [ ] Keine abgeschnittenen oder überlagernden Inhalte
+- [ ] Touch-Targets mindestens 44x44px auf Touch-Geräten
+- [ ] Lesbare Schriftgrößen ohne Zoom
+
+---
+
+## Accessibility
+
+### Pflicht
+
+- [ ] Kontrast WCAG AA erfüllt (4.5:1 Text, 3:1 UI-Elemente)
+- [ ] Tastatur-Navigation funktioniert vollständig
+- [ ] Fokus-Indikatoren sind sichtbar
+- [ ] Semantisches HTML verwendet (keine `<div>` statt `<button>`)
+- [ ] Alt-Texte für alle informativen Bilder
+- [ ] Formular-Labels vorhanden und verknüpft
+
+### Bei Ausnahmen
+
+Kontrast-Ausnahmen müssen dokumentiert und begründet werden. Es muss ein Plan zur Behebung existieren.
+
+---
+
+## SEO Mindeststandard
+
+### Pflicht pro Seite
+
+- [ ] Eindeutiger `<title>` vorhanden
+- [ ] Meta-Description vorhanden
+- [ ] Korrekte Heading-Hierarchie (nur ein `h1`, dann `h2` > `h3`)
+- [ ] Open Graph Tags gesetzt
+- [ ] Alt-Texte für Bilder
+
+### Pflicht global
+
+- [ ] `robots.txt` vorhanden
+- [ ] Canonical URLs gesetzt (falls relevant)
+- [ ] Keine Blocking-Resources für Crawler
+
+---
+
+## Performance
+
+### Pflicht
+
+- [ ] Bilder optimiert (WebP/AVIF, responsive srcset)
+- [ ] Lazy Loading für Below-the-fold-Inhalte
+- [ ] Keine unnötigen Dependencies
+- [ ] Bundle-Größe im Budget (JS < 100kb gzip, CSS < 30kb gzip)
+
+### Empfohlen
+
+- [ ] Core Web Vitals im grünen Bereich (LCP < 2.5s, CLS < 0.1, INP < 200ms)
+
+---
+
+## Projektspezifikation
+
+### Pflicht
+
+- [ ] Alle Anforderungen aus `ProjectSpec.json` umgesetzt
+- [ ] Design entspricht `design_tokens.json` und `stylesheet.css`
+- [ ] Keine eigenmächtigen Design-Entscheidungen
+- [ ] CLIENT_OVERRIDES.md berücksichtigt (falls vorhanden)
+
+### Dokumentation
+
+- [ ] Änderungen in `generation_log.json` maschinell dokumentiert
+
+---
+
+## Browser-Kompatibilität
+
+Unterstützte Browser (letzte 2 Major-Versionen):
+
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari
+- [ ] Edge
+
+Bei bekannten Inkompatibilitäten: dokumentieren und Workaround bereitstellen.
+
+---
+
+## Schnell-Checkliste
+
+Vor Abschluss jeder Aufgabe durchgehen:
+
+```
+[ ] 1. npm run build erfolgreich?
+[ ] 2. Mobile (320px) geprüft?
+[ ] 3. Tablet (768px) geprüft?
+[ ] 4. Desktop (1024px+) geprüft?
+[ ] 5. Kontrast WCAG AA erfüllt?
+[ ] 6. Tastatur-Navigation funktioniert?
+[ ] 7. SEO-Basics vorhanden (title, description, h1)?
+[ ] 8. Anforderungen aus ProjectSpec erfüllt?
+[ ] 9. Kein Dead Code oder ungenutzte Dependencies?
+[ ] 10. generation_log.json aktualisiert?
+```
+
+---
+
+## Zusammenfassung
+
+> Erst wenn alle Checkboxen erfüllt sind, gilt eine Aufgabe als erledigt.
+> Keine Ausnahmen ohne explizite Dokumentation und Begründung.
+> Build-Fehler sind Blocker. Accessibility-Verstöße sind Blocker.