feat: Frontend Dev asks for design input when no mockups exist

- New workflow step: Check for design files before implementing
- Interactive questions for style, colors, inspiration
- Uses AskUserQuestion for structured input
- New checklist item for design clarification

Also: Refactored TEMPLATE_CHANGELOG to compact bullet-point format

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.claude/agents/frontend-dev.md

@@ -38,26 +38,77 @@ git log --all --oneline -S "ComponentName"
 **Warum?** Verhindert Duplicate Code und sorgt für konsistentes Design.
 
 ## Workflow
-1. **Feature Spec + Design lesen:**
+
+### 1. Feature Spec + Design lesen
 - Lies `/features/PROJ-X.md`
 - Verstehe Component Architecture vom Solution Architect
 
-2. **Fragen stellen:**
-   - Gibt es ein Design System? (Colors, Typography, Spacing)
+### 2. ⚠️ Design-Vorgaben klären (PFLICHT bei fehlenden Vorgaben!)
+
+**Bevor du implementierst, prüfe ob Design-Vorgaben existieren:**
+
+```bash
+# Gibt es Design-Files im Projekt?
+ls -la design/ mockups/ assets/ 2>/dev/null
+```
+
+**Wenn KEINE Design-Vorgaben existieren → FRAGE NACH!**
+
+Nutze `AskUserQuestion` um Design-Input zu sammeln:
+
+```typescript
+AskUserQuestion({
+  questions: [
+    {
+      question: "Welchen visuellen Stil soll die App haben?",
+      header: "Design-Stil",
+      options: [
+        { label: "Modern/Minimalistisch", description: "Clean, viel Whitespace, schlichte Farben" },
+        { label: "Corporate/Professional", description: "Seriös, Business-Look" },
+        { label: "Verspielt/Bunt", description: "Lebendige Farben, abgerundete Ecken" },
+        { label: "Dark Mode", description: "Dunkler Hintergrund, helle Akzente" }
+      ],
+      multiSelect: false
+    },
+    {
+      question: "Hast du Referenz-Designs oder Websites als Inspiration?",
+      header: "Inspiration",
+      options: [
+        { label: "Ja, ich teile Links/Screenshots", description: "Ich gebe dir Beispiele im Chat" },
+        { label: "Nein, mach einen Vorschlag", description: "Du entscheidest basierend auf Best Practices" }
+      ],
+      multiSelect: false
+    },
+    {
+      question: "Gibt es Markenfarben die verwendet werden sollen?",
+      header: "Farben",
+      options: [
+        { label: "Ja, ich gebe Hex-Codes", description: "z.B. #3B82F6 für Blau" },
+        { label: "Nein, nutze Standard-Palette", description: "Tailwind Default Colors" }
+      ],
+      multiSelect: false
+    }
+  ]
+})
+```
+
+**Nach den Antworten:** Dokumentiere die Design-Entscheidungen kurz im Chat, bevor du implementierst.
+
+### 3. Technische Fragen klären
 - Mobile-first oder Desktop-first?
 - Welche Interactions? (Hover, Animations, Drag & Drop)
 - Accessibility Requirements? (WCAG 2.1 AA?)
 
-3. **Components implementieren:**
+### 4. Components implementieren
 - Erstelle Components in `/src/components`
 - Nutze Tailwind CSS für Styling
 - Nutze shadcn/ui für Standard-Components (Button, Input, etc.)
 
-4. **Integration:**
+### 5. Integration
 - Integriere Components in Pages (`/src/app`)
 - Verbinde mit Backend APIs (fetch/axios)
 
-5. **User Review:**
+### 6. User Review
 - Zeige UI im Browser (localhost:3000)
 - Frage: "Passt die UI? Änderungswünsche?"
 
@@ -120,6 +171,7 @@ export function ProjectCard({ id, title, taskCount, onDelete }: ProjectCardProps
 Bevor du die Frontend-Implementation als "fertig" markierst, stelle sicher:
 
 - [ ] **Bestehende Components geprüft:** Via Git Components/Hooks geprüft
+- [ ] **Design-Vorgaben geklärt:** Stil, Farben, Inspiration mit User besprochen (falls keine Mockups)
 - [ ] **Design gelesen:** Component Architecture vom Solution Architect verstanden
 - [ ] **Components erstellt:** Alle geplanten Components sind implementiert
 - [ ] **Tailwind Styling:** Alle Components nutzen Tailwind CSS (kein inline-style)

TEMPLATE_CHANGELOG.md

@@ -1,408 +1,100 @@
 # Template Changelog
 
-> **Note:** This file tracks changes to the **AI Coding Starter Kit Template** itself (not your project features).
->
-> For tracking features you build in your project, use `FEATURE_CHANGELOG.md` instead.
+> Tracks changes to the **AI Coding Starter Kit Template** itself.
+> For project features, use `FEATURE_CHANGELOG.md`.
 
 ---
 
-## v1.3.0 - Production-Ready Essentials (2026-01-12)
+## v1.4.2 (2026-01-16)
 
-### ✅ Changes
+**Frontend Developer: Design-Vorgaben abfragen**
+- Neuer Workflow-Schritt: Prüfe ob Design-Mockups existieren
+- Bei fehlenden Vorgaben: Frage nach Stil, Farben, Inspiration
+- Nutzt `AskUserQuestion` für interaktive Abfrage
+- Neue Checklist-Item: "Design-Vorgaben geklärt"
 
-#### 1. Production Guides Added to DevOps Agent
-
-**New Sections in `.claude/agents/devops.md`:**
-
-1. **Error Tracking Setup (Sentry)**
-   - 5-minute setup guide with code examples
-   - Environment variables configuration
-   - Alternative: Vercel Error Tracking
-
-2. **Security Headers (Next.js Config)**
-   - Copy-paste `next.config.js` with security headers
-   - XSS, Clickjacking, MIME-Sniffing protection
-   - HSTS (Strict-Transport-Security)
-
-3. **Environment Variables Best Practices**
-   - ✅ DO / ❌ DON'T guidelines
-   - `NEXT_PUBLIC_` prefix explanation
-   - Production vs Preview vs Development environments
-
-4. **Performance Monitoring (Lighthouse)**
-   - Quick check with Chrome DevTools
-   - Common performance killers + fixes
-   - Image optimization with `next/image`
-
-5. **Production-Ready Checklist**
-   - One-time checks for first deployment
-   - Error Tracking, Security Headers, Performance, SEO, Favicon
-
-**Benefits:**
-- ✅ Production-ready in 15 minutes (not days!)
-- ✅ All guides practical with copy-paste code
-- ✅ No theory – only actionable steps
+**Geändert:** `.claude/agents/frontend-dev.md`
 
 ---
 
-#### 2. Performance & Scalability Guides in Backend Agent
+## v1.4.1 (2026-01-16)
 
-**New Sections in `.claude/agents/backend-dev.md`:**
+**Requirements Engineer: Feature-Granularität**
+- Neuer Abschnitt "Single Responsibility" für Feature Specs
+- Regel: Jedes Feature-File = EINE testbare Einheit
+- Faustregeln für Aufteilung (5 Kriterien)
+- Abhängigkeiten zwischen Features dokumentieren
 
-1. **Database Indexing**
-   - When to create indexes (WHERE, ORDER BY, JOIN)
-   - Example: 500ms → <10ms query optimization
-   - Supabase-specific instructions
-
-2. **Query Performance Optimization**
-   - N+1 Query Problem (Bad vs Good examples)
-   - Supabase joins for efficient queries
-   - Always use `.limit()` for lists
-
-3. **Caching Strategy**
-   - When to cache (settings, profiles, expensive queries)
-   - Next.js `unstable_cache` examples
-   - Optional: Redis for advanced caching
-
-4. **Input Validation & Sanitization**
-   - Zod schemas for type-safe validation
-   - Example: Bad vs Good validation
-   - Security: Never trust user input!
-
-5. **Rate Limiting**
-   - Prevent abuse and DDoS attacks
-   - Upstash Redis example (optional)
-   - Alternative: Vercel Edge Config
-
-**Quick Reference Checklist:**
-- Indexing (PFLICHT!)
-- Query optimization, Input validation, Caching, Rate Limiting (optional but recommended)
+**Geändert:** `.claude/agents/requirements-engineer.md`
 
 ---
 
-#### 3. Test Reports Directory Added
+## v1.4.0 (2026-01-15)
 
-**New Directory:** `/test-reports/`
+**Git-basierter Workflow (Vereinfachung)**
+- `FEATURE_CHANGELOG.md` entfernt → Git-History ist Source of Truth
+- Agents nutzen `git log` statt manuelle Changelogs
+- Weniger Dateipflege, gleiche Übersicht
 
-- QA Engineer now saves test reports here
-- Naming: `PROJ-X-feature-name.md`
-- Complete `test-reports/README.md` with:
-  - Report structure guidelines
-  - Production-Ready criteria
-  - Regression testing workflow
-  - Tools (Browser DevTools, Lighthouse, axe DevTools)
-
-**Updated QA Agent:**
-- Checklist item: "Test-Report gespeichert in `/test-reports/PROJ-X-feature-name.md`"
-- Workflow includes saving reports
+**Entfernt:** `FEATURE_CHANGELOG.md`
+**Geändert:** Alle 6 Agent-Files
 
 ---
 
-#### 4. Template Branding & Clarity
+## v1.3.0 (2026-01-12)
 
-**README.md:**
-- Template renamed: "AI Coding Starter Kit" (from "Next.js Agent Starter")
-- Professional headline: "Build scalable, production-ready web apps faster"
-- Clear benefits section for PMs, Solo Founders, Small Teams
-- Production-Ready Features section highlighting DevOps + Backend guides
-- Agent-Team Workflow section with step-by-step examples
-- Tech Stack table (Framework, Language, Styling, etc.)
+**DevOps Agent: Production-Ready Guides**
+- Error Tracking (Sentry)
+- Security Headers
+- Environment Variables Best Practices
+- Performance Monitoring (Lighthouse)
+- Production Checklist
 
-**Clarity Improvements:**
-- Agents renamed in descriptions (e.g., "solution-architect.md" instead of file path only)
-- "PM-Friendly" emphasized (no code in specs, automatic handoffs)
-- Scripts section added (`npm run dev`, `build`, `start`, `lint`)
+**Backend Agent: Performance & Scalability**
+- Database Indexing
+- Query Optimization (N+1 Problem)
+- Caching Strategy
+- Input Validation (Zod)
+- Rate Limiting
+
+**QA Agent: Test Reports**
+- Neuer Ordner `/test-reports/`
+- Report-Format dokumentiert
+
+**Geändert:** `devops.md`, `backend-dev.md`, `qa-engineer.md`, `README.md`
+**Neu:** `test-reports/README.md`
 
 ---
 
-### 📦 New Files
+## v1.2.0 (2026-01-10)
 
-1. **`test-reports/README.md`** – QA Test Reports guidelines
+**Feature Changelog System**
+- `FEATURE_CHANGELOG.md` für Feature-Tracking
+- Alle 6 Agents prüfen bestehende Features
+- Verhindert Duplikate, ermöglicht Code-Reuse
+
+**Neu:** `FEATURE_CHANGELOG.md`
+**Geändert:** Alle 6 Agent-Files
 
 ---
 
-### 🔄 Updated Files
+## v1.1.0 (2026-01-10)
 
-1. **`.claude/agents/devops.md`**
-   - Added 5 production-ready sections (Error Tracking, Security, Env Vars, Performance, Checklist)
-   - Expanded from ~200 lines → ~400 lines
+**Agent System Improvements**
+- `.claude/skills/` → `.claude/agents/` umbenannt
+- Requirements Engineer nutzt `AskUserQuestion` Tool
+- Interaktive Single/Multiple-Choice statt Freitext
 
-2. **`.claude/agents/backend-dev.md`**
-   - Added 5 performance/scalability sections (Indexing, Query Optimization, Caching, Validation, Rate Limiting)
-   - Expanded from ~180 lines → ~350 lines
-
-3. **`.claude/agents/qa-engineer.md`**
-   - Updated workflow: Test reports saved to `/test-reports/`
-   - Added checklist item: "Test-Report gespeichert"
-
-4. **`README.md`**
-   - Complete rewrite: More professional, clearer structure
-   - Added Production-Ready Features section
-   - Added Agent-Team Workflow section
-   - Added Why This Template section (PMs, Solo Founders, Teams)
-
-5. **`TEMPLATE_CHANGELOG.md`**
-   - Added this v1.3.0 entry
+**Neu:** `HOW_TO_USE_AGENTS.md`, `TEMPLATE_CHANGELOG.md`
+**Geändert:** `requirements-engineer.md`, `README.md`, `PROJECT_CONTEXT.md`
 
 ---
 
-### 🚀 Migration Guide
-
-No migration needed – all changes are additive.
-
-If you cloned v1.2.0:
-1. Update your agents: Copy `.claude/agents/devops.md` and `.claude/agents/backend-dev.md`
-2. Create `/test-reports/` directory
-3. Copy `test-reports/README.md`
-
----
-
-## v1.2.0 - Feature Changelog System (2026-01-10)
-
-### ✅ Änderungen
-
-#### 1. Neue `FEATURE_CHANGELOG.md` für Feature-Tracking
-
-**Problem vorher:**
-- Agents wussten nicht, welche Features bereits existieren
-- Risiko von Duplikaten oder redundanter Infrastruktur
-- Keine zentrale Übersicht über implementierte Features
-
-**Jetzt:**
-- `FEATURE_CHANGELOG.md` trackt chronologisch ALLE implementierten Features
-- Enthält: Implementation Details, neue Files, Database Changes, API Endpoints, Abhängigkeiten
-- Wird vom DevOps Agent nach jedem Deployment updated
-
-**Format:**
-```markdown
-## [PROJ-X] Feature-Name (2026-XX-XX)
-
-### Implementiert ✅
-- **Status:** Done
-- **Feature Spec:** `/features/PROJ-X-feature-name.md`
-- **Implementiert von:** Frontend Dev + Backend Dev
-- **Getestet von:** QA Engineer
-- **Deployed:** 2026-XX-XX
-
-### Was wurde gebaut?
-[1-2 Sätze Beschreibung]
-
-### Neue Files
-- `src/components/NewComponent.tsx` - [Beschreibung]
-
-### Database Changes
-```sql
-CREATE TABLE new_table (...);
-```
-
-### API Endpoints
-- `GET /api/endpoint` - [Beschreibung]
-
-### Abhängigkeiten
-- Baut auf: [PROJ-1], [PROJ-2]
-```
-
-**Benefits:**
-- ✅ Agents können bestehende Components/APIs/Tables wiederverwenden
-- ✅ Verhindert Duplicate Features
-- ✅ QA weiß, welche Features für Regression Tests relevant sind
-- ✅ Zentrale Dokumentation aller Features
-
----
-
-#### 2. Alle 6 Agents integrieren jetzt FEATURE_CHANGELOG.md
-
-**Updated:**
-
-1. **Requirements Engineer:**
-   - Prüft vor Feature Spec, ob ähnliches Feature existiert
-   - Checkt vergebene Feature-IDs
-
-2. **Solution Architect:**
-   - Prüft bestehende Components/APIs/Database Tables
-   - Kann auf existierender Infrastruktur aufbauen
-
-3. **Frontend Developer:**
-   - Prüft wiederverwendbare Components, Hooks, Styling-Patterns
-   - Verhindert Duplicate Code
-
-4. **Backend Developer:**
-   - Prüft bestehende Database Tables, Columns, API Endpoints, RLS Policies
-   - Kann Schema erweitern statt neu erstellen
-
-5. **QA Engineer:**
-   - Prüft bestehende Features für Regression Tests
-   - Sieht Feature-Abhängigkeiten
-
-6. **DevOps Engineer:**
-   - Updated FEATURE_CHANGELOG.md nach jedem Deployment
-   - Dokumentiert Implementation Details für zukünftige Features
-
-**Alle Agents haben:**
-- Neue Verantwortlichkeit: "FEATURE_CHANGELOG.md lesen"
-- ⚠️ Warnung-Sektion mit Erklärung
-- Checklist-Item: "FEATURE_CHANGELOG.md gelesen"
-
----
-
-### 📦 Neue Files
-
-1. **`FEATURE_CHANGELOG.md`** – Feature-Tracking System (Template + Guidelines)
-
----
-
-### 🔄 Updated Files
-
-1. **`.claude/agents/requirements-engineer.md`**
-   - FEATURE_CHANGELOG.md Integration
-   - Prüft vergebene Feature-IDs
-
-2. **`.claude/agents/solution-architect.md`**
-   - FEATURE_CHANGELOG.md Integration
-   - Prüft bestehende Infrastruktur
-
-3. **`.claude/agents/frontend-dev.md`**
-   - FEATURE_CHANGELOG.md Integration
-   - Code-Reuse Fokus
-
-4. **`.claude/agents/backend-dev.md`**
-   - FEATURE_CHANGELOG.md Integration
-   - Schema-Erweiterung statt Neuerstellung
-
-5. **`.claude/agents/qa-engineer.md`**
-   - FEATURE_CHANGELOG.md Integration
-   - Regression Testing Focus
-
-6. **`.claude/agents/devops.md`**
-   - FEATURE_CHANGELOG.md Update-Pflicht nach Deployment
-   - Vollständige Update-Anleitung
-
----
-
-## v1.1.0 - Agent System Improvements (2026-01-10)
-
-### ✅ Änderungen
-
-#### 1. `.claude/skills/` → `.claude/agents/` umbenannt
-
-**Warum?**
-- Agents sind KEINE registrierten Claude Code Skills
-- Vermeidet Verwirrung (man kann sie nicht mit `/command` aufrufen)
-- Klarere Benennung: Prompt-Templates / Role-Definitions
-
-**Betroffen:**
-- Ordner umbenen nt: `.claude/agents/`
-- Alle Dokumentations-Files updated (README, PROJECT_CONTEXT, etc.)
-
----
-
-#### 2. Requirements Engineer: Interaktive Fragen mit `AskUserQuestion`
-
-**Vorher:**
-```markdown
-Fragen stellen:
-- Wer sind die User?
-- Was ist der Haupt-Use-Case?
-```
-→ Agent rattert Fragen als Text runter
-
-**Jetzt:**
-```typescript
-AskUserQuestion({
-  questions: [
-    {
-      question: "Wer sind die primären User dieses Features?",
-      header: "Zielgruppe",
-      options: [
-        { label: "Solo-Gründer", description: "..." },
-        { label: "Kleine Teams (2-10)", description: "..." },
-        ...
-      ],
-      multiSelect: false
-    }
-  ]
-})
-```
-→ Agent nutzt interaktive Single/Multiple-Choice Fragen!
-
-**Benefits:**
-- User kann per Mausklick antworten (statt tippen)
-- Strukturierte Antworten (keine freien Texte)
-- Bessere User Experience
-- Systematischer Workflow
-
----
-
-#### 3. Neue Dokumentation: `HOW_TO_USE_AGENTS.md`
-
-**Inhalt:**
-- ✅ Erklärt, dass Agents KEINE Skills sind
-- ✅ Zeigt, wie man Agents richtig nutzt (Referenzierung)
-- ✅ Best Practice Workflows mit Beispielen
-- ✅ Voice-First Development Tipps
-- ✅ Troubleshooting
-- ✅ Quick Reference Table
-
-**Use Case:**
-User, die das Template clonen, wissen sofort wie sie die Agents nutzen.
-
----
-
-### 📦 Neue Files
-
-1. **`HOW_TO_USE_AGENTS.md`** – Vollständige Nutzungsanleitung
-2. **`TEMPLATE_CHANGELOG.md`** – Dieses File (Template Version History)
-
----
-
-### 🔄 Updated Files
-
-1. **`.claude/agents/requirements-engineer.md`**
-   - Workflow komplett überarbeitet
-   - Nutzt jetzt `AskUserQuestion` Tool
-   - 4 Phasen: Feature verstehen → Edge Cases → Spec schreiben → Review
-
-2. **`README.md`**
-   - Warnung hinzugefügt: Agents sind keine Skills
-   - Link zu HOW_TO_USE_AGENTS.md
-
-3. **`PROJECT_CONTEXT.md`**
-   - Pfade updated (`.claude/agents/`)
-
-4. **`TEMPLATE_OVERVIEW.md`**
-   - Pfade updated
-
-5. **`CHECKLIST.md`**
-   - Pfade updated
-
----
-
-### 🚀 Migration Guide (für bestehende Nutzer)
-
-Falls du das Template bereits gecloned hast:
-
-```bash
-cd ai-coding-starter-kit
-mv .claude/skills .claude/agents
-```
-
-Fertig! Keine weiteren Änderungen nötig.
-
----
-
-## v1.0.0 - Initial Release (2026-01-10)
-
-### Features
-
-- ✅ Next.js 16 + TypeScript + Tailwind CSS
-- ✅ 6 AI Agents mit Checklisten
-- ✅ Supabase-Ready (optional)
-- ✅ shadcn/ui-Ready
-- ✅ Vercel Deployment-Ready
-- ✅ PROJECT_CONTEXT.md Template
-- ✅ Feature Specs System (`/features/PROJ-X.md`)
-- ✅ Vollständige Dokumentation
-
----
-
-**Letzte Aktualisierung:** 2026-01-10
+## v1.0.0 (2026-01-10)
+
+**Initial Release**
+- Next.js 15 + TypeScript + Tailwind CSS
+- 6 AI Agents mit Checklisten
+- Supabase-Ready, shadcn/ui-Ready, Vercel-Ready
+- PROJECT_CONTEXT.md Template
+- Feature Specs System (`/features/PROJ-X.md`)