SkeletonMan/telenetsystems-2026-02-03-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6c7ae06e58f3284c3eaa621d7d1be0ce55bc8c64
telenetsystems-2026-02-03-v1/skills/DEFINITION_OF_DONE.md

11 KiB
Raw Blame History

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 <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)

Browser-Kompatibilität

Unterstützte Browser (letzte 2 Major-Versionen):

  • Chrome
  • Firefox
  • Safari
  • Edge

Bei bekannten Inkompatibilitäten: dokumentieren und Workaround bereitstellen.

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

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?

Kategorie-Schnellcheck

[ ] A. Unternehmensidentität korrekt?
[ ] B. Zielgruppe berücksichtigt?
[ ] C. Ansprache konsistent?
[ ] D. Alle Leistungen dargestellt?
[ ] E. Alle Seiten mit richtigem Purpose?
[ ] F. Stil-Adjektive eingehalten, Verbote vermieden?
[ ] G. Interaktionsniveau korrekt?
[ ] H. CTAs und Trust-Elemente platziert?
[ ] I. Impressum und Datenschutz vollständig?
[ ] J. KI-Kontext beachtet?

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. KI-Kontext-Verstöße (Kat. J whatToAvoid) sind Blocker.

Reference in New Issue View Git Blame Copy Permalink