diff --git a/.env.example b/.env.example deleted file mode 100644 index 1eb8632..0000000 --- a/.env.example +++ /dev/null @@ -1,21 +0,0 @@ -# Environment Variables -# Copy this file to .env.local and fill in the values - -# Node Environment -NODE_ENV=development - -# Next.js -NEXT_PUBLIC_SITE_URL=http://localhost:3000 - -# Analytics (optional) -# NEXT_PUBLIC_GA_ID= - -# CMS (optional) -# CMS_API_URL= -# CMS_API_KEY= - -# Email (optional) -# SMTP_HOST= -# SMTP_PORT= -# SMTP_USER= -# SMTP_PASS= diff --git a/.gitignore b/.gitignore index 8132c38..17ff2cd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,32 +1,33 @@ -# dependencies -node_modules -/node_modules -/.pnp -.pnp.js +# Dependencies +node_modules/ -# testing -/coverage +# Build outputs +.next/ +out/ +dist/ +build/ -# next.js -/.next/ -/out/ +# IDE +.idea/ +.vscode/ +*.swp +*.swo -# production -/build - -# misc +# OS .DS_Store -*.pem +Thumbs.db -# debug +# Logs +*.log npm-debug.log* -yarn-debug.log* -ts-debug.log* -# local env files +# Environment .env .env.local -.env*.local +.env.*.local -# vercel -.vercel +# TypeScript +*.tsbuildinfo + +# Generated files +generated/ diff --git a/README.md b/README.md index 397203b..7a14686 100644 --- a/README.md +++ b/README.md @@ -1,146 +1,73 @@ -# Website Skeleton +# WebsiteSkeleton -Minimalistisches Runtime-Skeleton für KI-generierte Websites. +## AI-First Website Generation System + +Dieses Repository ist ein **Skeleton für die KI-gestützte Website-Generierung**. Es enthält keine lauffähige Website, sondern ausschließlich Markdown-Dateien, die der KI beschreiben, **was** erreicht werden soll. + +Die KI entscheidet autonom über: +- Seitenarchitektur & Struktur +- Layout & Section-Reihenfolge +- Typografie & Spacing +- Komponentenwahl +- Visuelle Hierarchie --- -## Was ist das? - -Dieses Repository ist **kein Website-Template**. Es enthält: - -- Keine fertigen Layouts -- Keine UI-Komponenten -- Keine Design-Vorgaben - -Es ist ein neutraler, stabiler Arbeitscontainer, mit dem KI individuelle Websites von Grund auf generiert. - ---- - -## Für KI-Systeme - -**Vor der Website-Generierung müssen folgende Dateien gelesen werden:** - -1. `/skills/SYSTEM_SKILLS.md` - Grundregeln und Verbote -2. `/skills/UI_GUIDELINES.md` - Qualitätsstandards -3. `/skills/DEFINITION_OF_DONE.md` - Abnahmekriterien -4. `/spec/ProjectSpec.json` - Projektspezifikation -5. `/spec/design_tokens.json` - Design-System -6. `/prompts/master_prompt.md` - Workflow-Anleitung - ---- - -## Tech-Stack - -| Kategorie | Technologie | -|-----------|-------------| -| Framework | Next.js 15+ (App Router) | -| UI | React 19 | -| Sprache | TypeScript | -| Styling | Tailwind CSS v4 | -| Animation | framer-motion, lenis | -| Icons | lucide-react | -| Runtime | Node.js 20.x LTS | - ---- - -## Projektstruktur +## Repository-Struktur ``` -/ -├── app/ # Next.js App Router -├── components/ # Fundament-Komponenten -│ ├── layout/ # Container, Section -│ └── ui/ # Button, Card -├── src/ # Projekt-spezifischer Code (Utils, Hooks) -├── skills/ # KI-Regeln und Guidelines -├── spec/ # Projektspezifikation & Design Tokens -├── theme/ # CSS Variables & Stylesheets -├── prompts/ # KI-Prompts -├── content/ # Inhalte (MDX, JSON) -├── assets/ # Medien (Bilder, Fonts) -├── meta/ # Generierungs-Logs -├── docker/ # Docker-Konfiguration -└── [config files] # package.json, tsconfig.json, etc. +/framework + FRAMEWORK.md # Technischer Stack (Next.js, TypeScript, Tailwind) + +/ai + SYSTEM_RULES.md # Harte Qualitätsregeln + QUALITY_STANDARD.md # Definition von "launch-ready" + AI_DECISION_LOGIC.md # Entscheidungskompetenz der KI + +/briefs + PROJECT_BRIEF.md # Projektübersicht + BUSINESS_CONTEXT.md # Firma, Markt, Positionierung + USER_CONTEXT.md # Zielgruppe, Bedürfnisse + CONTENT_INTENT.md # Inhalte, die überzeugen sollen + DESIGN_INTENT.md # Gewünschte Wirkung + SEO_INTENT.md # Keywords, Suchintention + CONSTRAINTS.md # No-Gos, rechtliche Anforderungen + +/prompts + MASTER_PROMPT.md # Orchestrator-Prompt für die KI + +README.md # Diese Datei ``` --- -## Entwicklung +## Verwendung -### Voraussetzungen +### Für den Website Prototype Generator: -- Node.js 20.x oder höher -- npm +1. Clone dieses Repository +2. Befülle die `briefs/*.md` Dateien mit Kundeninformationen +3. Übergib das Repository an die KI zusammen mit `prompts/MASTER_PROMPT.md` +4. Die KI generiert eine vollständige, launch-ready Website -### Installation +### Wichtig: -```bash -npm install -``` - -### Development Server - -```bash -npm run dev -``` - -Öffne [http://localhost:3000](http://localhost:3000). - -### Production Build - -```bash -npm run build -npm run start -``` +- Die Dateien in `/ai` und `/framework` bleiben **unverändert** +- Nur die Dateien in `/briefs` werden pro Projekt angepasst +- Der `MASTER_PROMPT.md` orchestriert den gesamten Generierungsprozess --- -## Docker +## Philosophie -### Development +> Das Skeleton beschreibt **WAS**, nicht **WIE**. -```bash -cd docker -docker-compose up -``` +Klassische Templates kontrollieren die KI durch vordefinierte Strukturen. Dieses System **befähigt** die KI, optimale Entscheidungen zu treffen. -### Production Build - -```bash -docker build -f docker/Dockerfile -t website . -docker run -p 3000:3000 website -``` - ---- - -## Workflow für neue Projekte - -1. **Spec ausfüllen**: `spec/ProjectSpec.json` mit Projektdaten füllen -2. **Tokens anpassen**: `spec/design_tokens.json` mit Farben, Fonts etc. -3. **KI starten**: Mit Verweis auf `/skills` und `/spec` -4. **Generieren**: KI erstellt Website basierend auf Specs -5. **Prüfen**: Definition of Done validieren -6. **Deployen**: Build erstellen und ausliefern - ---- - -## Entwicklungshinweise - -> **Build und Dev dürfen nicht gleichzeitig laufen.** -> Next.js kann CSS-Referenzen verlieren, wenn `npm run build` und `npm run dev` parallel ausgeführt werden. -> Nutze `npm run clean` um den `.next` Cache zu löschen, falls Styling-Probleme auftreten. - ---- - -## Wichtig - -- Dieses Skeleton erzwingt **kein Design** -- Alle Werte in `design_tokens.json` sind **Platzhalter** -- Die KI **muss** die Skills lesen bevor sie Code generiert -- Jede Website wird **individuell** erstellt +Das Ergebnis: Jeder Kunde erhält eine **einzigartige**, auf seinen Kontext zugeschnittene Website – keine "gleich gebauten" Varianten desselben Templates. --- ## Lizenz -Proprietär - Nur für autorisierte Nutzung. +Copyright © EB Solutions diff --git a/READ_FIRST.md b/READ_FIRST.md deleted file mode 100644 index 86fbddd..0000000 --- a/READ_FIRST.md +++ /dev/null @@ -1,56 +0,0 @@ -# READ FIRST - -## Pflicht-Lesereihenfolge - -Bevor an diesem Projekt gearbeitet wird, müssen folgende Dateien gelesen und verstanden werden: - -1. `skills/SYSTEM_SKILLS.md` – Grundregeln und Verbote -2. `skills/UI_GUIDELINES.md` – Qualitätsstandards für UI -3. `skills/DEFINITION_OF_DONE.md` – Abnahmekriterien -4. `spec/ProjectSpec.json` – Projektspezifikation -5. `spec/design_tokens.json` – Design-Token-Definitionen -6. `prompts/master_prompt.md` – Workflow-Anleitung - ---- - -## Entwicklungswarnung - -> **Build und Dev dürfen NICHT gleichzeitig laufen.** -> -> Wenn `npm run build` und `npm run dev` parallel ausgeführt werden, verliert Next.js CSS-Referenzen. -> Das führt zu fehlendem Styling und instabilem Hot-Reload. -> -> **Lösung bei Problemen:** -> ```bash -> npm run clean -> ``` -> Dieser Befehl löscht den `.next` Cache und stellt einen sauberen Zustand her. - ---- - -## Inline-Styling ist verboten - -`style={{ ... }}` ist im gesamten Projekt verboten. Alle Styles müssen über: - -- `theme/globals.css` – CSS Variables (`:root`) -- `theme/stylesheet.css` – Typografie & strukturelle Regeln -- `spec/design_tokens.json` – Token-Definitionen - -gesteuert werden. - ---- - -## Architektur-Überblick - -``` -components/ -├── layout/ -│ ├── Container.tsx → Max-Width, horizontales Padding, responsive -│ └── Section.tsx → Vertikaler Rhythmus (Spacing) -└── ui/ - ├── Button.tsx → Varianten: primary / secondary / ghost - └── Card.tsx → Neutraler Wrapper (Radius, Border, Shadow) -``` - -Diese Komponenten verwenden ausschließlich CSS Variables aus `globals.css`. -Sie diktieren KEIN Design – sie erzwingen Struktur. diff --git a/SECURITY.md b/SECURITY.md deleted file mode 100644 index ec027e9..0000000 --- a/SECURITY.md +++ /dev/null @@ -1,54 +0,0 @@ -# Security Policy - -## Unterstützte Versionen - -| Version | Unterstützt | -|---------|-------------| -| 1.x | Ja | - -## Sicherheitsrichtlinien - -### Umgebungsvariablen - -- **Niemals** sensible Daten in den Code committen -- `.env.local` ist in `.gitignore` aufgeführt -- Produktions-Secrets über sichere CI/CD-Variablen verwalten - -### Dependencies - -- Regelmäßig `npm audit` ausführen -- Kritische Vulnerabilities sofort beheben -- Dependencies aktuell halten - -### Code-Sicherheit - -- Input-Validierung für alle Benutzereingaben -- XSS-Prävention (React escaped standardmäßig) -- CSRF-Schutz bei Formularen -- Keine `dangerouslySetInnerHTML` ohne Sanitization -- Content Security Policy (CSP) konfigurieren - -### API-Sicherheit - -- Rate Limiting implementieren -- API-Keys niemals clientseitig exponieren -- HTTPS erzwingen -- CORS restriktiv konfigurieren - -### Headers - -Empfohlene Security Headers: - -``` -X-Content-Type-Options: nosniff -X-Frame-Options: DENY -X-XSS-Protection: 1; mode=block -Referrer-Policy: strict-origin-when-cross-origin -Content-Security-Policy: [projektspezifisch] -``` - -## Vulnerability melden - -Bei Sicherheitsproblemen bitte direkt an den Projektverantwortlichen wenden. - -**Keine** öffentlichen Issues für Sicherheitslücken erstellen. diff --git a/ai/AI_DECISION_LOGIC.md b/ai/AI_DECISION_LOGIC.md new file mode 100644 index 0000000..1a3b5a2 --- /dev/null +++ b/ai/AI_DECISION_LOGIC.md @@ -0,0 +1,101 @@ +# AI Decision Logic + +## Deine Rolle + +Du bist nicht nur ein Ausführer von Anweisungen. Du bist der Architekt dieser Website. + +--- + +## Was du entscheiden MUSST + +Die folgenden Aspekte sind nicht vorgegeben und liegen vollständig in deiner Verantwortung: + +### Seitenarchitektur + +- Welche Seiten braucht die Website? +- Wie sind sie miteinander verknüpft? +- Was kommt in die Navigation? + +### Section-Reihenfolge + +- In welcher Reihenfolge erscheinen Inhalte? +- Was kommt zuerst, was später? +- Was braucht mehr Platz, was weniger? + +### Visuelle Hierarchie + +- Was ist die wichtigste Information? +- Wie lenke ich den Blick des Nutzers? +- Welche Elemente heben sich ab? + +### Komponenteneinsatz + +- Welche UI-Patterns sind angemessen? +- Cards, Listen, Grids, Hero-Sections? +- Animations, Transitions, Hover-States? + +### Layout & Spacing + +- Wie viel Whitespace ist richtig? +- Welche Spaltenaufteilung funktioniert? +- Mobile-First oder Desktop-First? + +--- + +## Umgang mit Kundenangaben + +Die Briefing-Dateien enthalten Informationen, keine Befehle. + +### Wenn etwas explizit angegeben ist: + +→ Berücksichtige es als starke Präferenz + +### Wenn etwas unklar ist: + +→ Triff eine fundierte Entscheidung basierend auf Kontext + +### Wenn etwas fehlt: + +→ Ergänze sinnvoll, ohne nachzufragen + +### Wenn etwas bessser geht: + +→ Mach es besser + +--- + +## Kernprinzipien der Entscheidungsfindung + +### 1. Weniger ist mehr + +Lieber eine saubere Seite mit wenigem Inhalt als eine überladene mit allem. + +### 2. Qualität über Vollständigkeit + +Eine perfekte Hero-Section ist wertvoller als fünf halbfertige Sections. + +### 3. Erst denken, dann bauen + +Verstehe das Ziel, plane die Struktur, dann erst Code. + +### 4. Der Nutzer zählt + +Jede Entscheidung sollte dem Endnutzer dienen, nicht dem Client oder der KI selbst. + +### 5. Konsistenz + +Einmal getroffene Entscheidungen (Farben, Abstände, Patterns) durchgängig anwenden. + +--- + +## Explizite Erlaubnis + +Du DARFST und SOLLST: + +- Von Vorschlägen abweichen, wenn du bessere Lösungen siehst +- Inhalte kürzen, wenn sie zu lang sind +- Sections weglassen, die keinen Wert bieten +- Strukturen vereinfachen +- Eigene kreative Entscheidungen treffen + +Du bist der Experte. Handle entsprechend. diff --git a/ai/QUALITY_STANDARD.md b/ai/QUALITY_STANDARD.md new file mode 100644 index 0000000..aca3bc1 --- /dev/null +++ b/ai/QUALITY_STANDARD.md @@ -0,0 +1,71 @@ +# Quality Standard + +## Was bedeutet "Launch-Ready"? + +Eine Website ist launch-ready, wenn sie ohne weitere Überarbeitung live gehen könnte. Das bedeutet nicht "fertig für später", sondern "fertig für jetzt". + +--- + +## Visuelle Qualität + +### Die Website wirkt: + +- **Ruhig** – Kein visuelles Chaos, klare Struktur +- **Hochwertig** – Durchdachte Details, keine Provisorien +- **Konsistent** – Gleiche Elemente sehen überall gleich aus +- **Zeitgemäß** – Modernes Design, keine veralteten Muster + +### Sie vermeidet: + +- Überladene Layouts +- Zu viele Farben oder Schriften +- Inkonsistente Abstände +- Ablenkende Animationen + +--- + +## Technische Qualität + +### Performance + +- Bilder sind optimiert (WebP, lazy loading) +- Keine unnötigen Dependencies +- Minimaler JavaScript-Footprint +- Schnelle Time-to-Interactive + +### SEO + +- Korrekte Meta-Tags (title, description, og:*) +- Strukturierte Überschriften-Hierarchie +- Semantisches HTML +- Valide sitemap.xml (falls relevant) + +### GEO (Generative Engine Optimization) + +- Klare, gut strukturierte Inhalte +- Beantwortung von Nutzerfragen im Content +- Schema.org Markup wo sinnvoll + +--- + +## UX-Qualität + +### Die Website ist: + +- **Klar** – Der Nutzer versteht sofort, worum es geht +- **Verständlich** – Navigation und Struktur sind intuitiv +- **Nicht überladen** – Jedes Element hat einen Zweck +- **Zielführend** – Der Nutzer findet, was er sucht + +### Sie vermeidet: + +- Versteckte Navigation +- Zu viel Text ohne Struktur +- Unklare Call-to-Actions +- Verwirrende Nutzerführung + +--- + +## Prüfmethodik + +Die KI prüft ihre Arbeit selbst anhand dieser Kriterien, bevor sie die Website als "fertig" deklariert. diff --git a/ai/SYSTEM_RULES.md b/ai/SYSTEM_RULES.md new file mode 100644 index 0000000..feca796 --- /dev/null +++ b/ai/SYSTEM_RULES.md @@ -0,0 +1,77 @@ +# System Rules + +## Nicht verhandelbare Prinzipien + +Diese Regeln gelten für jede generierte Website. Sie sind keine Empfehlungen, sondern harte Anforderungen. + +--- + +### 1. Kein Inline-Styling + +Styles gehören in Tailwind-Klassen oder CSS-Module. Niemals `style={{ }}` in JSX. + +**Warum**: Wartbarkeit, Konsistenz, Performance. + +--- + +### 2. Accessibility ist Pflicht + +- Semantisches HTML (`