Elias/sportbox-reutte-2026-01-30-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
sportbox-reutte-2026-01-30-v1/prompts/master_prompt.md
Prototype Generator f0e917ef5d Initialize client project from skeleton 
Client: Sportbox-Reutte
Generated: 2026-01-30T10:35:33.399Z
2026-01-30 11:36:33 +01:00

11 KiB
Raw Permalink Blame History

Website-Build Masterprompt v2

Projekt: Sportbox-Reutte | Branche: Sport / Fitness | Sprache: de

0. Research & Kontext

Branchen-Insights

Zunehmende Integration von Technologie, wie Fitness-Apps und Wearables, die Nutzererfahrung personalisieren.,Wachsender Trend zu Online-Training und virtuellen Fitnessangeboten, insbesondere nach der Pandemie.,Steigende Nachfrage nach nachhaltigen und umweltfreundlichen Fitnesslösungen und Produkten.,Fokus auf ganzheitliches Wohlbefinden, das körperliche Fitness, mentale Gesundheit und Ernährung umfasst.,Zunahme von Community-basierten Fitnessangeboten, die soziale Interaktion und Unterstützung fördern.

Wettbewerbsanalyse

Wettbewerber in der Sport- und Fitnessbranche nutzen oft ein minimalistisches Design mit klaren Call-to-Action-Elementen. Häufige Features sind Buchungssysteme für Kurse, Mitgliederbereiche und Blogs mit Fitness-Tipps. Gute Wettbewerber bieten ansprechende visuelle Inhalte und Testimonials. Eine Lücke besteht oft in der Personalisierung der Nutzererfahrung und der Integration von Community-Elementen.

SEO-Keywords

Fitnessstudio Reutte, Sportangebote Reutte, Personal Training Reutte, Gruppenkurse Fitness, Gesundheit und Fitness, Online Fitnesskurse, Fitness für Anfänger, Yoga Reutte, Krafttraining Reutte, Ernährungsberatung Reutte, Fitness Community, Sportevents Reutte, Wellness und Fitness, Fitness Trends 2023

Content-Richtlinien

Die Website sollte eine professionelle, aber auch nahbare Tonalität haben. Die Botschaften sollten motivierend und inspirierend sein, mit einem klaren Fokus auf die Vorteile der Mitgliedschaft und der angebotenen Dienstleistungen. Wertversprechen sollten die individuelle Betreuung, die Vielfalt der Angebote und die Community-Atmosphäre 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: Sportbox-Reutte
  • Branche: Sport / Fitness
  • Tonalität: Professionell aber auch nahbar
  • Sprache: de (Alle Texte in dieser Sprache!)
  • Locale: de-AT
  • Primärfarbe: #000000
  • Sekundärfarbe: #FFFFFF
  • Akzentfarbe: #d6d6d6
  • CTA Primary: "Jetzt Termin buchen"
  • CTA Secondary: "Mehr über uns erfahren"

4. Seitenstruktur & Anforderungen

Startseite (/)

Beschreibung: Willkommen bei Sportbox Reutte – Ihr Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung.

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 uns erfahren"
  • Accessibility (ARIA labels, alt texts, keyboard nav)

Über Uns (/über-uns)

Beschreibung: Erfahren Sie mehr über unsere Philosophie, unser Team und unsere Community bei Sportbox Reutte.

Route: app/über-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 uns erfahren"
  • Accessibility (ARIA labels, alt texts, keyboard nav)

Aktuelles (/aktuelles)

Beschreibung: Bleiben Sie auf dem Laufenden über Neuigkeiten, Events und Angebote in unserem Fitnessstudio.

Route: app/aktuelles/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 uns erfahren"
  • Accessibility (ARIA labels, alt texts, keyboard nav)

Studio (/studio)

Beschreibung: Entdecken Sie unsere modernen Räumlichkeiten und hochwertigen Fitnessgeräte bei Sportbox Reutte.

Route: app/studio/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 uns erfahren"
  • Accessibility (ARIA labels, alt texts, keyboard nav)

Leistungen (/leistungen)

Beschreibung: Informieren Sie sich über unser vielfältiges Kursangebot und individuelle Trainingsmöglichkeiten.

Route: app/leistungen/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 uns erfahren"
  • Accessibility (ARIA labels, alt texts, keyboard nav)

5. Technische Anforderungen

Features:

  • Kontaktformular
  • Blog
  • FAQ
  • Team-Seite
  • SEO Optimierung

Domain: sportbox-reutte.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 soll implementiert werden?

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 uns 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-30.

Reference in New Issue View Git Blame Copy Permalink