Agent Teams bedeutet: Du arbeitest nicht mit einem einzelnen Claude-Chat, sondern lässt mehrere spezialisierte Agenten parallel an verschiedenen Teilen deines Projekts arbeiten. Ein Agent baut das Frontend, einer kümmert sich um die API, einer schreibt Tests — und du orchestrierst das Ganze.
Das funktioniert über Claude Code im Terminal (nicht über claude.ai im Browser). Claude Code ist ein CLI-Tool, das Agenten direkt in deinem Dateisystem arbeiten lässt — mit echtem Dateizugriff, Terminal-Befehlen und der Fähigkeit, Code zu schreiben, auszuführen und zu testen.
Essentiell:
npm install -g @anthropic-ai/claude-code. Braucht einen Anthropic API Key oder Claude Max/Pro Subscription.Nice to have:
Ctrl+Backtick)claude💡 Tipp: Benenne deine Terminal-Tabs nach den Agenten-Rollen, z.B. „Agent: Frontend", „Agent: Backend", „Agent: DevOps". So behältst du den Überblick.
Agenten arbeiten am besten, wenn sie klare Grenzen, konkreten Kontext und eine definierte Rolle haben.
1. Rolle + Scope definieren
Du bist der Frontend-Agent. Du arbeitest ausschließlich im /src/components
und /src/pages Verzeichnis. Du nutzt Next.js 14 mit App Router,
Tailwind CSS und TypeScript. Du fasst KEINE Backend-Dateien an.
2. Tech Stack explizit benennen
Tech Stack:
- Next.js 14 (App Router, Server Components wo möglich)
- TypeScript strict mode
- Tailwind CSS (keine eigenen CSS-Dateien)
- Shadcn/ui für UI-Komponenten
- Stripe für Payments (stripe npm package)
- Resend für E-Mails
3. Dateikonventionen mitgeben
Dateikonventionen:
- Komponenten: PascalCase (z.B. CourseCard.tsx)
- Utilities: camelCase (z.B. formatPrice.ts)
- API Routes: route.ts in /app/api/[endpoint]/
- Typen: types.ts pro Feature-Ordner
4. Output-Erwartung formulieren
Erstelle die komplette Komponente mit:
- TypeScript Types/Interfaces
- Error Handling
- Loading States
- Responsive Design (Mobile First)
- Accessibility (aria-labels, Keyboard Navigation)
Frontend-Agent:
Du bist der Frontend-Agent für eine Online-Coaching-Plattform.
Dein Scope: Alle UI-Komponenten und Pages in /src.
Tech: Next.js 14 App Router, TypeScript, Tailwind, Shadcn/ui.
Du konsumierst APIs, die der Backend-Agent bereitstellt.
API Base URL: /api/
Auth: NextAuth.js Session (useSession Hook).
Backend-Agent:
Du bist der Backend-Agent. Dein Scope: /src/app/api/, /src/lib/,
Datenbank-Schema und Middleware.
Tech: Next.js API Routes, Prisma ORM, PostgreSQL, Stripe SDK, Resend.
Du baust REST-Endpoints, die der Frontend-Agent konsumiert.
Dokumentiere jeden Endpoint mit Input/Output Types.
DevOps-Agent:
Du bist der DevOps-Agent. Dein Scope: Deployment-Config,
Environment Variables, CI/CD, Docker.
Tech: Vercel, GitHub Actions, PostgreSQL (Supabase).
Du fasst keinen Application Code an — nur Config-Dateien.
Der Plan Mode ist eine Funktion in Claude Code, mit der du den Agenten erst einen detaillierten Plan erstellen lässt, bevor er Code schreibt. Das ist besonders wichtig bei Agent Teams, weil:
Schritt 1: Plan Mode aktivieren
Starte Claude Code und wechsle mit Shift+Tab in den Plan Mode (oder tippe /plan). Der Agent denkt dann nach, schreibt aber keinen Code.
Schritt 2: Architektur-Prompt geben
Ich baue eine Online-Coaching-Plattform mit Payments und geschütztem
Kursbereich. Erstelle einen detaillierten technischen Plan:
1. Projektstruktur (Ordner + Dateien)
2. Datenmodell (User, Course, Module, Chapter, Payment)
3. API-Endpoints (alle Routes mit Method, Input, Output)
4. Auth-Flow (Registration, Login, Payment → Access)
5. Deployment-Architektur
Schreibe KEINEN Code. Nur den Plan.
Schritt 3: Plan reviewen und anpassen
Schritt 4: Plan als Referenz-Dokument speichern in ARCHITECTURE.md oder PLAN.md.
Schritt 5: Plan an alle Agenten verteilen
Jeder Agent bekommt als erstes Prompt:
Lies die Datei PLAN.md im Projekt-Root. Das ist unser Architektur-Plan.
Du bist Agent [Rolle]. Arbeite ausschließlich deinen Teil ab.
Ohne Plan Mode passiert Folgendes: Der Frontend-Agent baut einen Login mit /api/auth/login, der Backend-Agent erstellt aber /api/users/authenticate. Beide arbeiten fleißig — aber nichts passt zusammen. Plan Mode = Single Source of Truth.
Eine Firmenwebsite für einen fiktiven Kurs „KI-Webdesign Masterclass" — ein Online-Coaching, das lehrt, wie man KI einsetzt, um Websites zu bauen.
Features:
Für dieses Projekt setzen wir 4 Agenten ein:
| Agent | Rolle | Scope | Terminal-Tab |
|---|---|---|---|
| 🏗️ Architekt | Plant die gesamte Struktur (Plan Mode) | PLAN.md, Datenmodell, API-Contracts | Tab 1 |
| 🎨 Frontend | Baut UI, Pages, Komponenten | /src/components, /src/app/(public), /src/app/(course) | Tab 2 |
| ⚙️ Backend | APIs, Auth, Payments, E-Mail | /src/app/api, /src/lib, /prisma | Tab 3 |
| 🧪 QA/Test | Schreibt Tests, prüft Integration | /tests, /e2e, Linting | Tab 4 |
/plan
Ich baue "KI-Webdesign Masterclass" — eine Online-Coaching-Plattform.
Anforderungen:
- Next.js 14 App Router, TypeScript, Tailwind, Shadcn/ui
- Stripe Checkout (Einmalzahlung, 297€)
- NextAuth.js (Email + Google Login)
- Prisma + PostgreSQL (Supabase)
- Resend für Transaktions-E-Mails
- Geschützter Kursbereich nach Payment
- 3 Module × 3 Kapitel
Erstelle:
1. Komplette Ordnerstruktur
2. Datenmodell (Prisma Schema)
3. Alle API-Endpoints mit Types
4. Auth + Payment Flow
5. Routing-Struktur (public vs. protected)
Nur planen. Kein Code.
Ergebnis: Eine PLAN.md mit der gesamten Architektur.
Frontend- und Backend-Agent starten gleichzeitig mit Verweis auf die PLAN.md.
QA-Agent prüft Auth-Flow, Payment-Flow, Kursbereich und schreibt E2E-Tests mit Playwright.
| Problem | Lösung |
|---|---|
| Agenten überschreiben sich gegenseitig | Git Worktrees nutzen: Jeder Agent arbeitet in einem eigenen Worktree |
| API-Contracts stimmen nicht überein | Shared Types in /src/types/ definieren — VOR dem Start der Agenten |
| Agent vergisst den Kontext | PLAN.md als erstes lesen lassen + CLAUDE.md mit Projektregeln anlegen |
| Merge-Konflikte | Klare Ordner-Boundaries pro Agent. Agenten arbeiten NIE in denselben Dateien |
| Agent macht zu viel auf einmal | Kleinere, sequenzielle Tasks geben statt „Bau alles" |
1. Immer mit Plan Mode starten. Kein Agent schreibt Code, bevor die Architektur steht.
2. CLAUDE.md ist dein Manifest. Leg eine CLAUDE.md im Projekt-Root an mit Tech Stack, Konventionen und Regeln. Jeder Agent liest sie automatisch.
3. Ein Agent = Ein Scope. Niemals zwei Agenten in denselben Dateien arbeiten lassen.
4. Shared Types zuerst. Bevor Frontend und Backend parallel starten, müssen die gemeinsamen TypeScript-Interfaces stehen.
5. Kleine Batches, häufig committen. Lass jeden Agenten nach jedem Feature committen. So kannst du jederzeit zurückrollen.
6. Git Worktrees für Profis. git worktree add ../agent-frontend feature/frontend — jeder Agent hat sein eigenes Verzeichnis.
7. Review-Runden einbauen. Nach jeder Phase: Stoppen, Code reviewen, dann weiter. Nicht blind durchlaufen lassen.
| Aktion | Befehl / Shortcut |
|---|---|
| Claude Code starten | claude im Terminal |
| Plan Mode aktivieren | Shift+Tab oder /plan |
| Neues Terminal für Agent | Ctrl+Shift+5 (VS Code Split) |
| Agent Kontext geben | „Lies PLAN.md. Du bist [Rolle]." |
| Worktree erstellen | git worktree add ../agent-name branch-name |
| Alle Agents stoppen | Ctrl+C in jedem Terminal |
Kein Spam, jederzeit abbestellbar