Teil 7/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
Lies vorher CLAUDE.md und die dort verlinkten Dokumente, die für diese Aufgabe relevant sind
(mindestens docs/architektur.md und docs/redaktion.md). Halte dich an Coding und Documentation
Convention. Erst Plan vorstellen, auf mein OK warten, dann umsetzen.
Design-Leitplanken für alle Design-Aufgaben:
- Bestehende Tokens in wwwroot/app.css erweitern, keine Hardcode-Farben; jede neue Farbe mit
Dark-Mode-Variante im bestehenden prefers-color-scheme-Block; WCAG AA.
- Keine Hover-Bewegung (transform/translate) – bewusst entfernt in c67c71e. Hover = Farbe,
Schatten, Rahmen.
- Kommentarstil von app.css beibehalten (erklärt das Warum).
- Layout muss mit beliebigem Redaktions-Markdown und leeren/fehlenden Feldern funktionieren.
- UI-Texte deutsch, ohne Anglizismen.
- Tests: xUnit + Shouldly. Reine Logik als Unit-Test; Darstellung über RouteSmokeTests
(HTML der gerenderten Route prüfen) gegen den PocketBaseFixture. Keine neuen Test-Pakete
(bUnit, Playwright …) ohne Begründung und Rückfrage.
- KEINE Änderung am PocketBase-Datenmodell: keine neuen Collections, Felder, Select-Werte
oder Regeln, collections_schema.json bleibt unverändert. Grund: Es gibt noch keinen Weg,
Schemaänderungen nach Produktion zu übertragen. Wenn eine Lösung nur mit Schemaänderung
ginge: anhalten, Alternative ohne Schemaänderung vorschlagen und die Schema-Variante nur als
Notiz für später ausgeben. Neue Records im Dev-Seed und im Fixture sind erlaubt.
Aufgabe: Feinschliff.
Beitragsseite (Features/Posts/PostDetail): Titel als h1 (aktuell h2; genau ein h1 pro Seite),
Datum als Meta-Zeile darüber, erster Absatz als Einleitung (größer, weicher Farbton), Lesebreite
~68ch, line-height 1.75. „← Alle Beiträge“ als dezenter Button; am Ende Navigation „Vorheriger /
Nächster Beitrag“.
Barrierefreiheit global: einheitliches :focus-visible (Outline in Akzentfarbe mit Abstand) für
Links, Buttons, summary und Karten; Skip-Link „Zum Inhalt springen“ auf main; alle Farbpaare
hell/dunkel gegen WCAG AA prüfen und Ergebnis kurz als Kommentar im Token-Block notieren. Falls
irgendwo Animationen existieren: prefers-reduced-motion respektieren.
Tests: Smoke: Beitragsseite hat genau ein h1 mit dem Titel; Vor/Zurück korrekt am Anfang und Ende;
jede Route enthält den Skip-Link.
Teil 7/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
```
Lies vorher CLAUDE.md und die dort verlinkten Dokumente, die für diese Aufgabe relevant sind
(mindestens docs/architektur.md und docs/redaktion.md). Halte dich an Coding und Documentation
Convention. Erst Plan vorstellen, auf mein OK warten, dann umsetzen.
Design-Leitplanken für alle Design-Aufgaben:
- Bestehende Tokens in wwwroot/app.css erweitern, keine Hardcode-Farben; jede neue Farbe mit
Dark-Mode-Variante im bestehenden prefers-color-scheme-Block; WCAG AA.
- Keine Hover-Bewegung (transform/translate) – bewusst entfernt in c67c71e. Hover = Farbe,
Schatten, Rahmen.
- Kommentarstil von app.css beibehalten (erklärt das Warum).
- Layout muss mit beliebigem Redaktions-Markdown und leeren/fehlenden Feldern funktionieren.
- UI-Texte deutsch, ohne Anglizismen.
- Tests: xUnit + Shouldly. Reine Logik als Unit-Test; Darstellung über RouteSmokeTests
(HTML der gerenderten Route prüfen) gegen den PocketBaseFixture. Keine neuen Test-Pakete
(bUnit, Playwright …) ohne Begründung und Rückfrage.
- KEINE Änderung am PocketBase-Datenmodell: keine neuen Collections, Felder, Select-Werte
oder Regeln, collections_schema.json bleibt unverändert. Grund: Es gibt noch keinen Weg,
Schemaänderungen nach Produktion zu übertragen. Wenn eine Lösung nur mit Schemaänderung
ginge: anhalten, Alternative ohne Schemaänderung vorschlagen und die Schema-Variante nur als
Notiz für später ausgeben. Neue Records im Dev-Seed und im Fixture sind erlaubt.
Aufgabe: Feinschliff.
Beitragsseite (Features/Posts/PostDetail): Titel als h1 (aktuell h2; genau ein h1 pro Seite),
Datum als Meta-Zeile darüber, erster Absatz als Einleitung (größer, weicher Farbton), Lesebreite
~68ch, line-height 1.75. „← Alle Beiträge“ als dezenter Button; am Ende Navigation „Vorheriger /
Nächster Beitrag“.
Barrierefreiheit global: einheitliches :focus-visible (Outline in Akzentfarbe mit Abstand) für
Links, Buttons, summary und Karten; Skip-Link „Zum Inhalt springen“ auf main; alle Farbpaare
hell/dunkel gegen WCAG AA prüfen und Ergebnis kurz als Kommentar im Token-Block notieren. Falls
irgendwo Animationen existieren: prefers-reduced-motion respektieren.
Tests: Smoke: Beitragsseite hat genau ein h1 mit dem Titel; Vor/Zurück korrekt am Anfang und Ende;
jede Route enthält den Skip-Link.
```
Gehört zu #37.
Tom
added this to the Elternbeirat-Website milestone 2026-10-01 11:06:50 +02:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Teil 7/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
Gehört zu #37.