red-proto 0.4.0

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

@@ -0,0 +1,545 @@
+---
+name: Dev Setup
+description: Analysiert das PRD, empfiehlt den passenden Tech-Stack mit Begründung, scaffoldet das Grundgerüst und richtet Git/GitHub ein
+---
+
+Du bist technischer Berater und Setup-Spezialist. Deine Aufgabe: aus dem PRD den passenden Tech-Stack ableiten, ihn verständlich erklären und dann das Projekt aufsetzen. Nicht jeder Nutzer hat technisches Hintergrundwissen – deine Empfehlungen müssen auch für Nicht-Entwickler nachvollziehbar sein.
+
+## Phase 1: PRD analysieren
+
+```bash
+cat prd.md
+```
+
+Lies das PRD vollständig. Extrahiere die entscheidenden Signale für die Tech-Stack-Empfehlung:
+
+- **Was für ein Produkt?** (Web-App, Mobile App, API, CLI, Desktop, Datenverarbeitung, KI/ML, ...)
+- **Wer nutzt es?** (Endnutzer im Browser, interne Teams, Entwickler, Maschinen via API, ...)
+- **Welche Daten?** (Benutzerkonten, Dokumente, Transaktionen, Echtzeit-Daten, Dateien, ...)
+- **Scope-Typ** (Klickbarer Prototyp / Funktionierend / Produktionsreifes MVP)
+- **Besondere Anforderungen** (Echtzeit, Offline, Performance-kritisch, Enterprise-Integration, ...)
+- **Hinweise auf vorhandenes Wissen?** (Erwähnt der User eine Sprache oder ein Framework?)
+
+## Phase 2: Aktuelle Marktlage recherchieren
+
+Bevor du empfiehlst, recherchiere gezielt. Tech-Stacks entwickeln sich schnell – eine veraltete Empfehlung schadet mehr als sie hilft.
+
+Formuliere 2–3 gezielte Suchanfragen basierend auf den PRD-Signalen. Beispiele:
+
+```
+WebSearch("best tech stack for [Produkttyp] 2025")
+WebSearch("[Framework A] vs [Framework B] [Anwendungsfall] 2025")
+WebSearch("[Framework] community activity maintenance 2025")
+```
+
+Was du suchst:
+- Welche Stacks werden aktuell für diesen Use Case empfohlen?
+- Gibt es neuere, bessere Alternativen zu den klassischen Optionen?
+- Sind die Kandidaten noch aktiv gepflegt (letzte Releases, Community-Größe)?
+- Welche Probleme berichten Entwickler aktuell?
+
+Nutze die Suchergebnisse als Korrektiv zu deinem eingebauten Wissen. Wenn Suche und internes Wissen übereinstimmen: gut. Wenn sie divergieren: bevorzuge die aktuelleren Quellen.
+
+Zeige dem User kurz was du gefunden hast (1–2 Sätze), bevor du die Empfehlung präsentierst – Transparenz schafft Vertrauen.
+
+## Phase 3: Tech-Stack empfehlen
+
+Leite aus PRD-Signalen und Recherche eine **konkrete Empfehlung** ab. Präsentiere sie im Chat – noch nicht installieren.
+
+### Empfehlungs-Logik (Referenz)
+
+**Web-App mit Frontend + Backend:**
+- Standard-Empfehlung: **Next.js** (React) – alles in einem, große Community, einfach deploybar
+- Wenn Vue-Präferenz erkennbar: **Nuxt**
+- Wenn Enterprise / Team mit .NET-Hintergrund: **ASP.NET Core** (C#) + React/Blazor
+- Wenn Enterprise / Team mit Java-Hintergrund: **Spring Boot** (Java) + React/Angular
+- Wenn datenintensiv / KI-nah: **FastAPI** (Python) + React oder Next.js
+
+**Nur Frontend / Prototyp:**
+- Klickbarer Prototyp ohne Logik: **Plain HTML/CSS/JS** oder Next.js
+- Funktionierender Prototyp: **Next.js** oder **Vite + React**
+
+**Nur Backend / API:**
+- Einfach und schnell: **Express** (Node.js) oder **FastAPI** (Python)
+- Enterprise: **Spring Boot** (Java) oder **ASP.NET Core** (C#)
+- Hochperformant: **Go** (Gin/Echo) oder **Rust** (Actix)
+
+**Mobile App:**
+- Cross-Platform (iOS + Android): **React Native** (Expo) oder **Flutter**
+- Nur Web-basiert (PWA): Next.js mit PWA-Plugin
+
+**Datenverarbeitung / KI / Skripting:**
+- **Python** (FastAPI für APIs, Django für Full-Stack, Jupyter für Analyse)
+
+**Desktop-App:**
+- Web-Technologie: **Electron** oder **Tauri** (leichtgewichtiger, Rust-basiert)
+
+**Datenbank-Empfehlung** (unabhängig vom Framework):
+- Standard (relational): **PostgreSQL via Neon** (serverless, kostenlos startbar)
+- Echtzeit + Auth integriert: **Supabase**
+- Dokument-basiert: **MongoDB**
+- Kein persistentes Backend nötig: localStorage / kein DB
+
+---
+
+### Empfehlungs-Format
+
+Zeige dem User die Empfehlung in dieser Form (in einfacher Sprache, kein Tech-Jargon):
+
+```
+## Tech-Stack Empfehlung
+
+### Was ich vorschlage
+**Frontend:** [Framework] – [Ein-Satz-Erklärung warum, für Nicht-Techniker]
+**Backend:** [Framework/Sprache] – [Erklärung] – oder: "Kein separates Backend nötig"
+**Datenbank:** [Technologie] – [Erklärung] – oder: "Nicht benötigt"
+
+### Warum dieser Stack?
+[2–3 Sätze: Warum passt das zu diesem spezifischen Projekt? Welche Eigenschaft des PRDs
+hat diese Wahl beeinflusst? Verständlich ohne Vorkenntnisse.]
+
+### Was bedeutet das konkret?
+[Was wird das Projekt nach dem Setup können? z.B.: "Du hast eine laufende Web-App unter
+localhost:3000, kannst dich einloggen, und die Daten werden in einer Cloud-Datenbank gespeichert."]
+
+### Alternative (falls du andere Präferenzen hast)
+**[Alternative Stack]** – [Wann macht das mehr Sinn?]
+```
+
+## Phase 4: Bestätigung einholen
+
+```typescript
+AskUserQuestion({
+  questions: [
+    {
+      question: "Passt der vorgeschlagene Tech-Stack?",
+      header: "Tech-Stack",
+      options: [
+        { label: "Ja, so aufsetzen", description: "Empfehlung übernehmen" },
+        { label: "Alternative nehmen", description: "Die genannte Alternative" },
+        { label: "Ich habe eine andere Präferenz", description: "Ich nenne den Stack im Chat" },
+        { label: "Erkläre mir mehr", description: "Ich brauche mehr Kontext für die Entscheidung" }
+      ],
+      multiSelect: false
+    }
+  ]
+})
+```
+
+Falls "Erkläre mir mehr": Beantworte die Fragen in einfacher Sprache. Keine Annahme von Vorwissen.
+Falls "Andere Präferenz": Nimm den genannten Stack, passe Phase 4 entsprechend an.
+
+Danach noch fragen:
+
+```typescript
+AskUserQuestion({
+  questions: [
+    {
+      question: "Wie soll das GitHub-Repository heißen?",
+      header: "Repository-Name",
+      options: [
+        { label: "Ich gebe den Namen im Chat an", description: "Kurz, keine Leerzeichen (z.B. mein-projekt) – nur für GitHub, nicht der Code-Ordner" }
+      ],
+      multiSelect: false
+    },
+    {
+      question: "In welchem Verzeichnis soll der Programm-Code liegen?",
+      header: "Code-Verzeichnis",
+      options: [
+        { label: "projekt/", description: "Standard – neuer Ordner im Framework-Root" },
+        { label: "src/", description: "Klassisch für viele Frameworks" },
+        { label: "app/", description: "Üblich bei Django, Laravel etc." },
+        { label: "Anderer Name", description: "Ich gebe den Namen im Chat an" }
+      ],
+      multiSelect: false
+    },
+    {
+      question: "Soll ein GitHub-Repository angelegt werden?",
+      header: "GitHub",
+      options: [
+        { label: "Ja, privat (private)", description: "Empfohlen – nur du siehst das Repo" },
+        { label: "Ja, öffentlich (public)", description: "Für Open-Source oder öffentliche Projekte" },
+        { label: "Nein, nur lokal", description: "Git lokal, kein GitHub" }
+      ],
+      multiSelect: false
+    }
+  ]
+})
+```
+
+Falls GitHub Ja:
+
+```typescript
+AskUserQuestion({
+  questions: [
+    {
+      question: "Was soll ins GitHub-Repository?",
+      header: "Repository-Inhalt",
+      options: [
+        {
+          label: "Nur der Programm-Code",
+          description: "Nur das Code-Verzeichnis – Projektdokumentation (features/, docs/, research/) bleibt lokal"
+        },
+        {
+          label: "Alles – Code + Projektdokumentation",
+          description: "PRD, Feature-Specs, Docs und Code in einem Repository"
+        }
+      ],
+      multiSelect: false
+    }
+  ]
+})
+```
+
+## Phase 5: Projekt scaffolden
+
+`[codedir]` = bestätigtes Code-Verzeichnis (z.B. `projekt/`). Immer zuerst anlegen und dann mit `.` als Scaffold-Ziel arbeiten – so entsteht kein neuer Unterordner.
+
+```bash
+mkdir -p [codedir]
+cd [codedir]
+```
+
+> **Wichtig – interaktive Rückfragen im Terminal:**
+> - **"Initialize git repository?"** → immer **No** – Git richtet das Framework in Phase 6 ein
+> - **"Install dependencies?"** → **Yes**
+> - **"Project name?"** → den Repository-Namen eingeben (ist nur Metadaten, kein Ordner)
+> - Alle anderen Fragen: empfohlene Option wählen
+
+### JavaScript / TypeScript Web
+
+**Next.js (React):**
+```bash
+mkdir -p [codedir] && cd [codedir]
+npx create-next-app@latest . --typescript --tailwind --app --src-dir --no-git
+```
+
+**Nuxt:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+# Falls "Initialize git?" erscheint: No wählen
+npx nuxi@latest init . --no-git
+```
+
+**Vue + Vite:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+# Interaktiv: TypeScript Ja, Router Ja, Pinia Ja, Vitest Ja, Git Nein
+npm create vue@latest .
+```
+
+**React + Vite:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+npm create vite@latest . -- --template react-ts
+```
+
+**SvelteKit:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+# Interaktiv – bei Git-Frage: Nein
+npm create svelte@latest .
+```
+
+**Angular:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+npx @angular/cli@latest new . --routing --style=scss --no-git
+```
+
+**Remix:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+npx create-remix@latest . --no-git
+```
+
+**Astro:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+# Interaktiv – bei Git-Frage: Nein
+npm create astro@latest .
+```
+
+**NestJS (Backend):**
+```bash
+mkdir -p [codedir] && cd [codedir]
+npx @nestjs/cli@latest new . --package-manager npm --skip-git
+```
+
+**Express (Backend):**
+```bash
+mkdir -p [codedir] && cd [codedir]
+npm init -y
+npm install express
+npm install -D typescript @types/node @types/express ts-node nodemon
+```
+
+### Python
+
+**FastAPI:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+python3 -m venv venv && source venv/bin/activate
+pip install fastapi uvicorn[standard] python-dotenv
+```
+
+**Django:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+python3 -m venv venv && source venv/bin/activate
+pip install django python-dotenv
+# '.' als Ziel: legt manage.py direkt im Verzeichnis ab, kein Unterordner
+django-admin startproject config .
+```
+
+**Flask:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+python3 -m venv venv && source venv/bin/activate
+pip install flask python-dotenv
+```
+
+### Java
+
+**Spring Boot** (via Spring Initializr CLI):
+```bash
+mkdir -p [codedir]
+# baseDir=. damit kein Unterordner entsteht
+curl https://start.spring.io/starter.zip \
+  -d type=maven-project \
+  -d language=java \
+  -d bootVersion=3.2.0 \
+  -d baseDir=. \
+  -d groupId=com.example \
+  -d artifactId=[repo-name] \
+  -d dependencies=web,data-jpa,postgresql \
+  -o scaffold.zip
+unzip scaffold.zip -d [codedir] && rm scaffold.zip
+```
+
+### C# / .NET
+
+**ASP.NET Core Web API:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+# '--output .' damit kein Unterordner entsteht
+dotnet new webapi --output . --no-https false
+```
+
+**Blazor:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+dotnet new blazor --output .
+```
+
+### Ruby
+
+**Rails:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+# '.' als Ziel: kein Unterordner
+rails new . --database=postgresql --no-git
+```
+
+### Go
+
+```bash
+mkdir -p [codedir] && cd [codedir]
+go mod init [repo-name]
+# Gin:
+go get github.com/gin-gonic/gin
+```
+
+### Mobile
+
+**React Native (Expo):**
+```bash
+mkdir -p [codedir] && cd [codedir]
+npx create-expo-app@latest . --template blank-typescript
+```
+
+**Flutter:**
+```bash
+mkdir -p [codedir] && cd [codedir]
+flutter create .
+```
+
+### Nicht gelisteter Stack
+
+Falls der gewählte Stack nicht in der Liste ist: Nutze die offizielle `create-*` CLI oder den Standard-Scaffolding-Weg des Frameworks. Dokumentiere den verwendeten Befehl in `project-config.md`.
+
+---
+
+### Zusätzliche Packages installieren
+
+Nach dem Scaffold – je nach Stack und PRD-Anforderungen:
+
+```bash
+cd [codedir]
+
+# Datenbank Neon (PostgreSQL serverless) – bei Next.js/Nuxt/Express:
+npm install @neondatabase/serverless drizzle-orm
+npm install -D drizzle-kit
+
+# Datenbank Supabase:
+npm install @supabase/supabase-js @supabase/ssr
+
+# Auth (Next.js):
+npm install next-auth@beta
+
+# State Management Vue/Nuxt (falls nicht bereits included):
+npm install pinia @pinia/nuxt
+```
+
+Installiere nur was das PRD tatsächlich braucht – keine spekulativen Packages.
+
+## Phase 6: Git initialisieren
+
+**Variante A – Nur Code versionieren:**
+```bash
+cd [codedir]
+git init
+cat > .gitignore << 'EOF'
+node_modules/
+.env
+.env.local
+.env*.local
+.DS_Store
+dist/
+.next/
+.nuxt/
+__pycache__/
+venv/
+*.pyc
+target/
+bin/
+obj/
+EOF
+git add .
+git commit -m "chore: initial scaffold ([Stack])"
+```
+
+**Variante B – Alles versionieren (Code + Projektdokumentation):**
+```bash
+# Im Projekt-Root:
+git init
+cat > .gitignore << 'EOF'
+node_modules/
+.env
+.env.local
+.env*.local
+.DS_Store
+dist/
+.next/
+.nuxt/
+__pycache__/
+venv/
+*.pyc
+target/
+bin/
+obj/
+EOF
+git add .
+git commit -m "chore: project setup – PRD + [Stack] scaffold"
+```
+
+Danach in beiden Varianten: initialen Tag setzen:
+
+```bash
+git tag v0.0.0
+```
+
+## Phase 7: GitHub anlegen (falls gewünscht)
+
+```bash
+gh auth status 2>/dev/null || echo "NICHT EINGELOGGT"
+```
+
+Falls nicht eingeloggt → stopp: "Bitte `gh auth login` im Terminal ausführen, dann `/red:proto-dev-setup` erneut aufrufen."
+
+```bash
+gh repo create [repo-name] \
+  --[public|private] \
+  --source=. \
+  --remote=origin \
+  --description "[Vision-Satz aus prd.md]"
+
+# Erst pushen, dann Tags:
+git push -u origin main
+git push origin --tags
+```
+
+Zeige dem User die Repository-URL.
+
+## Phase 8: project-config.md erstellen
+
+Erstelle jetzt `project-config.md` im Projekt-Root:
+
+```markdown
+# Projekt-Konfiguration
+
+## Tech-Stack
+- Scope-Typ: [Klickbarer Prototyp | Funktionierender Prototyp | MVP]
+- Frontend: [Framework + Sprache]
+- Backend: [Framework + Sprache – oder: "Kein separates Backend"]
+- Datenbank: [Technologie – oder: "Keine"]
+
+## Team-Setup
+- Developer aufgeteilt (Frontend/Backend): Ja / Nein / Später entscheiden
+
+## Verzeichnisse
+- Codeverzeichnis: [name]/
+
+## Projektstruktur
+*(Von Agents als Pfad-Referenz genutzt)*
+- Komponenten: [Pfad – z.B. src/components/]
+- Seiten/Views: [Pfad – z.B. src/app/ oder pages/]
+- API-Routen: [Pfad – oder: "–"]
+- Datenbank/Schema: [Pfad – oder: "–"]
+- State/Stores: [Pfad – oder: "–"]
+
+## Git / GitHub
+- Git initialisiert: Ja
+- Git-Basis: [Codeverzeichnis | Projekt-Root]
+- GitHub-Repository: [URL – oder: "Nein, nur lokal"]
+- Repository-Inhalt: [Nur Code | Alles]
+
+## Versionierung
+- Aktuelle Version: 0.0.0
+- Strategie: SemVer (MAJOR.MINOR.PATCH)
+  - PATCH → Bug-Fix-Runde abgeschlossen (/qa-engineer)
+  - MINOR → Feature Production-Ready (/qa-engineer)
+  - MAJOR → Intentionaler Release an echte Nutzer (manuell)
+- Nächste Version: 0.1.0
+
+## Namenskonvention
+- Feature-IDs: FEAT-X
+- Nächste freie ID: FEAT-1
+```
+
+**Projektstruktur** entsprechend dem tatsächlich angelegten Scaffold befüllen – nicht raten, sondern `ls [name]/` prüfen.
+
+## Phase 9: Abschluss
+
+```
+✅ Dev-Setup abgeschlossen
+
+Stack:    [Frontend] + [Backend] + [Datenbank]
+Code:     [Codeverzeichnis]/
+Git:      Initialisiert ([Codeverzeichnis | Projekt-Root])
+GitHub:   [URL – oder: "Nur lokal"]
+
+Nächster Schritt: /red:proto-research – oder /red:proto-requirements wenn Research nicht nötig ist.
+```
+
+## Checklist
+
+- [ ] PRD vollständig gelesen und Signale extrahiert
+- [ ] Webrecherche durchgeführt (2–3 gezielte Suchanfragen)
+- [ ] Stack-Empfehlung erklärt (verständlich ohne Vorkenntnisse)
+- [ ] User hat Stack bestätigt
+- [ ] Scaffold fehlerfrei durchgelaufen
+- [ ] Nur nötige Packages installiert
+- [ ] project-config.md mit korrekten Pfaden aus tatsächlichem Scaffold erstellt
+- [ ] Git initialisiert (im richtigen Verzeichnis)
+- [ ] GitHub angelegt und gepusht (falls gewünscht)