sport-2026-01-29-v1/prompts/master_prompt.md

Website-Build Masterprompt v2

Projekt: Sport | Branche: Sport / Fitness | Sprache: de

0. Research & Kontext

Branchen-Insights

1. Digitalisierung im Fitnessbereich: Immer mehr Fitnessstudios und Sportanbieter setzen auf digitale Lösungen wie Apps und Online-Kurse. 2. Personalisierung von Fitnessangeboten: Individuelle Trainingspläne und Ernährungsberatung werden zunehmend nachgefragt. 3. Nachhaltigkeit im Sport: Umweltfreundliche Produkte und Dienstleistungen gewinnen an Bedeutung. 4. Wellness und mentale Gesundheit: Der Fokus auf ganzheitliches Wohlbefinden wird immer wichtiger. 5. Community-Building: Die Schaffung von Gemeinschaften durch soziale Medien und Events ist ein wachsender Trend.

Wettbewerbsanalyse

Wettbewerber in der Sport-/Fitnessbranche nutzen oft ein modernes, ansprechendes Design mit klaren Call-to-Action-Elementen. Häufige Features sind Buchungssysteme für Kurse, Mitgliederbereiche und Blogs. Viele Websites bieten auch interaktive Elemente wie Fitness-Tracker oder Ernährungspläne. Stärken der Wettbewerber sind die Benutzerfreundlichkeit und die Integration von Social-Media-Elementen. Eine Lücke besteht oft in der Personalisierung der Nutzererfahrung und der Bereitstellung von Inhalten, die über das Standardangebot hinausgehen.

SEO-Keywords

Fitnessstudio Wien, Personal Training Österreich, Online Fitnesskurse, Gesunde Ernährung Tipps, Sportartikel kaufen, Yoga Kurse Wien, Fitness Community, Ernährungsberatung, Krafttraining für Anfänger, Lauftraining Tipps, Fitness Trends 2023, Gesundheitsbewusstsein, Sportevents in Österreich, Nachhaltige Sportmode, Wellness und Fitness

Content-Richtlinien

Die Website sollte in einem premium und exklusiven Ton kommunizieren, der Vertrauen und Expertise ausstrahlt. Botschaften sollten klar und ansprechend sein, mit einem Fokus auf die individuellen Bedürfnisse der Kunden. Das Wertversprechen sollte die Qualität der Dienstleistungen und Produkte betonen sowie die Vorteile einer Mitgliedschaft oder Nutzung der Angebote hervorheben.

---

1. Lesereihenfolge (PFLICHT)

Du MUSST die folgenden Dateien in dieser EXAKTEN Reihenfolge lesen, bevor du irgendeine Zeile Code schreibst:

1. READ_FIRST.md (Projektübersicht & Regeln)
2. skills/SYSTEM_SKILLS.md (globale System-Skills – nicht überschreibbar)
3. skills/UI_GUIDELINES.md (UI-Richtlinien – nicht überschreibbar)
4. skills/DEFINITION_OF_DONE.md (Definition of Done – nicht überschreibbar)
5. skills/CLIENT_OVERRIDES.md (kundenspezifische Ergänzungen)
6. spec/ProjectSpec.json (Projektspezifikation)
7. spec/design_tokens.json (Design-Token – Single Source of Truth)
8. theme/globals.css (CSS Custom Properties – Single Source of Truth)
9. theme/stylesheet.css (Strukturelles CSS-Framework)

Erst nach dem Lesen aller Dateien darfst du mit der Implementierung beginnen.

2. Strikte Regeln (Non-Negotiable)

Design & Styling

• Keine Templates: Verwende KEINE vorgefertigten UI-Templates, Themes oder Section-Bibliotheken (kein shadcn, kein tailwindui, keine Copy-Paste-Sections).
• Design nur aus Tokens: Jede Farbe, jedes Spacing, jede Schriftgröße MUSS aus globals.css Custom Properties kommen. KEINE Hardcoded-Werte im Code.
• Keine UI-Libraries: Kein shadcn/ui, kein Material UI, kein Chakra UI, kein daisyUI. Nur native Tailwind CSS v4 + Custom Components.
• Tailwind v4: Nutze die neuen v4 Features (CSS-first config, @theme directive).

Architecture

• Skill-Hierarchie: SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES
  • CLIENT_OVERRIDES dürfen globale Regeln NICHT brechen, nur ergänzen.
• TypeScript strict: Alle Dateien in TypeScript. strict: true in tsconfig. Keine any Types (außer bei externen Libraries ohne Types).
• Stack: Next.js 16 App Router, React 19, TypeScript 5+, Tailwind CSS v4, framer-motion (sparsam), lucide-react.
• File Structure: Folge der Next.js 16 App Router Convention. Routes in app/, Components in components/.
• No New Dependencies: Füge KEINE neuen npm packages ohne explizite Begründung hinzu. Nutze den vorhandenen Stack.

Performance & Accessibility

• framer-motion sparsam: Nur für key interactions. Keine Animationen auf jedem Element.
• Lenis: NICHT aktivieren, es sei denn CLIENT_OVERRIDES fordert es explizit.
• Accessibility: Semantisches HTML5, ARIA-Labels wo nötig, Keyboard-Navigation, WCAG AA minimum.
• Performance: Keine unnötigen Client Components. Nutze Server Components wo möglich. Next.js Image für alle Bilder.

3. Markenidentität

• Kunde: Sport
• Branche: Sport / Fitness
• Tonalität: premium, exklusiv
• Sprache: de (Alle Texte in dieser Sprache!)
• Locale: de-AT
• Primärfarbe: #2563eb
• Sekundärfarbe: #64748b
• Akzentfarbe: #f59e0b
• CTA Primary: "Jetzt Termin buchen"
• CTA Secondary: "Mehr über unsere Angebote erfahren"

4. Seitenstruktur & Anforderungen

Startseite (/)

Beschreibung: Willkommen bei Sport – Ihre Anlaufstelle für Fitness und Wellness in Österreich.

Route: app/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über unsere Angebote erfahren"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Über Uns (/ueber-uns)

Beschreibung: Erfahren Sie mehr über unsere Philosophie und unser engagiertes Team.

Route: app/ueber-uns/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über unsere Angebote erfahren"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Kontakt (/kontakt)

Beschreibung: Kontaktieren Sie uns für Anfragen oder Buchungen. Wir freuen uns auf Sie!

Route: app/kontakt/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über unsere Angebote erfahren"
• Accessibility (ARIA labels, alt texts, keyboard nav)

5. Technische Anforderungen

Features:

• FAQ
• Team-Seite
• Buchungssystem für Kurse
• Mitgliederbereich

Domain: sport.at Analytics: Nicht angegeben Hosting: Nicht angegeben

6. Implementierungs-Reihenfolge

Befolge diese Schritte in exakter Reihenfolge:

1. Plan erstellen: Kurzer Plan (3-5 Bullet Points) mit deinem Implementierungsansatz.
2. Layout-Components: Header, Footer, Navigation (in components/layout/).
3. Shared Components: Buttons, Cards, Forms (in components/ui/).
4. Seiten implementieren: In der Reihenfolge der Seitenstruktur (Abschnitt 4).
5. SEO & Metadata: Für jede Seite metadata export mit title, description, og:tags.
6. Accessibility Check: Semantisches HTML, ARIA, Keyboard-Navigation prüfen.
7. Performance Check: Unnötige Client Components zu Server Components refactoren.
8. Build & Lint: npm run build && npm run lint fehlerfrei.

7. Offene Fragen (mit Client klären)

Die folgenden Informationen fehlen und müssen mit dem Client geklärt werden:

• technical.hosting (technical): Welcher Hosting-Anbieter wird verwendet?
• technical.analytics (technical): Welche Analytics-Lösung wird implementiert?

WICHTIG: Für diese Felder darfst du NICHT raten. Frage den Client oder nutze Platzhalter-Werte mit klarer Kennzeichnung (z.B. "PLACEHOLDER: ...").

---

8. Definition of Done (Abnahme-Checkliste)

Bevor du die Implementierung als fertig markierst, MÜSSEN alle diese Punkte erfüllt sein:

Build & Code Quality

• npm run build läuft fehlerfrei durch (0 Errors, 0 Warnings)
• npm run lint meldet keine Fehler (0 Errors, Warnings OK)
• TypeScript strict mode aktiv, keine any types
• Alle Imports funktionieren, keine broken imports

Funktionalität

• Alle Seiten aus Seitenstruktur (Abschnitt 4) existieren und sind erreichbar
• Navigation funktioniert zwischen allen Seiten
• Alle CTAs ("Jetzt Termin buchen", "Mehr über unsere Angebote erfahren") funktional
• Kontaktformular (falls vorhanden) validiert Eingaben

Design & Styling

• Alle Farben kommen aus globals.css Custom Properties (keine Hardcoded Colors)
• Alle Spacings nutzen Design Tokens (keine Magic Numbers)
• Typography nutzt Design Token Scales
• Brand-konform (Farben, Fonts, Tonalität)

Responsive & Cross-Browser

• Mobile (320px - 767px): Layout funktioniert, Navigation collapsed
• Tablet (768px - 1023px): Layout angepasst
• Desktop (1024px+): Volle Breite, optimales Layout
• Touch-Targets mindestens 44x44px (Mobile)

Accessibility (WCAG AA)

• Semantisches HTML5 (header, nav, main, section, article, footer)
• Alle Bilder haben alt-Texte
• Farbkontraste min. 4.5:1 für Text, 3:1 für UI (automatisch geprüft)
• Keyboard-Navigation funktioniert (Tab, Enter, Escape)
• Focus-States sichtbar
• ARIA-Labels wo semantisches HTML nicht ausreicht

Performance

• Unnötige Client Components zu Server Components refactored
• Bilder nutzen Next.js <Image> Component
• Keine blocking Scripts in <head>
• framer-motion nur sparsam eingesetzt (nicht überall)

SEO

• Jede Seite hat metadata export (title, description)
• Open Graph Tags gesetzt (og:title, og:description, og:image)
• Strukturierte Daten (JSON-LD) für Organisation (Homepage)

Legal & Content

• Impressum-Seite vorhanden (falls in Seitenstruktur)
• Datenschutz-Seite vorhanden (falls in Seitenstruktur)
• Alle Texte auf de

9. Stop Conditions

In folgenden Situationen MUSST du stoppen und NICHT weitermachen:

1. Unklare Anforderungen: Wenn Spec-Felder "Nicht angegeben" enthalten oder unklar sind → Frage den Client (siehe Abschnitt 7).
2. Widersprüche: Wenn CLIENT_OVERRIDES gegen SYSTEM_SKILLS/UI_GUIDELINES verstoßen → Melde das Problem.
3. Fehlende Assets: Wenn Logo, Bilder oder andere Assets fehlen → Nutze Platzhalter mit klarer Kennzeichnung.
4. Build Errors: Wenn npm run build fehlschlägt und du es nicht beheben kannst → Melde den Fehler mit Stack Trace.

NIEMALS:

• Raten bei unklaren Requirements
• Globale Skills (SYSTEM_SKILLS/UI_GUIDELINES/DEFINITION_OF_DONE) ignorieren
• Neue Dependencies ohne Begründung hinzufügen
• UI-Templates oder Copy-Paste-Code nutzen

---

Generiert von website-prototype-generator v2 am 2026-01-29.