246 lines
11 KiB
Markdown
246 lines
11 KiB
Markdown
# 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.*
|