Initial commit
This commit is contained in:
1elle1
21
.env.example
Normal file
21
.env.example
Normal file
@@ -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=
|
||||||
42
.gitignore
vendored
Normal file
42
.gitignore
vendored
Normal file
@@ -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
|
||||||
135
README.md
Normal file
135
README.md
Normal file
@@ -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.
|
||||||
54
SECURITY.md
Normal file
54
SECURITY.md
Normal file
@@ -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.
|
||||||
29
app/layout.tsx
Normal file
29
app/layout.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
app/page.tsx
Normal file
7
app/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<p>Ready</p>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
45
assets/README.md
Normal file
45
assets/README.md
Normal file
@@ -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
|
||||||
27
content/README.md
Normal file
27
content/README.md
Normal file
@@ -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
|
||||||
47
docker/Dockerfile
Normal file
47
docker/Dockerfile
Normal file
@@ -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"]
|
||||||
28
docker/docker-compose.yml
Normal file
28
docker/docker-compose.yml
Normal file
@@ -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
|
||||||
33
gitea-actions.yml
Normal file
33
gitea-actions.yml
Normal file
@@ -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
|
||||||
4
meta/generation_log.json
Normal file
4
meta/generation_log.json
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"version": "1.0.0",
|
||||||
|
"entries": []
|
||||||
|
}
|
||||||
11
next.config.js
Normal file
11
next.config.js
Normal file
@@ -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;
|
||||||
1737
package-lock.json
generated
Normal file
1737
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
package.json
Normal file
31
package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
postcss.config.mjs
Normal file
7
postcss.config.mjs
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
107
prompts/master_prompt.md
Normal file
107
prompts/master_prompt.md
Normal file
@@ -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
|
||||||
0
public/.gitkeep
Normal file
0
public/.gitkeep
Normal file
208
skills/CLIENT_OVERRIDES.md
Normal file
208
skills/CLIENT_OVERRIDES.md
Normal file
@@ -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.
|
||||||
199
skills/DEFINITION_OF_DONE.md
Normal file
199
skills/DEFINITION_OF_DONE.md
Normal file
@@ -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.
|
||||||
214
skills/SYSTEM_SKILLS.md
Normal file
214
skills/SYSTEM_SKILLS.md
Normal file
@@ -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.
|
||||||
299
skills/UI_GUIDELINES.md
Normal file
299
skills/UI_GUIDELINES.md
Normal file
@@ -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.
|
||||||
50
spec/ProjectSpec.json
Normal file
50
spec/ProjectSpec.json
Normal file
@@ -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": ""
|
||||||
|
}
|
||||||
95
spec/design_tokens.json
Normal file
95
spec/design_tokens.json
Normal file
@@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
0
src/.gitkeep
Normal file
0
src/.gitkeep
Normal file
125
theme/globals.css
Normal file
125
theme/globals.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
53
theme/stylesheet.css
Normal file
53
theme/stylesheet.css
Normal file
@@ -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 */
|
||||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
@@ -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"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user