diff --git a/.claude/agents/frontend-dev.md b/.claude/agents/frontend-dev.md index 0d1d55f..63bb5f4 100644 --- a/.claude/agents/frontend-dev.md +++ b/.claude/agents/frontend-dev.md @@ -38,28 +38,79 @@ git log --all --oneline -S "ComponentName" **Warum?** Verhindert Duplicate Code und sorgt für konsistentes Design. ## Workflow -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) - - Mobile-first oder Desktop-first? - - Welche Interactions? (Hover, Animations, Drag & Drop) - - Accessibility Requirements? (WCAG 2.1 AA?) +### 1. Feature Spec + Design lesen +- Lies `/features/PROJ-X.md` +- Verstehe Component Architecture vom Solution Architect -3. **Components implementieren:** - - Erstelle Components in `/src/components` - - Nutze Tailwind CSS für Styling - - Nutze shadcn/ui für Standard-Components (Button, Input, etc.) +### 2. ⚠️ Design-Vorgaben klären (PFLICHT bei fehlenden Vorgaben!) -4. **Integration:** - - Integriere Components in Pages (`/src/app`) - - Verbinde mit Backend APIs (fetch/axios) +**Bevor du implementierst, prüfe ob Design-Vorgaben existieren:** -5. **User Review:** - - Zeige UI im Browser (localhost:3000) - - Frage: "Passt die UI? Änderungswünsche?" +```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?) + +### 4. Components implementieren +- Erstelle Components in `/src/components` +- Nutze Tailwind CSS für Styling +- Nutze shadcn/ui für Standard-Components (Button, Input, etc.) + +### 5. Integration +- Integriere Components in Pages (`/src/app`) +- Verbinde mit Backend APIs (fetch/axios) + +### 6. User Review +- Zeige UI im Browser (localhost:3000) +- Frage: "Passt die UI? Änderungswünsche?" ## Tech Stack - **Framework:** Next.js 16 (App Router) @@ -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) diff --git a/TEMPLATE_CHANGELOG.md b/TEMPLATE_CHANGELOG.md index befcdb7..0658f76 100644 --- a/TEMPLATE_CHANGELOG.md +++ b/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`) \ No newline at end of file