v0 Template Review-Checklist

Schnelle Bewertung: Kann das Template übernommen werden oder muss es zurück an die Content-Creator?

---

KRITISCHE FEHLER (Sofort zurückgeben)

• Template verwendet 'use client' direkt → Muss Server Component sein
• Hardcoded Daten gefunden (Texte, Bilder, Links) → Alles muss aus Props kommen
• openingHours?: any → Muss typisiert sein
• Keine TypeScript-Typisierung → Interfaces fehlen
• API-Calls im Template → Daten kommen als Props
• Externe Dependencies außer Next.js, React, Tailwind, Framer Motion
• Lorem-Ipsum Texte → Visuelle Fallbacks OK, aber keine Platzhalter-Texte

Wenn einer dieser Punkte zutrifft → ZURÜCKGEBEN

---

WICHTIGE ANFORDERUNGEN (Prüfen & ggf. anpassen)

Struktur

• Feste Komponentenstruktur vorhanden?

  • components/Header.tsx
  • components/Hero.tsx
  • components/TileGrid.tsx (oder Custom Layout)
  • components/Footer.tsx
  • index.ts exportiert Template

• index.ts vorhanden?

  export { CenterWebsiteTemplate } from './Template';
  export type { CenterWebsiteTemplateProps } from './types';

Next.js Best Practices

• Interne Links verwenden next/link?

  // RICHTIG
  import Link from 'next/link';
  <Link href={tile.href}>...</Link>
  
  // FALSCH
  <a href={tile.href}>...</a>

• Bilder verwenden next/image?

  // RICHTIG
  import Image from 'next/image';
  <Image src={...} width={...} height={...} />
  
  // FALSCH (außer externe URLs ohne Domain-Kontrolle)
  <img src={...} />

TypeScript

• openingHours korrekt typisiert?

  // RICHTIG
  openingHours?: {
    regularHours?: { monday?: DayHours | null; ... };
    weekdays?: string;
    saturday?: string;
    sunday?: string;
  }
  
  // FALSCH
  openingHours?: any;

• Alle Props typisiert?

  • centerConfig vollständig typisiert
  • tiles, shops, events, news, services typisiert

Daten-Fallbacks

• Fallbacks für fehlende Daten implementiert?

  • Keine Tiles → Alternative Section (Shops/Events)
  • Kein Hero-Image → Gradient/Pattern
  • Kein Kontakt → Footer reduced state

• Keine leeren States?

  • Template zeigt immer etwas, auch wenn Daten fehlen

Design

• Primary-Farbe verwendet?

  style={{ backgroundColor: centerConfig.colors.primary }}

• Dynamisches Schatten-System?

  style={{ boxShadow: 'var(--shadow-card, ...)' }}

• Responsive Design?

  • Mobile-first
  • Funktioniert auf allen Bildschirmgrößen

---

OUTPUT-PRÜFUNG

• DATA_REQUIREMENTS.md vorhanden?

  • Zwingend erforderlich
  • Optional
  • Defaults

• IMPLEMENTATION_NOTES.md vorhanden?

  • Besonderheiten
  • Integration
  • Anpassungen

• README.md vorhanden?

  • Template-Beschreibung
  • Verwendung

---

QUALITÄTS-CHECKS

• Accessibility

  • ARIA-Labels vorhanden
  • Semantisches HTML
  • Keyboard-Navigation möglich

• Performance

  • Lazy Loading für Bilder
  • Code Splitting wo sinnvoll

• Code-Qualität

  • Saubere Struktur
  • Kommentare wo nötig
  • Konsistente Namensgebung

---

ENTSCHEIDUNGS-MATRIX

ÜBERNEHMEN wenn:

• Alle kritischen Fehler sind behoben
• Struktur stimmt (Header, Hero, TileGrid, Footer)
• next/link und next/image verwendet
• openingHours typisiert
• Fallbacks implementiert
• DATA_REQUIREMENTS vorhanden

ANPASSEN wenn:

• Struktur stimmt, aber Details fehlen
• Kleinere TypeScript-Probleme
• Fallbacks fehlen, aber schnell hinzufügbar

ZURÜCKGEBEN wenn:

• Kritische Fehler vorhanden
• Hardcoded Daten
• Keine TypeScript-Typisierung
• API-Calls im Template
• Falsche Struktur

---

QUICK-CHECK (2 Minuten)

1. Öffne Template.tsx

   • Kein 'use client'?
   • Verwendet next/link und next/image?
   • Alle Daten aus Props?

2. Öffne types.ts

   • openingHours typisiert (kein any)?
   • Alle Interfaces vorhanden?

3. Prüfe Struktur

   • components/Header.tsx vorhanden?
   • components/Hero.tsx vorhanden?
   • index.ts exportiert Template?

4. Prüfe Fallbacks

   • Fallback wenn keine Tiles?
   • Fallback wenn kein Hero-Image?

Wenn alle 4 Checks erfüllt → Template kann übernommen werden

---

SCHNELL-FIXES (wenn nur kleine Probleme)

Problem: 'use client' im Template

// ENTFERNEN
'use client';

// Nur in Subcomponents wenn nötig
// components/InteractiveSlider.tsx
'use client';

Problem: <a> statt <Link>

// ERSETZEN
<a href={tile.href}>

// MIT
import Link from 'next/link';
<Link href={tile.href}>

Problem: <img> statt <Image>

// ERSETZEN
<img src={logo} alt={name} />

// MIT
import Image from 'next/image';
<Image src={logo} alt={name} width={200} height={60} />

Problem: openingHours?: any

// ERSETZEN
openingHours?: any;

// MIT
openingHours?: {
  regularHours?: { monday?: DayHours | null; ... };
  weekdays?: string;
  saturday?: string;
  sunday?: string;
}

---

TEMPLATE-SCORE

Zähle die erfüllten Punkte:

• Kritische Fehler: 0 = OK | 1+ = FEHLER
• Wichtige Anforderungen: 8/8 = OK | 6-7/8 = WARNUNG | <6/8 = FEHLER
• Output-Prüfung: 3/3 = OK | 2/3 = WARNUNG | <2/3 = FEHLER
• Qualitäts-Checks: 3/3 = OK | 2/3 = WARNUNG | <3/3 = WARNUNG

Gesamt-Score:

• Übernehmen: 0 kritische Fehler + 8/8 wichtige Anforderungen + 3/3 Output
• Anpassen: 0 kritische Fehler + 6-7/8 wichtige Anforderungen
• Zurückgeben: 1+ kritische Fehler ODER <6/8 wichtige Anforderungen