Skip to main content

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';
// 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

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/templates/review-checklist