red-proto 0.12.0 → 0.13.2

package/README.md

@@ -4,19 +4,9 @@ Ein KI-gestütztes Product Development Framework für [Claude Code](https://clau
 
 ---
 
-## Workflow
-
-![red·proto Workflow](docs/workflow.svg)
-
-> Maschinenlesbare BPMN 2.0 Datei: [workflow.bpmn](docs/workflow.bpmn) – öffenbar in [Camunda Modeler](https://camunda.com/download/modeler/) oder [bpmn.io](https://bpmn.io)
-
-**Faustregel:** Alles bis `/red:proto-flows` machst du einmal für dein Projekt. Ab `/red:proto-ux` wiederholst du den Loop für jedes Feature. `proto-dev` und `proto-qa` laufen in **getrennten Sessions** – `proto-dev` schreibt am Ende ein Handoff-File, das `proto-qa` in der neuen Session einliest.
-
----
-
 ## Was ist das?
 
-Eine Sammlung von Claude Code Commands und Agents, die eine vollständige Produktentwicklungs-Pipeline abbilden. Du arbeitest mit natürlicher Sprache – Claude führt die Pipeline aus, du triffst die Entscheidungen.
+Eine Sammlung von Claude Code Commands, die eine vollständige Produktentwicklungs-Pipeline abbilden. Du beschreibst deine Idee in natürlicher Sprache – Claude führt die Pipeline aus, du triffst die Entscheidungen.
 
 ```
 /red:proto-workflow     → Nach jeder Pause: zeigt exakt wo du stehst und was als nächstes zu tun ist
@@ -37,7 +27,51 @@ dann pro Feature (Build-Loop bis QA grün):
                           └── Bugs? → neue Session → /red:proto-dev → /red:proto-qa
 ```
 
-Jeder Command ist eigenständig – du kannst an jedem Punkt einsteigen oder aufhören. Die Commands bauen aber aufeinander auf: jeder liest den Output des vorherigen und ergänzt die gemeinsamen Artefakte.
+Jeder Command ist eigenständig – du kannst an jedem Punkt einsteigen oder aufhören. Die Commands bauen aufeinander auf: jeder liest den Output des vorherigen und ergänzt die gemeinsamen Artefakte.
+
+### Workflow
+
+```mermaid
+flowchart TD
+    A([Idee]) --> B
+
+    subgraph setup["📐 Einmalig pro Projekt"]
+        B["/red:proto-sparring\nIdee → PRD"]
+        B --> C["/red:proto-dev-setup\nTech-Stack + GitHub"]
+        C --> D{Research?}
+        D -->|optional| E["/red:proto-research\nPersonas + Problem Statement"]
+        D -->|überspringen| F
+        E --> F["/red:proto-requirements\nSpecs für alle Features"]
+        F --> G["/red:proto-flows\nScreen-Inventar + Transitions"]
+    end
+
+    subgraph feature["🔁 Pro Feature wiederholen"]
+        G --> H["/red:proto-ux\nUX-Entscheidungen"]
+        H --> I["/red:proto-architect\nTech-Design + Security + Tests"]
+        I --> J
+
+        subgraph session1["Session 1"]
+            J["/red:proto-dev\nImplementierung"]
+            J --> J2["Handoff schreiben\ncontext/FEAT-x-dev-handoff.md"]
+        end
+
+        subgraph session2["Session 2 (neu starten)"]
+            J2 --> K["/red:proto-qa\nTests + Bugs"]
+        end
+
+        K --> L{Bugs?}
+        L -->|Critical / High| J
+        L -->|Grün ✅| M([Production-Ready])
+    end
+
+    M --> N{Weitere Features?}
+    N -->|ja| H
+    N -->|nein| O([Release 🎉])
+
+    P(["/red:proto-workflow\nOrientierung jederzeit"]) -.->|wo stehe ich?| feature
+```
+
+**Faustregel:** Alles bis `/red:proto-flows` machst du einmal für dein Projekt. Ab `/red:proto-ux` wiederholst du den Loop für jedes Feature. `proto-dev` und `proto-qa` laufen in **getrennten Sessions** – `proto-dev` schreibt am Ende ein Handoff-File, das `proto-qa` in der neuen Session einliest.
 
 ---
 
@@ -115,17 +149,6 @@ Dann in Claude Code:
 
 ---
 
-### Kurzübersicht: Was macht was?
-
-| Befehl | Wann | Was passiert |
-|--------|------|--------------|
-| `npx red-proto@latest` | Einmalig pro Computer | Installiert Commands in `~/.claude/` (global) oder `./.claude/` (lokal) |
-| `/red:proto` | Einmalig pro Projekt | Legt Projektstruktur an, kopiert Design System |
-| `/red:proto-sparring` | Start jedes Projekts | Erste Anlaufstelle – Idee zu PRD |
-| `/red:proto-workflow` | Nach jeder Session-Pause | Zeigt wo du stehst, was als nächstes kommt |
-
----
-
 ## Was wird installiert?
 
 Nach dem Setup hat dein Projekt folgende Struktur:

package/commands/red:proto-architect.md

@@ -134,27 +134,11 @@ AskUserQuestion({ questions: [{ question: "Passt das technische Design?", header
 ], multiSelect: false }] })
 ```
 
-Nach Approval im Chat: FEAT-[X].md erweitern (Abschnitt `## 3. Technisches Design` schreiben), YAML-Frontmatter auf `status: draft` setzen.
-
-Dann dem User sagen:
-```
-📝 Draft gespeichert: features/FEAT-[X]-[name].md
-
-Öffne die Datei, prüfe das technische Design und bearbeite es direkt falls nötig.
-
-→ Schreib `weiter` wenn alles passt
-→ Oder sag mir direkt was geändert werden soll
-```
+Nach Approval: FEAT-[X].md um Abschnitt `## 3. Technisches Design` erweitern, YAML `status: draft` setzen. User per CONVENTIONS.md §Resume Pattern informieren.
 
 ## Phase 4b: Finalisieren
 
-Nach `weiter` oder Korrekturen im Chat:
-
-1. FEAT-[X].md einlesen, Korrekturen übernehmen
-2. YAML-Frontmatter auf `status: approved` setzen
-3. `## Fortschritt` → `Status: Approved`, `Aktueller Schritt: Tech` setzen
-4. STATUS.md aktualisieren (Tech-Spalte auf ✓ setzen)
-5. Commit-Zusammenfassung zeigen und committen:
+Nach `weiter` oder Korrekturen: FEAT-[X].md einlesen, Korrekturen übernehmen, `status: approved` + `## Fortschritt → Status: Approved, Aktueller Schritt: Tech` setzen. STATUS.md (Tech-Spalte ✓).
 
 ```bash
 echo "Ich committe jetzt:"

package/commands/red:proto-dev-setup.md

@@ -84,7 +84,7 @@ Leite aus PRD-Signalen und Recherche eine **konkrete Empfehlung** ab. Präsentie
 - Web-Technologie: **Electron** oder **Tauri** (leichtgewichtiger, Rust-basiert)
 
 **Datenbank-Empfehlung** (unabhängig vom Framework):
-- Standard (relational): **PostgreSQL via Neon** (serverless, kostenlos startbar)
+- Standard (relational): **PostgreSQL via Neon** (keine eigene Server-Verwaltung, kostenlos startbar)
 - Echtzeit + Auth integriert: **Supabase**
 - Dokument-basiert: **MongoDB**
 - Kein persistentes Backend nötig: localStorage / kein DB

package/commands/red:proto-flows.md

@@ -114,7 +114,7 @@ AskUserQuestion({
       multiSelect: false
     },
     {
-      question: "Gibt es weitere Einstiegspunkte (z.B. nach Login, nach Onboarding, per Deep Link)?",
+      question: "Gibt es weitere Einstiegspunkte (z.B. nach Login, nach Onboarding, oder per direktem Link z.B. aus einer E-Mail)?",
       header: "Weitere Einstiege",
       options: [
         { label: "Nein, nur ein Einstieg", description: "" },
@@ -224,24 +224,11 @@ AskUserQuestion({
 })
 ```
 
-Nach Approval im Chat: flows/product-flows.md ist bereits als Draft gespeichert (Phase 5). Dem User sagen:
-
-```
-📝 Draft gespeichert: flows/product-flows.md
-
-Öffne die Datei, prüfe alle Screens und Transitions und bearbeite direkt falls nötig.
-
-→ Schreib `weiter` wenn alles passt
-→ Oder sag mir direkt was geändert werden soll
-```
+Nach Approval: `flows/product-flows.md` ist bereits als Draft gespeichert (Phase 5). User per CONVENTIONS.md §Resume Pattern informieren.
 
 ## Phase 6b: Finalisieren
 
-Nach `weiter` oder Korrekturen im Chat:
-
-1. flows/product-flows.md einlesen, Korrekturen übernehmen
-2. YAML-Frontmatter auf `status: approved` setzen
-3. Commit-Zusammenfassung zeigen und committen:
+Nach `weiter` oder Korrekturen: `flows/product-flows.md` einlesen, Korrekturen übernehmen, `status: approved` setzen.
 
 ```bash
 echo "Ich committe jetzt:"

package/commands/red:proto-requirements.md

@@ -193,25 +193,11 @@ AskUserQuestion({
 })
 ```
 
-Nach Approval im Chat: Feature-File als Draft speichern. `project-config.md` aktualisieren (Nächste freie ID um 1 erhöhen).
-
-Dann dem User sagen:
-```
-📝 Draft gespeichert: features/FEAT-[X]-[name].md
-
-Öffne die Datei, prüfe sie und bearbeite sie direkt falls nötig.
-
-→ Schreib `weiter` wenn alles passt
-→ Oder sag mir direkt was geändert werden soll
-```
+Nach Approval: Feature-File als Draft speichern. `project-config.md` aktualisieren (Nächste freie ID um 1 erhöhen). User per CONVENTIONS.md §Resume Pattern informieren.
 
 ## Phase 7b: Finalisieren
 
-Nach `weiter` oder Korrekturen im Chat:
-
-1. Feature-File einlesen, eventuelle Korrekturen übernehmen
-2. YAML-Frontmatter auf `status: approved` setzen
-3. `## Fortschritt` → `Status: Approved` setzen
+Nach `weiter` oder Korrekturen: Feature-File einlesen, Korrekturen übernehmen, `status: approved` + `## Fortschritt → Status: Approved` setzen.
 
 **STATUS.md aktualisieren:** Lies `features/STATUS.md`. Wenn die Datei noch nicht existiert, erstelle sie mit diesem Header:
 

package/commands/red:proto-research.md

@@ -373,54 +373,11 @@ AskUserQuestion({
 })
 ```
 
-Nach Approval: Problem Statement Map und Personas als Drafts speichern.
-
-`research/problem-statement.md`:
-```markdown
----
-status: draft
----
-
-# Problem Statement Map
-*Erstellt von: /red:proto-research — [Datum]*
-
-[Inhalt aus Phase 4]
-```
-
-`research/personas.md`:
-```markdown
----
-status: draft
----
-
-# Personas
-*Erstellt von: /red:proto-research — [Datum]*
-
-[Inhalt aus Phase 5]
-```
-
-Dann dem User sagen:
-```
-📝 Drafts gespeichert:
-  → research/problem-statement.md
-  → research/personas.md
-  (+ research/platform-context.md und research/research-questions.md falls noch offen)
-
-Kurze Pause?
-→ Schreib `weiter` wenn du alle Dateien geprüft hast
-
-Echter Research (Interviews, Umfragen, Tage)?
-→ Trag deine Findings direkt in die Dateien ein
-→ Dann /red:proto-research erneut aufrufen – ich erkenne die Drafts automatisch
-```
+Nach Approval: Problem Statement Map und Personas als Drafts speichern (YAML `status: draft`, Header mit Dateinamen und Datum). User per CONVENTIONS.md §Resume Pattern (Option 2 – Research) informieren.
 
 ## Phase 6b: Finalisieren
 
-Nach `weiter` oder Korrekturen im Chat:
-
-1. Alle Research-Dateien lesen und eventuelle Chat-Korrekturen einarbeiten
-2. YAML-Frontmatter in allen Dateien auf `status: approved` setzen
-3. Zusammenfassung zeigen und committen:
+Nach `weiter` oder Korrekturen: Alle Research-Dateien einlesen, Korrekturen übernehmen, `status: approved` in allen Dateien setzen.
 
 ```bash
 echo "Ich committe jetzt:"

package/commands/red:proto-sparring.md

@@ -92,50 +92,21 @@ AskUserQuestion({
 
 ## Phase 4: Als Draft speichern
 
-> Lies zuerst `docs/CONVENTIONS.md` für die verbindlichen Draft/Approval/Resume-Regeln.
+> Lies `docs/CONVENTIONS.md` – Draft Convention + Resume Pattern (Option 1) gelten hier.
 
-Nach Approval: Speichere das PRD als Draft in `/prd.md`. YAML-Frontmatter `status: draft` ergänzen. Notiere den gewählten Scope (Prototyp-Typ) im PRD unter einem neuen Abschnitt:
-
-```markdown
----
-status: draft
----
-
-# Product Requirements Document
-...
-
-## Scope-Typ
-[Klickbarer Prototyp | Funktionierender Prototyp | Produktionsreifes MVP | Unklar]
-```
-
-Dann dem User sagen:
-```
-📝 Draft gespeichert: prd.md
-
-Öffne die Datei, prüfe sie und bearbeite sie direkt falls nötig.
-
-→ Schreib `weiter` wenn alles passt
-→ Oder sag mir direkt was geändert werden soll
-```
+Nach Approval: Speichere `prd.md` als Draft. YAML `status: draft`. Scope-Typ als Abschnitt `## Scope-Typ` ergänzen. User per CONVENTIONS.md §Resume Pattern informieren.
 
 ## Phase 4b: Finalisieren
 
-Nach `weiter` oder Korrektur im Chat:
-
-1. Datei einlesen: `cat prd.md`
-2. Falls Korrekturen im Chat: Änderungen in prd.md übernehmen
-3. YAML-Frontmatter auf `status: approved` setzen
-4. Commit (nur wenn Git bereits initialisiert ist – bei Erstnutzung noch nicht vorhanden):
+Nach `weiter` oder Korrekturen: `prd.md` einlesen, Korrekturen übernehmen, `status: approved` setzen.
 
 ```bash
 if git rev-parse --git-dir > /dev/null 2>&1; then
   echo "Ich committe jetzt:"
   echo "  → prd.md – PRD finalisiert"
-  git add prd.md
-  git commit -m "docs: add/update PRD"
-  git push
+  git add prd.md && git commit -q -m "docs: add/update PRD" && git push -q
 else
-  echo "Kein Git-Repository – prd.md wurde gespeichert. /red:proto-dev-setup richtet Git ein und macht den ersten Commit."
+  echo "Kein Git-Repository – prd.md gespeichert. /red:proto-dev-setup macht den ersten Commit."
 fi
 ```
 

package/commands/red:proto-ux.md

@@ -176,27 +176,11 @@ AskUserQuestion({ questions: [{ question: "UX-Entscheidungen vollständig?", hea
 ], multiSelect: false }] })
 ```
 
-Nach Approval im Chat: FEAT-[X].md erweitern (Abschnitt `## 2. UX Entscheidungen` schreiben), YAML-Frontmatter auf `status: draft` setzen.
-
-Dann dem User sagen:
-```
-📝 Draft gespeichert: features/FEAT-[X]-[name].md
-
-Öffne die Datei, prüfe die UX-Entscheidungen und bearbeite sie direkt falls nötig.
-
-→ Schreib `weiter` wenn alles passt
-→ Oder sag mir direkt was geändert werden soll
-```
+Nach Approval: FEAT-[X].md um Abschnitt `## 2. UX Entscheidungen` erweitern, YAML `status: draft` setzen. User per CONVENTIONS.md §Resume Pattern informieren.
 
 ## Phase 7b: Finalisieren
 
-Nach `weiter` oder Korrekturen im Chat:
-
-1. FEAT-[X].md einlesen, Korrekturen übernehmen
-2. YAML-Frontmatter auf `status: approved` setzen
-3. `## Fortschritt` → `Status: Approved`, `Aktueller Schritt: UX` setzen
-4. STATUS.md aktualisieren (UX-Spalte auf ✓ setzen)
-5. Commit-Zusammenfassung zeigen und committen:
+Nach `weiter` oder Korrekturen: FEAT-[X].md einlesen, Korrekturen übernehmen, `status: approved` + `## Fortschritt → Status: Approved, Aktueller Schritt: UX` setzen. STATUS.md (UX-Spalte ✓).
 
 ```bash
 echo "Ich committe jetzt:"

package/design-system/INDEX.md

@@ -0,0 +1,50 @@
+# Design System – Index
+
+Lade dieses File zuerst. Dann nur die Files, die für das aktuelle Feature relevant sind.
+
+---
+
+## Tokens
+
+| File | Inhalt | Wann laden |
+|------|--------|------------|
+| `tokens/colors.md` | Primär-, Sekundär-, Semantic-, Neutral-Farben + Surface-Aliases | Immer bei visueller Implementierung |
+| `tokens/typography.md` | Schriftgrößen, Gewichte, Line-Heights, Font-Stack | Bei Text-Styling |
+| `tokens/spacing.md` | Spacing-Scale (4px-Basis), Named Sizes (xs–2xl) | Bei Layout, Abstände, Padding |
+| `tokens/shadows.md` | Elevation-System (sm, md, lg, xl) | Bei Cards, Modals, Dropdowns |
+| `tokens/motion.md` | Transitions, Durations, Easing-Kurven | Bei Animationen, Hover-Effekten |
+
+## Komponenten
+
+| File | Varianten | Zustände | Wann laden |
+|------|-----------|----------|------------|
+| `components/button.md` | primary, secondary, ghost, danger, link | default, hover, focus, active, disabled, loading | Bei jeder Aktion/Button |
+| `components/input.md` | text, password, textarea, select | default, focus, error, disabled | Bei Formularen |
+| `components/card.md` | default, interactive, flat | default, hover | Bei Card-Layouts |
+
+## Patterns
+
+| File | Enthält | Wann laden |
+|------|---------|------------|
+| `patterns/navigation.md` | Header, Sidebar, Breadcrumb, Tab-Navigation | Bei Navigation-Implementierung |
+| `patterns/forms.md` | Formular-Aufbau, Validation, Fehlermeldungen | Bei Formularen |
+| `patterns/feedback.md` | Toasts, Modals, Loading States, Empty States | Bei Feedback-Elementen |
+| `patterns/data-display.md` | Tabellen, Listen, Cards, Badges | Bei Datendarstellung |
+
+---
+
+## Laderegel für Agents
+
+1. Lies dieses INDEX.md
+2. Identifiziere welche Tokens/Komponenten/Patterns das Feature braucht
+3. Lade **nur diese Files** – nicht alles auf einmal
+4. Nicht definierte Elemente: pragmatisch mit vorhandenen Tokens bauen, im Feature-File unter `## Offene Punkte` dokumentieren
+
+## Status
+
+| Bereich | Status |
+|---------|--------|
+| Tokens | Beispielwerte – vor Projektstart durch eigene Werte ersetzen |
+| Komponenten | 3 Basiskomponenten vorhanden (Button, Input, Card) |
+| Patterns | 4 Patterns vorhanden |
+| Screens | Leer – Figma-Exports hier ablegen |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "red-proto",
-  "version": "0.12.0",
+  "version": "0.13.2",
   "description": "AI-powered product development framework for Claude Code – from idea to tested prototype",
   "bin": {
     "red-proto": "./bin/install.js"