Initial commit

.env.example

@@ -0,0 +1,21 @@
+# 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=

.gitignore

@@ -0,0 +1,42 @@
+# Dependencies
+node_modules/
+.pnp/
+.pnp.js
+
+# Build
+.next/
+out/
+build/
+dist/
+
+# Environment
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+.DS_Store
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# Testing
+coverage/
+
+# Misc
+*.log
+*.pid
+*.seed
+*.pid.lock

README.md

@@ -0,0 +1,135 @@
+# 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
+├── src/                 # Source Code (Komponenten, Utils)
+├── 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
+
+```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
+```
+
+---
+
+## Docker
+
+### Development
+
+```bash
+cd docker
+docker-compose up
+```
+
+### 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
+
+---
+
+## 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.

SECURITY.md

@@ -0,0 +1,54 @@
+# 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.

app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata, Viewport } from "next";
+import "@/theme/globals.css";
+
+export const metadata: Metadata = {
+  title: "Website",
+  description: "Generated website",
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  themeColor: "#ffffff",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="de">
+      <body>{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <main>
+      <p>Ready</p>
+    </main>
+  );
+}

assets/README.md

@@ -0,0 +1,45 @@
+# Assets
+
+Dieses Verzeichnis enthält statische Medien.
+
+## Struktur
+
+```
+assets/
+├── images/         # Bilder (JPG, PNG, WebP, AVIF, SVG)
+├── videos/         # Videos (MP4, WebM)
+├── fonts/          # Schriftarten (WOFF2)
+├── icons/          # Icons (SVG)
+└── README.md
+```
+
+## Bildoptimierung
+
+- **Format**: WebP oder AVIF bevorzugen
+- **Größe**: Maximal 200kb pro Bild
+- **Responsive**: Mehrere Größen bereitstellen
+- **Alt-Texte**: Immer beschreibende Alt-Texte verwenden
+
+## Namenskonvention
+
+```
+[beschreibung]-[größe].[format]
+
+Beispiele:
+hero-image-1920.webp
+hero-image-960.webp
+logo.svg
+team-member-portrait.jpg
+```
+
+## Fonts
+
+- Nur WOFF2 verwenden
+- Subset auf benötigte Zeichen
+- In globals.css mit @font-face einbinden
+
+## Hinweise
+
+- Keine unnötigen Assets hochladen
+- Vor Commit optimieren
+- Copyright beachten

content/README.md

@@ -0,0 +1,27 @@
+# Content
+
+Dieses Verzeichnis enthält die Inhalte der Website.
+
+## Struktur
+
+```
+content/
+├── pages/          # Seiteninhalte (MDX, JSON, etc.)
+├── components/     # Komponenteninhalte
+├── data/           # Strukturierte Daten
+└── README.md
+```
+
+## Verwendung
+
+Inhalte werden projektspezifisch hinzugefügt. Mögliche Formate:
+
+- **MDX**: Für reichhaltige Textinhalte mit Komponenten
+- **JSON**: Für strukturierte Daten
+- **YAML**: Für Konfigurationen
+
+## Hinweise
+
+- Inhalte von Code trennen
+- Mehrsprachigkeit berücksichtigen
+- Assets in `/assets` ablegen, nicht hier

docker/Dockerfile

@@ -0,0 +1,47 @@
+# syntax=docker/dockerfile:1
+
+# Base image
+FROM node:20-alpine AS base
+WORKDIR /app
+
+# Dependencies
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Development
+FROM base AS development
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NODE_ENV=development
+ENV NEXT_TELEMETRY_DISABLED=1
+EXPOSE 3000
+CMD ["npm", "run", "dev"]
+
+# Builder
+FROM base AS builder
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+# Production
+FROM base AS production
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

docker/docker-compose.yml

@@ -0,0 +1,28 @@
+services:
+  web:
+    build:
+      context: ..
+      dockerfile: docker/Dockerfile
+      target: development
+    ports:
+      - "3000:3000"
+    volumes:
+      - ..:/app
+      - /app/node_modules
+      - /app/.next
+    environment:
+      - NODE_ENV=development
+      - NEXT_TELEMETRY_DISABLED=1
+    restart: unless-stopped
+
+  # Production build (optional)
+  # web-prod:
+  #   build:
+  #     context: ..
+  #     dockerfile: docker/Dockerfile
+  #     target: production
+  #   ports:
+  #     - "3000:3000"
+  #   environment:
+  #     - NODE_ENV=production
+  #   restart: unless-stopped

gitea-actions.yml

@@ -0,0 +1,33 @@
+name: CI
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        env:
+          NODE_ENV: production

meta/generation_log.json

@@ -0,0 +1,4 @@
+{
+  "version": "1.0.0",
+  "entries": []
+}

next.config.js

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  poweredByHeader: false,
+  compress: true,
+  images: {
+    formats: ['image/avif', 'image/webp'],
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "website-skeleton",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Minimalist runtime skeleton for AI-generated websites",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "framer-motion": "^11.15.0",
+    "lenis": "^1.1.18",
+    "lucide-react": "^0.469.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

prompts/master_prompt.md

@@ -0,0 +1,107 @@
+# Master Prompt
+
+Anweisungen für die KI zur Website-Generierung.
+
+---
+
+## Kontext
+
+Du arbeitest mit einem minimalistischen Website-Skeleton. Dieses Repository enthält:
+
+- Keine fertigen Layouts
+- Keine UI-Komponenten
+- Keine Design-Vorgaben
+
+Alles muss von Grund auf neu erstellt werden.
+
+---
+
+## Vor dem Start
+
+**Pflichtlektüre** (in dieser Reihenfolge):
+
+1. `/skills/SYSTEM_SKILLS.md` - Grundregeln
+2. `/skills/UI_GUIDELINES.md` - Qualitätsstandards
+3. `/skills/DEFINITION_OF_DONE.md` - Abnahmekriterien
+4. `/spec/ProjectSpec.json` - Projektanforderungen
+5. `/spec/design_tokens.json` - Design-System
+
+---
+
+## Workflow
+
+### 1. Analyse
+
+- ProjectSpec.json vollständig lesen und verstehen
+- Design Tokens studieren
+- Zielgruppe und Ziele identifizieren
+- Technische Anforderungen erfassen
+
+### 2. Konzeption
+
+- Seitenstruktur planen
+- Komponenten identifizieren (keine vorgefertigten!)
+- Responsive Breakpoints berücksichtigen
+- Performance-Budget einplanen
+
+### 3. Umsetzung
+
+- Mobile-First entwickeln
+- Semantisches HTML verwenden
+- CSS Variables aus globals.css nutzen
+- Tailwind für Utility-Klassen
+- TypeScript strict mode
+
+### 4. Qualitätssicherung
+
+- Definition of Done prüfen
+- Alle Breakpoints testen
+- Accessibility validieren
+- Performance messen
+
+### 5. Dokumentation
+
+- Änderungen in `generation_log.json` festhalten
+- Entscheidungen dokumentieren
+
+---
+
+## Beispiel-Prompt für neue Website
+
+```
+Erstelle eine Website für [Kunde] basierend auf:
+
+1. ProjectSpec.json wurde aktualisiert mit:
+   - Firmenname: [Name]
+   - Branche: [Branche]
+   - Zielgruppe: [Zielgruppe]
+   - Gewünschte Seiten: [Liste]
+
+2. design_tokens.json wurde aktualisiert mit:
+   - Primärfarbe: [Farbe]
+   - Schriftart: [Font]
+   - [weitere Anpassungen]
+
+Bitte lies zuerst /skills und /spec vollständig.
+```
+
+---
+
+## Verbote (Wiederholung)
+
+- KEINE UI-Libraries
+- KEINE Templates kopieren
+- KEINE eigenmächtigen Design-Entscheidungen
+- KEINE hardcodierten Werte
+- KEIN Over-Engineering
+
+---
+
+## Ausgabe-Erwartung
+
+Nach erfolgreicher Generierung:
+
+- Lauffähige Website unter `npm run dev`
+- Build erfolgreich unter `npm run build`
+- Alle DoD-Kriterien erfüllt
+- generation_log.json aktualisiert

skills/CLIENT_OVERRIDES.md

@@ -0,0 +1,208 @@
+# Client Overrides
+
+Optionaler Platz für kundenspezifische Ergänzungen und Präzisierungen.
+
+---
+
+## Scope
+
+Diese Datei ist für **kundenspezifische Zusätze**:
+- Brand Voice und Wording
+- Pflichtseiten und -inhalte
+- Verbote (kundenspezifisch)
+- Rechtliche Anforderungen
+- Assets und CI-Vorgaben
+- Konkurrenz und Referenzen
+
+**Geltungsbereich:** Gilt nur für dieses spezifische Kundenprojekt.
+
+---
+
+## Hierarchie-Regel
+
+**WICHTIG:** Diese Datei darf die globalen Skills NICHT überschreiben.
+
+| Priorität | Datei | Kann überschrieben werden? |
+|-----------|-------|---------------------------|
+| 1 (höchste) | SYSTEM_SKILLS.md | Nein |
+| 2 | UI_GUIDELINES.md | Nein |
+| 3 | DEFINITION_OF_DONE.md | Nein |
+| 4 (niedrigste) | CLIENT_OVERRIDES.md | — |
+
+### Erlaubt:
+- Globale Regeln **präzisieren** (z.B. "Buttons immer mit Icon")
+- Globale Regeln **erweitern** (z.B. "zusätzlich FAQ-Seite erforderlich")
+- Kundenspezifische **Zusatzanforderungen** definieren
+
+### Verboten:
+- Globale Regeln **widersprechen** (z.B. "Templates sind erlaubt")
+- Qualitätsstandards **absenken** (z.B. "Kontrast ist nicht wichtig")
+- Pflichten aus SYSTEM_SKILLS **aufheben**
+
+Bei Konflikten gilt: **Globale Skills > Client Overrides**
+
+---
+
+## Read Order
+
+Diese Datei wird zuletzt gelesen:
+
+1. `skills/SYSTEM_SKILLS.md`
+2. `skills/UI_GUIDELINES.md`
+3. `skills/DEFINITION_OF_DONE.md`
+4. `skills/CLIENT_OVERRIDES.md` (diese Datei)
+5. Dann: Projekt-Specs
+
+---
+
+## Non-Goals
+
+Diese Datei definiert **NICHT**:
+- Grundlegende Arbeitsweisen (siehe SYSTEM_SKILLS.md)
+- Allgemeine UI-Qualitätsstandards (siehe UI_GUIDELINES.md)
+- Abnahmekriterien (siehe DEFINITION_OF_DONE.md)
+- Konkrete visuelle Designs (kommen aus design_tokens.json)
+
+---
+
+## Brand Voice / Wording
+
+Sprache und Tonalität für Texte.
+
+**Standard:** Deutsch (Sie-Form), professionell, klar.
+
+<!-- TODO: Kundenspezifische Anpassungen hier eintragen -->
+
+```
+Tonalität:        [ ] formell  [ ] freundlich-professionell  [ ] locker
+Ansprache:        [ ] Sie      [ ] Du
+Sprache:          [ ] Deutsch  [ ] Englisch  [ ] Mehrsprachig
+Branchensprache:  (z.B. medizinisch, technisch, juristisch)
+Verbotene Wörter: (falls vorhanden)
+```
+
+---
+
+## Must-Have Seiten / Sektionen
+
+Seiten oder Inhalte, die für diesen Kunden Pflicht sind.
+
+<!-- TODO: Kundenspezifische Pflichtseiten hier eintragen -->
+
+```
+Pflichtseiten:
+- [ ] Startseite
+- [ ] Impressum
+- [ ] Datenschutzerklärung
+- [ ] ...
+
+Pflichtsektionen:
+- [ ] ...
+```
+
+---
+
+## Must-Not-Have (Verbote)
+
+Inhalte oder Elemente, die für diesen Kunden verboten sind.
+
+<!-- TODO: Kundenspezifische Verbote hier eintragen -->
+
+```
+Verboten:
+- [ ] Bestimmte Konkurrenzerwähnungen
+- [ ] Bestimmte Bildtypen
+- [ ] Bestimmte Formulierungen
+- [ ] ...
+```
+
+---
+
+## Legal (Rechtliches)
+
+Spezielle rechtliche Anforderungen.
+
+<!-- TODO: Kundenspezifische rechtliche Anforderungen hier eintragen -->
+
+```
+Impressum:
+- Firmenname:
+- Adresse:
+- Registergericht:
+- USt-IdNr:
+- Vertretungsberechtigte:
+
+Datenschutz:
+- Hosting-Anbieter:
+- Analyse-Tools:
+- Cookie-Consent erforderlich: [ ] Ja  [ ] Nein
+- Spezielle Anforderungen:
+
+Branchenspezifisch:
+- (z.B. Heilmittelwerbegesetz, Finanzdienstleistungen, etc.)
+```
+
+---
+
+## Assets
+
+Kundenspezifische Assets und CI-Elemente.
+
+<!-- TODO: Asset-Pfade und CI-Informationen hier eintragen -->
+
+```
+Logo:
+- Pfad: /public/...
+- Varianten: (light, dark, monochrom)
+
+CI-Dokument:
+- Pfad oder Link:
+
+Bildmaterial:
+- Pfad: /public/images/...
+- Lizenzen geklärt: [ ] Ja  [ ] Nein
+
+Schriften:
+- (falls nicht in design_tokens.json)
+```
+
+---
+
+## Konkurrenz / Referenzen
+
+Wettbewerber und Inspirationsquellen.
+
+<!-- TODO: Konkurrenz und Referenzen hier eintragen -->
+
+```
+Hauptkonkurrenten:
+1. ...
+2. ...
+3. ...
+
+Referenz-Websites (zur Inspiration, nicht zum Kopieren):
+1. ...
+2. ...
+
+Abgrenzung:
+- Was soll anders/besser sein als bei der Konkurrenz?
+```
+
+---
+
+## Sonstige kundenspezifische Anforderungen
+
+<!-- TODO: Weitere Anforderungen hier eintragen -->
+
+```
+Zusätzliche Anforderungen:
+- ...
+```
+
+---
+
+## Zusammenfassung
+
+> Diese Datei enthält kundenspezifische Ergänzungen.
+> Sie darf globale Regeln präzisieren und erweitern, aber niemals widersprechen.
+> Bei Konflikten gelten immer die globalen Skills.

skills/DEFINITION_OF_DONE.md

@@ -0,0 +1,199 @@
+# Definition of Done
+
+Harte Abnahmekriterien. Eine Aufgabe gilt erst als abgeschlossen, wenn alle Kriterien erfüllt sind.
+
+---
+
+## Scope
+
+Diese Datei definiert **verbindliche Abnahmekriterien** für:
+- Build und Deployment
+- Code-Qualität
+- Responsive Design
+- Accessibility
+- SEO
+- Projektspezifikation
+
+**Geltungsbereich:** Gilt global für jedes Projekt. Keine Aufgabe ist fertig, bis diese Checkliste erfüllt ist.
+
+---
+
+## Read Order
+
+Diese Datei wird nach den anderen Skills gelesen:
+
+1. `skills/SYSTEM_SKILLS.md`
+2. `skills/UI_GUIDELINES.md`
+3. `skills/DEFINITION_OF_DONE.md` (diese Datei)
+4. `skills/CLIENT_OVERRIDES.md`
+
+Die Definition of Done ist die finale Prüfinstanz vor Abschluss einer Aufgabe.
+
+---
+
+## Non-Goals
+
+Diese Datei definiert **NICHT**:
+- Wie das Design aussehen soll
+- Welche Farben oder Layouts verwendet werden
+- Konkrete UI-Vorgaben
+- Wie Code strukturiert sein soll (siehe SYSTEM_SKILLS.md)
+
+Diese Datei prüft nur, ob Qualitätsstandards eingehalten wurden.
+
+---
+
+## Build & Deployment
+
+### Pflicht
+
+- [ ] `npm run build` erfolgreich ohne Fehler
+- [ ] Keine TypeScript-Fehler
+- [ ] Keine ESLint-Fehler (Warnungen dokumentieren falls unvermeidbar)
+- [ ] Keine Runtime-Errors in der Console
+
+### Bei Fehlern
+
+Build-Fehler müssen vor Abschluss behoben werden. Keine Ausnahmen.
+
+---
+
+## Code-Qualität
+
+### Pflicht
+
+- [ ] Keine `any` Types in TypeScript
+- [ ] Keine auskommentierten Code-Blöcke
+- [ ] Keine `console.log` im Production-Code
+- [ ] Konsistente Namenskonventionen
+- [ ] Keine ungenutzten Imports oder Variablen
+- [ ] Keine Dead Code (ungenutzte Funktionen/Komponenten)
+
+### Abhängigkeiten
+
+- [ ] Keine ungenutzten Dependencies in `package.json`
+- [ ] Keine Sicherheitslücken in Dependencies (soweit bekannt)
+
+---
+
+## Responsive Design
+
+### Pflichtprüfung
+
+| Viewport | Bereich | Status |
+|----------|---------|--------|
+| Mobile | 320px - 767px | [ ] geprüft |
+| Tablet | 768px - 1023px | [ ] geprüft |
+| Desktop | 1024px+ | [ ] geprüft |
+
+### Kriterien
+
+- [ ] Keine horizontalen Scrollbars auf keinem Viewport
+- [ ] Keine abgeschnittenen oder überlagernden Inhalte
+- [ ] Touch-Targets mindestens 44x44px auf Touch-Geräten
+- [ ] Lesbare Schriftgrößen ohne Zoom
+
+---
+
+## Accessibility
+
+### Pflicht
+
+- [ ] Kontrast WCAG AA erfüllt (4.5:1 Text, 3:1 UI-Elemente)
+- [ ] Tastatur-Navigation funktioniert vollständig
+- [ ] Fokus-Indikatoren sind sichtbar
+- [ ] Semantisches HTML verwendet (keine `<div>` statt `<button>`)
+- [ ] Alt-Texte für alle informativen Bilder
+- [ ] Formular-Labels vorhanden und verknüpft
+
+### Bei Ausnahmen
+
+Kontrast-Ausnahmen müssen dokumentiert und begründet werden. Es muss ein Plan zur Behebung existieren.
+
+---
+
+## SEO Mindeststandard
+
+### Pflicht pro Seite
+
+- [ ] Eindeutiger `<title>` vorhanden
+- [ ] Meta-Description vorhanden
+- [ ] Korrekte Heading-Hierarchie (nur ein `h1`, dann `h2` > `h3`)
+- [ ] Open Graph Tags gesetzt
+- [ ] Alt-Texte für Bilder
+
+### Pflicht global
+
+- [ ] `robots.txt` vorhanden
+- [ ] Canonical URLs gesetzt (falls relevant)
+- [ ] Keine Blocking-Resources für Crawler
+
+---
+
+## Performance
+
+### Pflicht
+
+- [ ] Bilder optimiert (WebP/AVIF, responsive srcset)
+- [ ] Lazy Loading für Below-the-fold-Inhalte
+- [ ] Keine unnötigen Dependencies
+- [ ] Bundle-Größe im Budget (JS < 100kb gzip, CSS < 30kb gzip)
+
+### Empfohlen
+
+- [ ] Core Web Vitals im grünen Bereich (LCP < 2.5s, CLS < 0.1, INP < 200ms)
+
+---
+
+## Projektspezifikation
+
+### Pflicht
+
+- [ ] Alle Anforderungen aus `ProjectSpec.json` umgesetzt
+- [ ] Design entspricht `design_tokens.json` und `stylesheet.css`
+- [ ] Keine eigenmächtigen Design-Entscheidungen
+- [ ] CLIENT_OVERRIDES.md berücksichtigt (falls vorhanden)
+
+### Dokumentation
+
+- [ ] Änderungen in `generation_log.json` maschinell dokumentiert
+
+---
+
+## Browser-Kompatibilität
+
+Unterstützte Browser (letzte 2 Major-Versionen):
+
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari
+- [ ] Edge
+
+Bei bekannten Inkompatibilitäten: dokumentieren und Workaround bereitstellen.
+
+---
+
+## Schnell-Checkliste
+
+Vor Abschluss jeder Aufgabe durchgehen:
+
+```
+[ ] 1. npm run build erfolgreich?
+[ ] 2. Mobile (320px) geprüft?
+[ ] 3. Tablet (768px) geprüft?
+[ ] 4. Desktop (1024px+) geprüft?
+[ ] 5. Kontrast WCAG AA erfüllt?
+[ ] 6. Tastatur-Navigation funktioniert?
+[ ] 7. SEO-Basics vorhanden (title, description, h1)?
+[ ] 8. Anforderungen aus ProjectSpec erfüllt?
+[ ] 9. Kein Dead Code oder ungenutzte Dependencies?
+[ ] 10. generation_log.json aktualisiert?
+```
+
+---
+
+## Zusammenfassung
+
+> Erst wenn alle Checkboxen erfüllt sind, gilt eine Aufgabe als erledigt.
+> Keine Ausnahmen ohne explizite Dokumentation und Begründung.
+> Build-Fehler sind Blocker. Accessibility-Verstöße sind Blocker.

skills/SYSTEM_SKILLS.md

@@ -0,0 +1,214 @@
+# System Skills
+
+Verbindliche Regeln für die KI-gestützte Website-Generierung im Agentur-Kontext.
+
+---
+
+## Scope
+
+Diese Datei definiert den **harten Rahmen** für:
+- Arbeitsweise und Workflow
+- Code-Qualität und Repo-Konventionen
+- Source of Truth für Design und Anforderungen
+- Verbote und Pflichten
+
+**Geltungsbereich:** Gilt global für jedes Projekt. CLIENT_OVERRIDES.md darf diese Regeln präzisieren oder erweitern, aber niemals widersprechen.
+
+---
+
+## Read Order
+
+Die KI muss Dateien in folgender Reihenfolge lesen:
+
+1. `skills/SYSTEM_SKILLS.md` (diese Datei)
+2. `skills/UI_GUIDELINES.md`
+3. `skills/DEFINITION_OF_DONE.md`
+4. `skills/CLIENT_OVERRIDES.md` (falls vorhanden)
+5. `spec/ProjectSpec.json`
+6. `spec/design_tokens.json`
+7. `theme/stylesheet.css` / `theme/globals.css`
+
+Bei Konflikten gilt: **Globale Skills > Client Overrides**
+
+---
+
+## Non-Goals
+
+Diese Datei definiert **NICHT**:
+- Konkrete Design-Vorgaben (Farben, Layouts, Abstände)
+- UI-Templates oder vorgefertigte Komponenten
+- Visuelle Entscheidungen jeglicher Art
+- Landingpage-Strukturen oder Section-Vorlagen
+
+Design entsteht ausschließlich aus den Projekt-Specs, nicht aus diesen Skills.
+
+---
+
+## Source of Truth
+
+Das Design und die Anforderungen einer Website basieren ausschließlich auf:
+
+| Quelle | Inhalt |
+|--------|--------|
+| `spec/ProjectSpec.json` | Projektanforderungen, Ziele, Inhalte |
+| `spec/design_tokens.json` | Farben, Typografie, Spacing-System |
+| `theme/stylesheet.css` | Projektspezifische Styles |
+| `theme/globals.css` | Globale CSS-Variablen und Resets |
+
+**Regel:** Keine Design-Entscheidung ohne Grundlage in diesen Quellen.
+
+---
+
+## Verbote
+
+### Absolut verboten:
+- **KEINE** Templates oder vorgefertigten Layouts
+- **KEINE** Copy-Paste-Strukturen aus anderen Projekten
+- **KEINE** Boilerplate-Landingpages
+- **KEINE** Standard-Hero/Feature/CTA-Sections ohne Spec-Grundlage
+- **KEINE** eigenmächtigen Design-Entscheidungen
+- **KEINE** hardcodierten Farben, Größen oder Abstände
+- **KEINE** UI-Libraries (shadcn, MUI, Chakra, Radix, etc.)
+- **KEINE** CSS-Frameworks außer Tailwind (falls im Projekt konfiguriert)
+- **KEINE** inline Styles (außer dynamische Werte)
+- **KEINE** `!important` (außer dokumentierte Ausnahmen)
+- **KEINE** Secrets im Repository (nur .env, .env.local)
+
+### Daten und Secrets:
+- Sensible Daten gehören in `.env` / `.env.local`
+- `.env*` Dateien sind in `.gitignore`
+- API-Keys, Passwörter, Tokens niemals committen
+
+---
+
+## Arbeitsprozess
+
+Jede Aufgabe folgt diesem Ablauf:
+
+### 1. Lesen
+- `/skills` vollständig lesen
+- `/spec` vollständig lesen
+- Bestehenden Code verstehen
+
+### 2. Planen
+- Anforderungen analysieren
+- Struktur und Komponenten konzipieren
+- Abhängigkeiten identifizieren
+
+### 3. Implementieren
+- Code schreiben
+- Design-Tokens verwenden
+- Keine eigenmächtigen Entscheidungen
+
+### 4. Self-Check
+- `npm run build` ausführen
+- Gegen Definition of Done validieren
+- Responsive und Accessibility prüfen
+
+### 5. Dokumentieren
+- Änderungen in `generation_log.json` maschinell festhalten
+- Keine manuellen Einträge im Log
+
+---
+
+## Coding-Standards
+
+### TypeScript
+
+- **Strict Mode** ist Pflicht
+- Keine `any` Types
+- Explizite Typdefinitionen für Props und State
+- Keine Type-Assertions ohne Notwendigkeit
+- Strict null checks beachten
+
+```typescript
+// Korrekt
+interface ComponentProps {
+  title: string;
+  items: ReadonlyArray<Item>;
+  onSelect?: (item: Item) => void;
+}
+
+// Falsch
+const props: any = { ... }
+```
+
+### React / Next.js
+
+- Funktionale Komponenten
+- Server Components wo möglich
+- Client Components nur wenn nötig (`"use client"`)
+- Keine unnötigen `useEffect` / `useState`
+- Keine Over-Abstraktionen
+
+### CSS
+
+- CSS-Variablen aus `globals.css` verwenden
+- Tailwind für Utility-Klassen (falls konfiguriert)
+- Eigene Klassen für wiederverwendbare Patterns
+- Mobile-first Breakpoints
+
+```css
+.element {
+  color: var(--color-foreground);
+  padding: var(--spacing-md);
+}
+```
+
+### Allgemein
+
+- Lesbarkeit > Cleverness
+- Keine unnötigen Abstraktionen
+- Keine Over-Engineering
+- Konsistente Namenskonventionen
+- Keine auskommentierten Code-Blöcke
+- Keine `console.log` im Production-Code
+
+---
+
+## Pflichten
+
+### Performance
+
+- Core Web Vitals optimieren
+- Lazy Loading für Below-the-fold-Inhalte
+- Kritisches CSS inline
+- JavaScript-Bundle minimieren
+- Fonts optimieren (`display: swap`)
+- Bildformate: WebP/AVIF bevorzugen
+- Keine unnötigen Dependencies
+
+### SEO
+
+- Semantisches HTML (`header`, `main`, `nav`, `article`, `section`, `footer`)
+- Korrekte Heading-Hierarchie (`h1` > `h2` > `h3`)
+- Meta-Tags (`title`, `description`)
+- Open Graph Tags
+- Alt-Texte für alle Bilder
+- Strukturierte Daten wo sinnvoll
+
+### Mobile-First
+
+- Responsive Design ist Pflicht
+- Touch-Targets mindestens 44x44px
+- Keine horizontalen Scrollbars
+- Lesbare Schriftgrößen ohne Zoom
+
+---
+
+## Logging
+
+### generation_log.json
+
+- Nur maschinell befüllen
+- Keine manuellen Einträge
+- Dokumentiert: was wurde generiert, wann, welche Dateien
+- Dient der Nachvollziehbarkeit
+
+---
+
+## Zusammenfassung
+
+> Jede Website ist einzigartig. Design kommt aus den Specs, nicht aus dem Bauch.
+> Code ist sauber, typisiert und wartbar. Build muss laufen.
+> Diese Regeln sind nicht verhandelbar.

skills/UI_GUIDELINES.md

@@ -0,0 +1,299 @@
+# UI Guidelines
+
+Qualitätsregeln für Benutzeroberflächen. Keine Designvorgaben.
+
+---
+
+## Scope
+
+Diese Datei definiert **Qualitätsanforderungen** für:
+- Accessibility (Barrierefreiheit)
+- Responsive Design (Mobile-First)
+- Performance-Budgets
+- SEO-Grundlagen
+- GEO/AI-Search-Optimierung
+- Interaktionsqualität
+
+**Geltungsbereich:** Gilt global für jedes Projekt. Definiert WIE UI gebaut wird, nicht WIE sie aussieht.
+
+---
+
+## Read Order
+
+Diese Datei wird nach `SYSTEM_SKILLS.md` gelesen:
+
+1. `skills/SYSTEM_SKILLS.md`
+2. `skills/UI_GUIDELINES.md` (diese Datei)
+3. `skills/DEFINITION_OF_DONE.md`
+4. `skills/CLIENT_OVERRIDES.md`
+5. Projekt-Specs
+
+---
+
+## Non-Goals
+
+Diese Datei definiert **NICHT**:
+- Welche Farben verwendet werden (kommt aus Tokens)
+- Welche Schriftarten verwendet werden (kommt aus Tokens)
+- Welche Layouts oder Sections erstellt werden (kommt aus ProjectSpec)
+- Konkrete visuelle Gestaltung
+- UI-Templates oder Komponenten-Vorlagen
+
+**Regel:** Alle visuellen Entscheidungen kommen aus `design_tokens.json` und `stylesheet.css`.
+
+---
+
+## Accessibility (Barrierefreiheit)
+
+### WCAG 2.1 Level AA
+
+Jede UI muss mindestens WCAG 2.1 Level AA erfüllen:
+
+| Anforderung | Kriterium |
+|-------------|-----------|
+| Kontrast (normaler Text) | mindestens 4.5:1 |
+| Kontrast (großer Text) | mindestens 3:1 |
+| Kontrast (UI-Elemente) | mindestens 3:1 |
+| Fokus-Indikator | sichtbar für alle interaktiven Elemente |
+| Tastatur-Navigation | vollständig ohne Maus bedienbar |
+| Screen Reader | alle Inhalte zugänglich |
+
+### Semantisches HTML
+
+```html
+<!-- Korrekt -->
+<button type="button">Aktion ausführen</button>
+<a href="/kontakt">Zum Kontaktformular</a>
+<nav aria-label="Hauptnavigation">...</nav>
+
+<!-- Falsch -->
+<div onclick="...">Aktion ausführen</div>
+<span class="link">Zum Kontaktformular</span>
+<div class="nav">...</div>
+```
+
+### ARIA-Attribute
+
+- ARIA nur verwenden, wenn natives HTML nicht ausreicht
+- `aria-label` für Icons ohne sichtbaren Text
+- `aria-expanded`, `aria-hidden` für dynamische Inhalte
+- `aria-live` für dynamische Updates (z.B. Fehlermeldungen)
+- `role` nur wenn semantisches HTML keine Option ist
+
+### Formulare
+
+- Jedes Eingabefeld braucht ein sichtbares `<label>`
+- Fehlermeldungen sind klar, hilfreich und programmatisch verknüpft
+- Pflichtfelder sind gekennzeichnet (`aria-required`)
+- Validierung sowohl visuell als auch für Screenreader
+- Autofill-Attribute (`autocomplete`) wo sinnvoll
+
+### Nicht nur Farbe
+
+- Informationen nie nur durch Farbe vermitteln
+- Zusätzliche Indikatoren: Icons, Text, Muster, Unterstreichungen
+
+---
+
+## Responsive Design
+
+### Mobile-First Pflicht
+
+Basis-Styles gelten für Mobile. Erweiterungen für größere Screens:
+
+```css
+/* Basis: Mobile (< 640px) */
+.element {
+  flex-direction: column;
+  padding: var(--spacing-sm);
+}
+
+/* Tablet und größer */
+@media (min-width: 768px) {
+  .element {
+    flex-direction: row;
+    padding: var(--spacing-md);
+  }
+}
+```
+
+### Breakpoints
+
+Breakpoints aus `design_tokens.json` verwenden:
+
+| Token | Wert | Gerät |
+|-------|------|-------|
+| `sm` | 640px | Große Smartphones |
+| `md` | 768px | Tablets |
+| `lg` | 1024px | Kleine Laptops |
+| `xl` | 1280px | Desktop |
+| `2xl` | 1536px | Große Screens |
+
+### Prüfpflicht
+
+- Minimum: 320px (kleine Smartphones)
+- Maximum: unbegrenzt (fluid bis Container-Max)
+- Keine horizontalen Scrollbars
+- Keine abgeschnittenen Inhalte
+- Touch-Targets: mindestens 44x44px
+
+### Fluid Typography
+
+Schriftgrößen skalieren responsiv (wenn in Tokens definiert):
+
+```css
+font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
+```
+
+---
+
+## SEO Basics
+
+### Pflicht-Elemente pro Seite
+
+- [ ] Eindeutiger `<title>` (50-60 Zeichen)
+- [ ] Meta-Description (150-160 Zeichen)
+- [ ] Korrekte Heading-Hierarchie (`h1` > `h2` > `h3`, nur ein `h1` pro Seite)
+- [ ] Alt-Texte für alle informativen Bilder
+- [ ] Open Graph Tags (`og:title`, `og:description`, `og:image`)
+- [ ] Canonical URL (bei Duplicate Content)
+
+### Strukturierte Inhalte
+
+- Semantische HTML-Elemente verwenden
+- Strukturierte Daten (JSON-LD) wo sinnvoll:
+  - Organization
+  - LocalBusiness
+  - FAQ
+  - BreadcrumbList
+  - Article
+
+### Technisches SEO
+
+- Sprechende URLs
+- `robots.txt` vorhanden
+- `sitemap.xml` generiert
+- Keine Duplicate Content ohne Canonical
+- Keine Blocking-Resources im Critical Path
+
+---
+
+## GEO / AI-Search-Optimierung
+
+### Klare Informationsarchitektur
+
+- Prägnante, gut strukturierte Abschnitte
+- Klare Überschriften, die den Inhalt beschreiben
+- Faktenbasierte, zitierbare Aussagen
+- Keine Marketing-Floskeln ohne Substanz
+
+### FAQ wo sinnvoll
+
+- FAQ-Schema für häufige Fragen
+- Klare Frage-Antwort-Struktur
+- Direkte, hilfreiche Antworten
+
+### Zitierbarkeit
+
+- Unique Content mit klarem Mehrwert
+- Quellenangaben wo relevant
+- Autorenschaft und Expertise zeigen (E-E-A-T)
+
+---
+
+## Performance Budget
+
+### Core Web Vitals Ziele
+
+| Metrik | Ziel | Beschreibung |
+|--------|------|--------------|
+| LCP | < 2.5s | Largest Contentful Paint |
+| INP | < 200ms | Interaction to Next Paint |
+| CLS | < 0.1 | Cumulative Layout Shift |
+
+### Asset-Limits
+
+| Asset-Typ | Maximum |
+|-----------|---------|
+| JavaScript Bundle (gzip) | < 100kb |
+| CSS Bundle (gzip) | < 30kb |
+| Einzelbild | < 200kb |
+| Gesamte Seite | < 1.5MB |
+
+### Optimierungspflichten
+
+- Bilder: WebP/AVIF, responsive `srcset`, Lazy Loading
+- Fonts: Subset, `display: swap`, Preload für kritische Fonts
+- JavaScript: Code-Splitting, Tree-Shaking, defer/async
+- CSS: Kritisches CSS inline, Rest async laden
+
+---
+
+## Interaktionen
+
+### Feedback-Pflicht
+
+- Hover-States für alle klickbaren Elemente
+- Focus-States sichtbar und deutlich
+- Loading-States für asynchrone Aktionen
+- Erfolgs- und Fehlermeldungen klar kommunizieren
+
+### Animationen
+
+- Subtil und zweckmäßig (nicht dekorativ)
+- `prefers-reduced-motion` respektieren
+- UI-Feedback-Animationen < 300ms
+- Keine automatisch startenden Videos/Animationen
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## Typografie (Qualität, nicht Design)
+
+### Lesbarkeit
+
+- Zeilenlänge: 45-75 Zeichen optimal
+- Zeilenabstand: 1.4-1.6 für Fließtext
+- Ausreichende Absatzabstände
+
+### Hierarchie
+
+- Klare visuelle Hierarchie durch Größen/Gewichte
+- Konsistente Heading-Levels
+- Logische Informationsstruktur
+
+**Hinweis:** Konkrete Schriftarten, -größen und -farben kommen aus `design_tokens.json`.
+
+---
+
+## Farben (Qualität, nicht Design)
+
+### Kontrastprüfung
+
+Alle Farbkombinationen müssen geprüft werden:
+- Tool: WebAIM Contrast Checker oder ähnlich
+- Dokumentierte Ausnahmen sind möglich, aber selten
+
+### Herkunft
+
+- Alle Farben kommen aus `design_tokens.json` oder `stylesheet.css`
+- Keine hardcodierten Hex/RGB-Werte im Code
+- CSS-Variablen verwenden
+
+---
+
+## Zusammenfassung
+
+> UI muss zugänglich, responsive, performant und suchmaschinenoptimiert sein.
+> Diese Guidelines definieren Qualitätsstandards, nicht visuelles Design.
+> Design-Entscheidungen kommen aus den Projekt-Specs.

spec/ProjectSpec.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "./ProjectSpec.schema.json",
+  "meta": {
+    "projectName": "",
+    "client": "",
+    "version": "1.0.0",
+    "createdAt": "",
+    "updatedAt": ""
+  },
+  "brand": {
+    "name": "",
+    "tagline": "",
+    "description": "",
+    "tone": [],
+    "values": []
+  },
+  "target": {
+    "audience": [],
+    "goals": [],
+    "competitors": []
+  },
+  "pages": [],
+  "features": [],
+  "integrations": [],
+  "seo": {
+    "primaryKeywords": [],
+    "secondaryKeywords": [],
+    "localSeo": {
+      "enabled": false,
+      "regions": []
+    }
+  },
+  "technical": {
+    "hosting": "",
+    "domain": "",
+    "analytics": [],
+    "thirdParty": []
+  },
+  "content": {
+    "languages": ["de"],
+    "defaultLanguage": "de",
+    "contentSources": []
+  },
+  "timeline": {
+    "kickoff": "",
+    "milestones": [],
+    "launch": ""
+  },
+  "notes": ""
+}

spec/design_tokens.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "./design_tokens.schema.json",
+  "colors": {
+    "primary": "#000000",
+    "secondary": "#666666",
+    "accent": "#0066cc",
+    "background": "#ffffff",
+    "foreground": "#000000",
+    "muted": "#f5f5f5",
+    "border": "#e5e5e5",
+    "error": "#dc2626",
+    "success": "#16a34a",
+    "warning": "#ca8a04"
+  },
+  "typography": {
+    "fontFamilies": {
+      "sans": "system-ui, -apple-system, sans-serif",
+      "serif": "Georgia, serif",
+      "mono": "ui-monospace, monospace"
+    },
+    "fontSizes": {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "base": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem"
+    },
+    "fontWeights": {
+      "normal": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
+    },
+    "lineHeights": {
+      "tight": 1.25,
+      "normal": 1.5,
+      "relaxed": 1.75
+    }
+  },
+  "spacing": {
+    "xs": "0.25rem",
+    "sm": "0.5rem",
+    "md": "1rem",
+    "lg": "1.5rem",
+    "xl": "2rem",
+    "2xl": "3rem",
+    "3xl": "4rem"
+  },
+  "borderRadius": {
+    "none": "0",
+    "sm": "0.25rem",
+    "md": "0.5rem",
+    "lg": "1rem",
+    "full": "9999px"
+  },
+  "shadows": {
+    "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    "md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+    "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+    "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
+  },
+  "breakpoints": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  },
+  "transitions": {
+    "duration": {
+      "fast": "150ms",
+      "normal": "300ms",
+      "slow": "500ms"
+    },
+    "easing": {
+      "default": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "in": "cubic-bezier(0.4, 0, 1, 1)",
+      "out": "cubic-bezier(0, 0, 0.2, 1)",
+      "inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
+    }
+  },
+  "zIndex": {
+    "base": 0,
+    "dropdown": 100,
+    "sticky": 200,
+    "fixed": 300,
+    "modal": 400,
+    "popover": 500,
+    "tooltip": 600
+  }
+}

theme/globals.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "./stylesheet.css";
+
+/*
+ * CSS Variables - Single Source of Truth
+ * These variables are placeholders. Override them per project via design_tokens.json
+ */
+
+:root {
+  /* Colors - Placeholders */
+  --color-primary: #000000;
+  --color-secondary: #666666;
+  --color-accent: #0066cc;
+  --color-background: #ffffff;
+  --color-foreground: #000000;
+  --color-muted: #f5f5f5;
+  --color-border: #e5e5e5;
+  --color-error: #dc2626;
+  --color-success: #16a34a;
+  --color-warning: #ca8a04;
+
+  /* Typography - Placeholders */
+  --font-sans: system-ui, -apple-system, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: ui-monospace, monospace;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Spacing - Placeholders */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+
+  /* Border Radius - Placeholders */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 1rem;
+  --radius-full: 9999px;
+
+  /* Shadows - Placeholders */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Transitions - Placeholders */
+  --duration-fast: 150ms;
+  --duration-normal: 300ms;
+  --duration-slow: 500ms;
+  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Z-Index Scale */
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-fixed: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-tooltip: 600;
+}
+
+/*
+ * Base Resets
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-foreground);
+  background-color: var(--color-background);
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font: inherit;
+  cursor: pointer;
+}

theme/stylesheet.css

@@ -0,0 +1,53 @@
+/*
+ * Stylesheet
+ *
+ * Project-specific styles go here.
+ * This file is imported by globals.css.
+ *
+ * Structure:
+ * 1. Component Styles
+ * 2. Layout Styles
+ * 3. Page-specific Styles
+ * 4. Utility Classes
+ * 5. Animations
+ */
+
+/* ==========================================================================
+   1. Component Styles
+   ========================================================================== */
+
+/* Components are added per project */
+
+/* ==========================================================================
+   2. Layout Styles
+   ========================================================================== */
+
+/* Layout styles are added per project */
+
+/* ==========================================================================
+   3. Page-specific Styles
+   ========================================================================== */
+
+/* Page styles are added per project */
+
+/* ==========================================================================
+   4. Utility Classes
+   ========================================================================== */
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ==========================================================================
+   5. Animations
+   ========================================================================== */
+
+/* Animations are added per project */

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}