docs(quick-260329-u1d): Kindgerechte Erklärung auf Waldscreen

2026-03-29 21:41:03 +02:00
parent b19c9ccd0c
commit 21ad236c7b
1 changed files with 101 additions and 0 deletions
@@ -0,0 +1,101 @@
+---
+phase: quick
+plan: 260329-u1d
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - index.html
+  - src/styles/main.css
+autonomous: true
+requirements: []
+must_haves:
+  truths:
+    - "Kind sieht auf dem Waldscreen einen einladenden, motivierenden Text"
+    - "Text erklaert kindgerecht dass man Buchstaben ueben kann und neue Bilder im Wald erscheinen"
+  artifacts:
+    - path: "index.html"
+      provides: "Erklaerungstext-Element im forest screen"
+      contains: "forest__intro"
+    - path: "src/styles/main.css"
+      provides: "Styling fuer den Erklaerungstext"
+      contains: "forest__intro"
+  key_links: []
+---
+
+<objective>
+Kindgerechte Erklaerung auf dem Waldscreen (Forest-Ansicht) hinzufuegen.
+
+Purpose: Das Kind soll beim Oeffnen des Waldscreens sofort verstehen, was es hier tun kann — Buchstaben ueben und dabei den Wald wachsen lassen. Der Text soll einladend und motivierend sein, passend zum Aquarell-/Pastellstil.
+Output: Sichtbarer Erklaerungstext zwischen Titel und Waldszene auf dem Forest-Screen.
+</objective>
+
+<execution_context>
+@$HOME/.claude/get-shit-done/workflows/execute-plan.md
+@$HOME/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@index.html (forest screen section, lines 30-66)
+@src/styles/main.css (forest styles)
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Erklaerungstext in HTML und CSS hinzufuegen</name>
+  <files>index.html, src/styles/main.css</files>
+  <action>
+1. In index.html: Zwischen dem forest__title h1 (Zeile 32) und dem forest-greeting div (Zeile 33) ein neues p-Element einfuegen:
+
+```html
+<p class="forest__intro">
+  Willkommen in deinem Zauberwald! Waehle eine Stufe und uebe verschiedene Buchstaben auf der Tastatur. Jedes Mal, wenn du eine Uebung schaffst, waechst dein Wald — und ein neues Bild erscheint! Was wohl als Naechstes kommt?
+</p>
+```
+
+Der Text soll:
+- Kindgerecht sein (7 Jahre, einfache Saetze)
+- Erklaeren dass man Buchstaben ueben kann (Stufenwahl)
+- Erklaeren dass mit jeder Uebung neue Bilder im Wald erscheinen
+- Neugier wecken ("Was wohl als Naechstes kommt?")
+- Keine Umlaute verwenden (Codebase-Konvention: ue/oe/ae Transliteration)
+
+2. In src/styles/main.css: Nach dem .forest__title Block (Zeile 188) einen neuen Block einfuegen:
+
+```css
+.forest__intro {
+  font-family: "Nunito", sans-serif;
+  font-size: 1.1rem;
+  color: var(--text-dark);
+  text-align: center;
+  max-width: 480px;
+  line-height: 1.6;
+  margin: 0 auto 1.5rem;
+  opacity: 0.85;
+}
+```
+
+Styling passend zum Pastellstil: Nunito Font (wie andere Body-Texte), sanfte Opacity, zentriert, angenehme Zeilenhoehe fuer Lesbarkeit.
+  </action>
+  <verify>
+    <automated>grep -q "forest__intro" index.html && grep -q "forest__intro" src/styles/main.css && echo "PASS" || echo "FAIL"</automated>
+  </verify>
+  <done>Auf dem Waldscreen erscheint zwischen Titel und Waldszene ein kindgerechter, motivierender Erklaerungstext. Der Text erklaert Buchstabenuebungen und das Wachsen des Waldes.</done>
+</task>
+
+</tasks>
+
+<verification>
+- `grep "forest__intro" index.html` zeigt das p-Element
+- `grep "forest__intro" src/styles/main.css` zeigt das Styling
+- `npx vite build` kompiliert ohne Fehler
+</verification>
+
+<success_criteria>
+Auf dem Waldscreen ist ein kindgerechter Erklaerungstext sichtbar, der dem Kind (7 Jahre) erklaert, dass es Buchstaben ueben kann und mit jeder Uebung neue Bilder im Wald erscheinen.
+</success_criteria>
+
+<output>
+After completion, create `.planning/quick/260329-u1d-kindgerechte-erkl-rung-auf-waldscreen-hi/260329-u1d-SUMMARY.md`
+</output>