# 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 - **9 Parameter-Kategorien (A–J)** **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. --- ## Kategorie A — Unternehmensidentität ### Pflicht - [ ] Client-Name erscheint im Seitentitel - [ ] Client-Name erscheint im Footer - [ ] Client-Name erscheint im Impressum - [ ] `lang`-Attribut entspricht dem definierten Locale (z.B. `de`, `de-AT`, `en`) - [ ] Standort korrekt im Footer/Kontaktbereich dargestellt (falls definiert) - [ ] Kontaktdaten korrekt dargestellt (falls definiert) --- ## Kategorie B — Zielgruppe ### Pflicht - [ ] Content ist auf das Wissensniveau der Zielgruppe abgestimmt - [ ] Typische Einwände werden auf Überzeugungsseiten adressiert (falls definiert) - [ ] Hauptprobleme der Zielgruppe werden in Hero/Intro angesprochen (falls definiert) - [ ] Sprachniveau passt zum definierten Entscheidertyp ### Bei Zielgruppen-spezifischen Inhalten - [ ] Fachbegriffe erklärt (wenn Zielgruppe = Laien) - [ ] Fachbegriffe verwendet (wenn Zielgruppe = Experten) --- ## Kategorie C — Kommunikation ### Pflicht - [ ] Ansprache (du/sie) ist konsistent auf ALLEN Seiten - [ ] Ansprache ist konsistent in ALLEN UI-Elementen (Buttons, Labels, Microcopy) - [ ] Tonalität entspricht den definierten `baseTone`-Werten - [ ] Schreibstil entspricht den definierten `writingStyle`-Werten - [ ] Emotionales Gefühl spiegelt sich im Gesamtdesign wider ### Konsistenz-Check ``` [ ] Alle Buttons mit korrekter Ansprache? [ ] Alle Formular-Labels mit korrekter Ansprache? [ ] Alle Microcopy-Elemente mit korrekter Ansprache? [ ] Keine Mischung von Du und Sie? ``` --- ## Kategorie D — Angebot ### Pflicht - [ ] Alle definierten Leistungen sind auf der Website dargestellt - [ ] Jede Leistung hat Titel - [ ] Jede Leistung hat Beschreibung - [ ] Jede Leistung hat Nutzen-Kommunikation (falls definiert) - [ ] Angebotstyp bestimmt das Layout: - Dienstleistung → Services-Grid oder Liste - Produkt → Produkt-Karten - Beratung → Prozess-Darstellung --- ## Kategorie E — Seitenarchitektur ### Pflicht - [ ] Alle definierten Seiten existieren als Routes unter `app/` - [ ] Jede Seite erfüllt ihren definierten Zweck: - `informieren`: Fakten-First, klare Struktur, CTAs dezent - `ueberzeugen`: USPs prominent, Social Proof, Argumentation - `konvertieren`: CTAs above-the-fold, Trust-Elemente, Einwand-Behandlung - [ ] Seiten mit Priorität `hoch` sind am detailliertesten umgesetzt - [ ] Navigation enthält alle Seiten in logischer Reihenfolge - [ ] Interne Verlinkungswünsche umgesetzt (falls definiert) ### Seiten-Zweck-Check | Seite | Purpose | Priority | Umgesetzt | |-------|---------|----------|-----------| | (aus Spec) | (aus Spec) | (aus Spec) | [ ] | --- ## Kategorie F — Marke & Stil ### Pflicht - [ ] Alle Farben kommen aus Design-Tokens (`globals.css`) - [ ] Keine hardcodierten Hex/RGB-Werte im Code - [ ] Heading-Font entspricht `brand.fonts.heading.family` - [ ] Body-Font entspricht `brand.fonts.body.family` - [ ] Visueller Stil entspricht den Stil-Adjektiven - [ ] **Keines der Stil-Verbote wurde verletzt** ### Stil-Check ``` [ ] Passt jedes UI-Element zu den Stil-Adjektiven? [ ] Verstößt kein Element gegen die Stil-Verbote? [ ] Logo korrekt eingebunden (falls vorhanden)? ``` --- ## Kategorie G — UX & Interaktion ### Pflicht - [ ] Interaktionsniveau entspricht dem definierten Level (`ruhig`/`moderat`/`dynamisch`) - [ ] Animations-Level ist korrekt (`keine`/`dezent`/`praesent`) - [ ] Scroll-Verhalten ist korrekt konfiguriert (`normal`/`smooth`) ### Level-spezifische Checks **Bei `ruhig`:** - [ ] Keine framer-motion Animationen vorhanden - [ ] Kein Parallax - [ ] Maximal 1 CTA pro Viewport - [ ] Große Whitespace-Blöcke **Bei `moderat`:** - [ ] Nur dezente Fade-In Animationen - [ ] Subtile Hover-Effekte - [ ] framer-motion sparsam eingesetzt **Bei `dynamisch`:** - [ ] Scroll-Animationen vorhanden - [ ] Micro-Interactions implementiert - [ ] framer-motion aktiv eingesetzt --- ## Kategorie H — Conversion ### Pflicht - [ ] Primärer CTA-Text korrekt implementiert - [ ] Primärer CTA-Ziel korrekt verlinkt - [ ] Sekundärer CTA-Text korrekt implementiert (falls definiert) - [ ] Sekundärer CTA-Ziel korrekt verlinkt (falls definiert) ### Kontaktmethoden - [ ] `formular`: Kontaktformular auf Kontaktseite vorhanden - [ ] `telefon`: Telefonnummer im Header sichtbar - [ ] `buchung`: Buchungstool-Embed vorhanden (oder Platzhalter) ### Vertrauenselemente - [ ] `bewertungen`: Bewertungs-Widgets oder Zitat-Karten platziert - [ ] `zertifikate`: Logo-Leiste mit Zertifizierungen vorhanden - [ ] `referenzen`: Kundenlogos oder Case-Studies eingebunden - [ ] `community`: Mitglieder-Zahlen oder Social-Feeds vorhanden ### Conversion-Seiten-Check - [ ] Konvertierungsseiten haben prominente CTAs above-the-fold - [ ] Trust-Section direkt unter Hero auf Conversion-Seiten - [ ] Einwand-Entkräftung vor Kontaktformular --- ## Kategorie I — Technik & Recht ### Impressum - [ ] Impressum-Seite unter `/impressum` vorhanden - [ ] `companyName` korrekt - [ ] `street` korrekt - [ ] `postalCode` + `city` korrekt - [ ] `country` korrekt - [ ] `email` korrekt - [ ] `phone` korrekt (falls definiert) - [ ] `vatId` korrekt (falls definiert) - [ ] `register` korrekt (falls definiert) ### Datenschutz - [ ] Datenschutz-Seite unter `/datenschutz` vorhanden - [ ] Cookie-Hinweis enthalten - [ ] Hosting-Info enthalten (aus `spec.technical.hosting`) - [ ] Analytics-Angabe enthalten (aus `spec.technical.tracking`) ### Integrationen - [ ] Newsletter-Integration vorhanden (wenn `newsletter: true`) - [ ] Newsletter-Signup im Footer - [ ] Buchungstool-Embed vorhanden (wenn `bookingTool` definiert) - [ ] Externe Integrationen als TODO-Kommentare markiert --- ## Kategorie J — KI-Kontext ### Pflicht - [ ] `whatIsImportant` wurde bei JEDER Designentscheidung berücksichtigt - [ ] `whatToAvoid` wurde nirgendwo verletzt - [ ] Positive Referenzen wurden als Inspiration erkennbar einbezogen (falls definiert) - [ ] Negative Referenzen wurden bewusst vermieden (falls definiert) ### KI-Kontext-Check ``` [ ] Was ist besonders wichtig? → Umgesetzt? [ ] Was darf auf keinen Fall passieren? → Vermieden? [ ] Bei Konflikten: Kat. J priorisiert? ``` --- ## 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 `
` statt `