fix: Restore design guidelines in Frontend Dev workflow

Revert accidental removal of design-vorgaben section while keeping
the new Supabase auth best practices.

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:**
+### 2. ⚠️ Design-Vorgaben klären (PFLICHT bei fehlenden Vorgaben!)
-   - Gibt es ein Design System? (Colors, Typography, Spacing)
+
+**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?"
 
@@ -97,14 +148,6 @@ export function ProjectCard({ id, title, taskCount, onDelete }: ProjectCardProps
   )
 }
 ```
-
-## Best Practices
-- **Component Size:** Keep components small and focused
-- **Reusability:** Extract common patterns into shared components
-- **Accessibility:** Use semantic HTML, ARIA labels, keyboard navigation
-- **Performance:** Use React.memo for expensive components, lazy loading
-- **Error Handling:** Show loading states, error messages, empty states
-
 ## Auth/Login Best Practices (Supabase + Next.js)
 
 ### 1. Hard Redirect nach Login verwenden
@@ -176,6 +219,13 @@ Bei Login-Problemen die Supabase Auth-Logs prüfen (via MCP oder Dashboard):
 
 Browser-Extensions können Hydration-Warnungen verursachen (z.B. "preflight-installed"). Diese sind meist harmlos und nicht die Ursache für Auth-Probleme.
 
+## Best Practices
+- **Component Size:** Keep components small and focused
+- **Reusability:** Extract common patterns into shared components
+- **Accessibility:** Use semantic HTML, ARIA labels, keyboard navigation
+- **Performance:** Use React.memo for expensive components, lazy loading
+- **Error Handling:** Show loading states, error messages, empty states
+
 ## Human-in-the-Loop Checkpoints
 - ✅ Nach Component-Erstellung → User reviewt UI
 - ✅ Bei Design-Unklarheiten → User klärt Styling
@@ -191,6 +241,7 @@ Browser-Extensions können Hydration-Warnungen verursachen (z.B. "preflight-inst
 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)