57 lines
1.6 KiB
Markdown
57 lines
1.6 KiB
Markdown
# READ FIRST
|
||
|
||
## Pflicht-Lesereihenfolge
|
||
|
||
Bevor an diesem Projekt gearbeitet wird, müssen folgende Dateien gelesen und verstanden werden:
|
||
|
||
1. `skills/SYSTEM_SKILLS.md` – Grundregeln und Verbote
|
||
2. `skills/UI_GUIDELINES.md` – Qualitätsstandards für UI
|
||
3. `skills/DEFINITION_OF_DONE.md` – Abnahmekriterien
|
||
4. `spec/ProjectSpec.json` – Projektspezifikation
|
||
5. `spec/design_tokens.json` – Design-Token-Definitionen
|
||
6. `prompts/master_prompt.md` – Workflow-Anleitung
|
||
|
||
---
|
||
|
||
## Entwicklungswarnung
|
||
|
||
> **Build und Dev dürfen NICHT gleichzeitig laufen.**
|
||
>
|
||
> Wenn `npm run build` und `npm run dev` parallel ausgeführt werden, verliert Next.js CSS-Referenzen.
|
||
> Das führt zu fehlendem Styling und instabilem Hot-Reload.
|
||
>
|
||
> **Lösung bei Problemen:**
|
||
> ```bash
|
||
> npm run clean
|
||
> ```
|
||
> Dieser Befehl löscht den `.next` Cache und stellt einen sauberen Zustand her.
|
||
|
||
---
|
||
|
||
## Inline-Styling ist verboten
|
||
|
||
`style={{ ... }}` ist im gesamten Projekt verboten. Alle Styles müssen über:
|
||
|
||
- `theme/globals.css` – CSS Variables (`:root`)
|
||
- `theme/stylesheet.css` – Typografie & strukturelle Regeln
|
||
- `spec/design_tokens.json` – Token-Definitionen
|
||
|
||
gesteuert werden.
|
||
|
||
---
|
||
|
||
## Architektur-Überblick
|
||
|
||
```
|
||
components/
|
||
├── layout/
|
||
│ ├── Container.tsx → Max-Width, horizontales Padding, responsive
|
||
│ └── Section.tsx → Vertikaler Rhythmus (Spacing)
|
||
└── ui/
|
||
├── Button.tsx → Varianten: primary / secondary / ghost
|
||
└── Card.tsx → Neutraler Wrapper (Radius, Border, Shadow)
|
||
```
|
||
|
||
Diese Komponenten verwenden ausschließlich CSS Variables aus `globals.css`.
|
||
Sie diktieren KEIN Design – sie erzwingen Struktur.
|