red-proto 0.7.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -143,14 +143,6 @@ Danach noch fragen:
143
143
  ```typescript
144
144
  AskUserQuestion({
145
145
  questions: [
146
- {
147
- question: "Wie soll das GitHub-Repository heißen?",
148
- header: "Repository-Name",
149
- options: [
150
- { label: "Ich gebe den Namen im Chat an", description: "Kurz, keine Leerzeichen (z.B. mein-projekt) – nur für GitHub, nicht der Code-Ordner" }
151
- ],
152
- multiSelect: false
153
- },
154
146
  {
155
147
  question: "In welchem Verzeichnis soll der Programm-Code liegen?",
156
148
  header: "Code-Verzeichnis",
@@ -158,17 +150,26 @@ AskUserQuestion({
158
150
  { label: "projekt/", description: "Standard – neuer Ordner im Framework-Root" },
159
151
  { label: "src/", description: "Klassisch für viele Frameworks" },
160
152
  { label: "app/", description: "Üblich bei Django, Laravel etc." },
161
- { label: "Anderer Name", description: "Ich gebe den Namen im Chat an" }
153
+ { label: "Anderer Name ich nenne ihn im Chat", description: "Beliebiger Verzeichnisname" }
162
154
  ],
163
155
  multiSelect: false
164
- },
156
+ }
157
+ ]
158
+ })
159
+ ```
160
+
161
+ Warte auf Antwort. Falls "Anderer Name": nachfragen im Chat.
162
+
163
+ ```typescript
164
+ AskUserQuestion({
165
+ questions: [
165
166
  {
166
167
  question: "Soll ein GitHub-Repository angelegt werden?",
167
- header: "GitHub",
168
+ header: "GitHub Repository",
168
169
  options: [
169
- { label: "Ja, privat (private)", description: "Empfohlen – nur du siehst das Repo" },
170
- { label: "Ja, öffentlich (public)", description: "Für Open-Source oder öffentliche Projekte" },
171
- { label: "Nein, nur lokal", description: "Git lokal, kein GitHub" }
170
+ { label: "Ja, privat", description: "Empfohlen – nur du siehst das Repo" },
171
+ { label: "Ja, öffentlich", description: "Für Open-Source oder öffentliche Projekte" },
172
+ { label: "Nein, nur lokal", description: "Git lokal einrichten, kein GitHub" }
172
173
  ],
173
174
  multiSelect: false
174
175
  }
@@ -176,6 +177,26 @@ AskUserQuestion({
176
177
  })
177
178
  ```
178
179
 
180
+ Falls GitHub gewünscht:
181
+
182
+ ```typescript
183
+ AskUserQuestion({
184
+ questions: [
185
+ {
186
+ question: "Wie soll das GitHub-Repository heißen?",
187
+ header: "Repository-Name",
188
+ options: [
189
+ { label: "Produktname in Kleinbuchstaben", description: "z.B. mein-projekt – empfohlen, klar und einprägsam" },
190
+ { label: "Anderer Name – ich nenne ihn im Chat", description: "Eigener Name, keine Leerzeichen, Bindestriche statt Unterstriche" }
191
+ ],
192
+ multiSelect: false
193
+ }
194
+ ]
195
+ })
196
+ ```
197
+
198
+ Warte auf Antwort. Falls "Anderer Name": nachfragen im Chat.
199
+
179
200
  Falls GitHub Ja:
180
201
 
181
202
  ```typescript
@@ -98,51 +98,19 @@ Faustregel: Kann es unabhängig getestet werden? Hat es eine andere User-Rolle?
98
98
 
99
99
  Bei Zweifel: aufteilen und begründen.
100
100
 
101
- ## Phase 4: Feature verstehen
101
+ ## Phase 4: Spec autonom erstellen
102
102
 
103
- ```typescript
104
- AskUserQuestion({
105
- questions: [
106
- {
107
- question: "Welche Persona(s) nutzt dieses Feature primär?",
108
- header: "Zielgruppe",
109
- options: [] // Dynamisch befüllen aus /research/personas.md falls vorhanden
110
- // Fallback: offene Frage im Chat
111
- },
112
- {
113
- question: "Was ist der kritischste Acceptance Criterion – ohne den das Feature wertlos wäre?",
114
- header: "Core AC",
115
- options: [
116
- { label: "Ich beschreibe es im Chat", description: "" }
117
- ],
118
- multiSelect: false
119
- }
120
- ]
121
- })
122
- ```
123
-
124
- Stelle so lange Follow-up-Fragen bis du wirklich Klarheit über Scope, Nutzer und Kernwert hast.
103
+ Leite aus PRD, Research und Feature-Beschreibung selbstständig ab:
104
+ - **Zielgruppe:** Welche Persona(s) aus `research/personas.md` nutzen dieses Feature? Falls kein Research: aus PRD ableiten.
105
+ - **Kernwert:** Was ist das wichtigste Acceptance Criterion – ohne das das Feature wertlos wäre?
106
+ - **Out of Scope:** Was ist bewusst nicht Teil dieses Features (naheliegende Abgrenzungen)?
107
+ - **User Stories:** Mindestens 3–5, rollen-spezifisch, aus Nutzerperspektive.
108
+ - **Acceptance Criteria:** Mindestens 5, konkret und testbar, kein Konjunktiv.
109
+ - **Edge Cases:** Mindestens 3–5 – leite sie aus dem Feature-Kontext ab und entscheide das Verhalten selbst auf Basis von PRD, Research und gesundem Menschenverstand.
125
110
 
126
- ## Phase 5: Edge Cases klären
127
-
128
- ```typescript
129
- AskUserQuestion({
130
- questions: [
131
- {
132
- question: "Was passiert bei [kritischstem Edge Case]?",
133
- header: "Edge Case",
134
- options: [
135
- { label: "Option A", description: "..." },
136
- { label: "Option B", description: "..." },
137
- { label: "Noch nicht entschieden", description: "Wir klären das" }
138
- ],
139
- multiSelect: false
140
- }
141
- ]
142
- })
143
- ```
111
+ Nur nachfragen wenn etwas genuiner Klärungsbedarf hat der sich nicht aus den vorhandenen Artefakten ableiten lässt – das sollte die Ausnahme sein, nicht die Regel.
144
112
 
145
- Identifiziere mindestens 3–5 Edge Cases. Stelle für jeden unklar gebliebenen eine gezielte Frage.
113
+ Schreibe die vollständige Spec direkt. Zeige sie im Chat bevor du speicherst.
146
114
 
147
115
  ## Phase 6: Feature Spec schreiben
148
116
 
@@ -152,7 +152,109 @@ Gute Forschungsfragen sind:
152
152
  - Verhaltensbezogen, nicht meinungsbezogen
153
153
  - Relevant für Produkt-Entscheidungen
154
154
 
155
- Präsentiere 5–8 Forschungsfragen zur Diskussion. Frage den User ob etwas fehlt oder falsch priorisiert ist.
155
+ Entwickle 5–8 Forschungsfragen. Nummeriere sie klar (1. / 2. / ...) und präsentiere sie im Chat.
156
+
157
+ Frage den User ob etwas fehlt oder falsch priorisiert ist – passe die Liste an bis sie stimmt.
158
+
159
+ ## Phase 3b: Beantwortung der Forschungsfragen
160
+
161
+ ```typescript
162
+ AskUserQuestion({
163
+ questions: [
164
+ {
165
+ question: "Die Forschungsfragen sind bereit. Wie möchtest du vorgehen?",
166
+ header: "Research-Methode",
167
+ options: [
168
+ {
169
+ label: "Jetzt interaktiv beantworten",
170
+ description: "Ich führe dich Frage für Frage durch – du antwortest direkt im Chat auf Basis deiner Annahmen, Erfahrungen oder vorhandenem Wissen"
171
+ },
172
+ {
173
+ label: "Pause – echten Research durchführen",
174
+ description: "Ich speichere die offenen Fragen. Du führst Interviews, Umfragen oder Beobachtungen durch und rufst /red:proto-research danach erneut auf"
175
+ }
176
+ ],
177
+ multiSelect: false
178
+ }
179
+ ]
180
+ })
181
+ ```
182
+
183
+ **Bei "Pause – echten Research durchführen":**
184
+
185
+ Speichere die Forschungsfragen in `research/research-questions.md`:
186
+
187
+ ```markdown
188
+ # Forschungsfragen
189
+ *Erstellt von: /red:proto-research — [Datum]*
190
+ *Status: Offen – noch nicht beantwortet*
191
+
192
+ ## Offene Fragen
193
+
194
+ 1. [Frage 1]
195
+ 2. [Frage 2]
196
+ ...
197
+
198
+ ## Methoden-Empfehlung
199
+ - Nutzerinterviews (30–45 min, 3–5 Teilnehmer)
200
+ - Kontextuelle Beobachtung wenn möglich
201
+ - Kurze Online-Umfrage für quantitative Einschätzung
202
+
203
+ ## Nächster Schritt
204
+ Beantworte diese Fragen durch echten User Research.
205
+ Danach: `/red:proto-research` erneut aufrufen – ich verarbeite deine Antworten.
206
+ ```
207
+
208
+ Dann stoppen und dem User sagen:
209
+ ```
210
+ Forschungsfragen gespeichert in research/research-questions.md.
211
+
212
+ Führe deinen Research durch (Interviews, Umfragen, Beobachtungen) und trage
213
+ die Antworten direkt in die Datei ein – oder beschreibe sie mir beim nächsten Aufruf.
214
+
215
+ Wenn du fertig bist: /red:proto-research erneut aufrufen.
216
+ ```
217
+
218
+ **Bei "Jetzt interaktiv beantworten":**
219
+
220
+ Gehe jede Frage einzeln durch. Stelle eine Frage im Chat und warte auf die Antwort bevor du zur nächsten gehst:
221
+
222
+ ```
223
+ Frage 1 von [N]:
224
+ [Vollständiger Fragetext]
225
+
226
+ (Deine Antwort kann eine Vermutung, eine Beobachtung oder eine Erfahrung sein –
227
+ kein perfektes Research nötig, wir arbeiten mit dem was du weißt)
228
+ ```
229
+
230
+ Sammle alle Antworten. Speichere danach `research/research-questions.md`:
231
+
232
+ ```markdown
233
+ # Forschungsfragen & Antworten
234
+ *Erstellt von: /red:proto-research — [Datum]*
235
+ *Status: Interaktiv beantwortet (Hypothesen)*
236
+
237
+ ## Fragen & Antworten
238
+
239
+ ### 1. [Frage 1]
240
+ **Antwort:** [Antwort des Users]
241
+
242
+ ### 2. [Frage 2]
243
+ **Antwort:** [Antwort des Users]
244
+
245
+ ...
246
+
247
+ ## Hinweis
248
+ Diese Antworten basieren auf Annahmen und Hypothesen, nicht auf echtem User Research.
249
+ Sie sind ein valider Ausgangspunkt – können aber durch spätere echte Interviews ergänzt werden.
250
+ ```
251
+
252
+ Danach dem User mitteilen:
253
+ ```
254
+ Antworten gespeichert. Weiter mit Phase 4 – Problem Statement Map.
255
+ ```
256
+
257
+ Und direkt mit Phase 4 fortfahren.
156
258
 
157
259
  ## Phase 4: Problem Statement Map erstellen
158
260
 
@@ -59,62 +59,21 @@ ls design-system/screens/*/ 2>/dev/null
59
59
 
60
60
  Erstelle intern eine Liste aller verfügbaren Komponenten aus `design-system/components/`.
61
61
 
62
- ## Phase 3: UX-Entscheidungen klären
62
+ ## Phase 3: Autonome UX-Analyse
63
63
 
64
- ```typescript
65
- AskUserQuestion({
66
- questions: [
67
- {
68
- question: "Wo im Produkt lebt dieses Feature?",
69
- header: "Einbettung",
70
- options: [
71
- { label: "Neue Seite / eigener Screen", description: "Eigene Route, Navigation-Eintrag" },
72
- { label: "Modal / Overlay", description: "Über bestehenden Content" },
73
- { label: "Erweiterung einer bestehenden Seite", description: "Neuer Bereich auf existierender Page" },
74
- { label: "Noch unklar", description: "Lass uns das herausfinden" }
75
- ],
76
- multiSelect: false
77
- },
78
- {
79
- question: "Welches primäre Interaktionsmuster passt?",
80
- header: "Interaktion",
81
- options: [
82
- { label: "Formular", description: "User gibt Daten ein und submitted" },
83
- { label: "Liste + Detailansicht", description: "Übersicht → Drill-Down" },
84
- { label: "Wizard / Schritt-für-Schritt", description: "Geführter Prozess" },
85
- { label: "Dashboard / Übersicht", description: "Informationsanzeige" },
86
- { label: "Inline-Editing", description: "Direkte Bearbeitung" }
87
- ],
88
- multiSelect: false
89
- }
90
- ]
91
- })
92
- ```
64
+ **Du entscheidest – nicht der Nutzer.** Leite alle UX-Entscheidungen selbst aus dem gelesenen Kontext ab: PRD, Personas, Feature-Spec, Design System, Flows.
93
65
 
94
- ## Phase 4: Komponenten-Entscheidung durch UX Designer
66
+ Analysiere und dokumentiere intern:
95
67
 
96
- **Du fragst der Designer entscheidet:**
68
+ **Einbettung:** Wo lebt das Feature im Produkt? Leite ab aus: Feature-Scope, bestehenden Flows, Navigation-Struktur im DS. Begründe deine Wahl (z.B. "Modal, weil der Feature-Scope eng ist und kein eigener Navigation-Eintrag gerechtfertigt ist").
97
69
 
98
- ```typescript
99
- AskUserQuestion({
100
- questions: [
101
- {
102
- question: "Welche Komponenten möchtest du in diesem Feature einsetzen?",
103
- header: "Komponenten",
104
- options: [
105
- { label: "Ich nenne sie im Chat", description: "Liste alle Komponenten die du brauchst" }
106
- ],
107
- multiSelect: false
108
- }
109
- ]
110
- })
111
- ```
70
+ **Interaktionsmuster:** Welches primäre Pattern passt? Leite ab aus: Feature-Ziel, Persona-Verhalten, Datenmenge, Mobile-Kontext. Begründe deine Wahl (z.B. "Liste + Detailansicht, weil Personas täglich zwischen mehreren Einträgen navigieren müssen").
112
71
 
113
- Nimm die genannte Liste entgegen. Dann:
72
+ **Komponenten-Auswahl:** Wähle alle benötigten Komponenten eigenständig aus `design-system/components/`. Begründe jede Wahl kurz. Prüfe dann:
114
73
 
115
- ### DS-Validierung
74
+ ## Phase 4: DS-Validierung
116
75
 
117
- Prüfe für jede genannte Komponente ob eine Spec in `design-system/components/` existiert:
76
+ Prüfe für jede selbst gewählte Komponente ob eine Spec in `design-system/components/` existiert:
118
77
 
119
78
  ```bash
120
79
  ls design-system/components/ 2>/dev/null
@@ -168,7 +127,9 @@ AskUserQuestion({
168
127
  - **Fortfahren mit Tokens:** Notiere genehmigte Lücken für Phase 6 (DS-Status).
169
128
  - **Bewusste Abweichung:** Frage nach dem Testgrund und notiere ihn für Phase 6.
170
129
 
171
- ## Phase 5: Screen Transitions definieren
130
+ ## Phase 5: Navigation nach Aktionen definieren
131
+
132
+ *(Was passiert nach welcher Nutzer-Aktion? Z.B. nach "Speichern" → Wo landet der Nutzer? Nach "Abbrechen" → Zurück wohin?)*
172
133
 
173
134
  **Guard – Flows-Dokument prüfen:**
174
135
 
@@ -187,11 +148,11 @@ AskUserQuestion({
187
148
  options: [
188
149
  {
189
150
  label: "Jetzt /red:proto-flows ausführen",
190
- description: "Empfohlen – definiert alle Screen Transitions übergreifend bevor wir weitermachen"
151
+ description: "Empfohlen – definiert übergreifend wo Nutzer nach jeder Aktion landen"
191
152
  },
192
153
  {
193
- label: "Transitions nur für dieses Feature definieren",
194
- description: "Nur die Transitions dieses Features werden dokumentiert – ohne übergreifenden Kontext"
154
+ label: "Nur für dieses Feature definieren",
155
+ description: "Nur die Navigations-Abfolge dieses Features wird dokumentiert – ohne übergreifenden Kontext"
195
156
  }
196
157
  ],
197
158
  multiSelect: false
@@ -200,27 +161,13 @@ AskUserQuestion({
200
161
  })
201
162
  ```
202
163
 
203
- **Transitions für dieses Feature erfassen:**
164
+ **Navigation eigenständig ableiten:**
204
165
 
205
- Frage den Designer nach jeder Transition die dieses Feature betrifft:
166
+ Leite alle Navigations-Abfolgen aus `flows/product-flows.md` und dem Feature-Scope ab: Welche Aktionen führt der Nutzer aus? Wo landet er danach jeweils? Definiere dies selbst und dokumentiere es in Phase 6.
206
167
 
207
- ```typescript
208
- AskUserQuestion({
209
- questions: [
210
- {
211
- question: "Welche Screen Transitions gehören zu diesem Feature? (Von welchem Screen, welcher Trigger, zu welchem Ziel?)",
212
- header: "Transitions",
213
- options: [
214
- { label: "Ich definiere sie im Chat", description: "Format: Von Screen → Trigger → Ziel-Screen (+ Bedingung falls nötig)" },
215
- { label: "Keine Transitions – Feature ist in-page", description: "Keine Navigationsänderungen" }
216
- ],
217
- multiSelect: false
218
- }
219
- ]
220
- })
221
- ```
168
+ Nur wenn genuiner Interpretations-Spielraum bleibt (z.B. ob ein Fehler als Inline-Meldung oder auf einer eigenen Seite erscheint), stelle diese eine gezielte Frage im Chat.
222
169
 
223
- Wenn Flows-Dokument vorhanden: Trage alle Transitions in `flows/product-flows.md` ein.
170
+ Wenn Flows-Dokument vorhanden: Trage alle Navigations-Abfolgen in `flows/product-flows.md` ein.
224
171
 
225
172
  ## Skill: UI/UX Design Guidelines
226
173
 
@@ -268,13 +215,15 @@ Route (falls neu): `/[pfad]`
268
215
  | [Name] | ⚠ Tokens-Build | Keine Spec – genehmigt [Datum] |
269
216
  | [Name] | 🧪 Hypothesentest | Abweichung von [Pattern] – Grund: [...] |
270
217
 
271
- ### Screen Transitions (verbindlich)
272
- | Von | Trigger | Wohin | Bedingung |
218
+ ### Navigation nach Aktionen (verbindlich)
219
+ *Was passiert nach welcher Nutzer-Aktion?*
220
+
221
+ | Ausgangs-Screen | Aktion des Nutzers | Ziel | Bedingung |
273
222
  |------------------|--------------------------|------------------|------------------------|
274
223
  | [Screen] | "[Aktion]" | [Ziel-Screen] | – |
275
- | [Screen] | Submit (Fehler) | gleiche Seite | Inline-Fehler |
224
+ | [Screen] | Speichern (mit Fehler) | gleiche Seite | Inline-Fehlermeldung |
276
225
 
277
- *(Vollständige Transitions auch in flows/product-flows.md eingetragen)*
226
+ *(Vollständige Navigations-Abfolgen auch in flows/product-flows.md eingetragen)*
278
227
 
279
228
  ### DS-Status dieser Implementierung
280
229
  - **Konforme Komponenten:** [Liste]
@@ -64,6 +64,52 @@ mkdir -p design-system/screens
64
64
  [ ! -f project-config.md ] && mkdir -p projekt
65
65
  ```
66
66
 
67
+ **Schritt 2b – Terminal-Permissions einrichten (.claude/settings.json):**
68
+
69
+ Damit du nicht bei jedem Bash-, Git- oder Node-Befehl manuell zustimmen musst, werden die Permissions einmalig gesetzt.
70
+
71
+ **Wichtig:** Falls bereits eine `.claude/settings.json` existiert (z.B. durch MCP-Einstellungen), wird sie **erweitert**, nicht überschrieben.
72
+
73
+ ```bash
74
+ if [ -f .claude/settings.json ]; then
75
+ echo "settings.json existiert bereits – wird erweitert"
76
+ cat .claude/settings.json
77
+ else
78
+ echo "Keine settings.json vorhanden – wird neu erstellt"
79
+ fi
80
+ ```
81
+
82
+ Wenn die Datei **nicht existiert**: erstelle `.claude/settings.json` mit folgendem Inhalt:
83
+
84
+ ```json
85
+ {
86
+ "permissions": {
87
+ "allow": [
88
+ "Bash(*)",
89
+ "Read(*)",
90
+ "Write(*)",
91
+ "Edit(*)",
92
+ "Glob(*)",
93
+ "Grep(*)"
94
+ ],
95
+ "deny": []
96
+ }
97
+ }
98
+ ```
99
+
100
+ Wenn die Datei **bereits existiert**: lies sie vollständig, prüfe ob ein `permissions`-Block vorhanden ist:
101
+ - Falls **kein** `permissions`-Block → füge ihn zum bestehenden JSON hinzu (JSON korrekt mergen, alle anderen Felder erhalten)
102
+ - Falls `permissions`-Block **bereits vorhanden** → nichts ändern, dem User mitteilen dass Permissions bereits konfiguriert sind
103
+
104
+ Zeige dem User danach den aktuellen Stand der settings.json:
105
+ ```
106
+ ✅ Terminal-Permissions gesetzt – du wirst nicht mehr bei jedem Befehl gefragt.
107
+ Bash, Git, Read, Write und Edit sind für dieses Projekt vorab genehmigt.
108
+ (Konfiguriert in .claude/settings.json – jederzeit anpassbar)
109
+ ```
110
+
111
+ ---
112
+
67
113
  **Schritt 3a – Nur fehlende Dateien kopieren** (Modus: "Nur fehlende"):
68
114
 
69
115
  ```bash
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "red-proto",
3
- "version": "0.7.0",
3
+ "version": "0.9.0",
4
4
  "description": "AI-powered product development framework for Claude Code – from idea to tested prototype",
5
5
  "bin": {
6
6
  "red-proto": "./bin/install.js"