test-2026-02-05-v1/READ_FIRST.md

READ FIRST

Pflicht-Lesereihenfolge

Bevor an diesem Projekt gearbeitet wird, müssen folgende Dateien gelesen und verstanden werden:

1. skills/SYSTEM_SKILLS.md – Grundregeln und Verbote
2. skills/UI_GUIDELINES.md – Qualitätsstandards für UI
3. skills/DEFINITION_OF_DONE.md – Abnahmekriterien
4. spec/ProjectSpec.json – Projektspezifikation
5. spec/design_tokens.json – Design-Token-Definitionen
6. prompts/master_prompt.md – Workflow-Anleitung

---

Entwicklungswarnung

Build und Dev dürfen NICHT gleichzeitig laufen.

Wenn npm run build und npm run dev parallel ausgeführt werden, verliert Next.js CSS-Referenzen. Das führt zu fehlendem Styling und instabilem Hot-Reload.

Lösung bei Problemen:

npm run clean

Dieser Befehl löscht den .next Cache und stellt einen sauberen Zustand her.

---

Inline-Styling ist verboten

style={{ ... }} ist im gesamten Projekt verboten. Alle Styles müssen über:

• theme/globals.css – CSS Variables (:root)
• theme/stylesheet.css – Typografie & strukturelle Regeln
• spec/design_tokens.json – Token-Definitionen

gesteuert werden.

---

Architektur-Überblick

components/
├── layout/
│   ├── Container.tsx   → Max-Width, horizontales Padding, responsive
│   └── Section.tsx     → Vertikaler Rhythmus (Spacing)
└── ui/
    ├── Button.tsx      → Varianten: primary / secondary / ghost
    └── Card.tsx        → Neutraler Wrapper (Radius, Border, Shadow)

Diese Komponenten verwenden ausschließlich CSS Variables aus globals.css. Sie diktieren KEIN Design – sie erzwingen Struktur.