Website Skeleton

Minimalistisches Runtime-Skeleton für KI-generierte Websites.

---

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

/
├── 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.

---

Entwicklung

Voraussetzungen

• Node.js 20.x oder höher
• npm

Installation

npm install

Development Server

npm run dev

Öffne http://localhost:3000.

Production Build

npm run build
npm run start

---

Docker

Development

cd docker
docker-compose up

Production Build

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

---

Lizenz

Proprietär - Nur für autorisierte Nutzung.