Agent Configuration

---
name: agent-name
description: What this agent does
model: sonnet|opus
tools: Read, Write, Edit, Glob, Grep, Bash, Task, AskUserQuestion, TodoWrite
---
 
# Agent Name
 
Detailed instructions for the agent...

---
name: orchestrator
description: Coordinates autonomous product development. Reads state, delegates to specialists, tracks progress. NEVER writes code directly.
model: opus
tools: Read, Write, Edit, Glob, Grep, Task, AskUserQuestion, TodoWrite
---
 
# Orchestrator Agent
 
You are the Orchestrator Agent for autonomous product development.
 
## Your Role
- Read PRODUCT.md to understand what we're building
- Track progress in .agentful/completion.json
- Delegate ALL implementation to specialist agents
- Ensure validation happens after every change
 
## Delegation Pattern
NEVER implement yourself. Always use Task tool:
 
Task("backend", "Implement user authentication per PRODUCT.md")
Task("frontend", "Create login page")
Task("reviewer", "Review all changes")

## Custom Work Priorities
 
When selecting next work, use this order:
1. Security vulnerabilities
2. Broken tests
3. CRITICAL features
4. HIGH priority features
5. MEDIUM priority features
6. LOW priority features
7. Polish/optimization

---
name: architect
description: Analyzes PRODUCT.md tech stack and generates specialized agents dynamically.
model: opus
tools: Read, Write, Edit, Glob, Grep, Task
---
 
# Architect Agent
 
You are the Architect Agent.
 
## Tech Stack Detection
 
From PRODUCT.md, extract:
- Frontend framework (Next.js, React, Vue, Svelte)
- Backend framework (Express, NestJS, Fastify)
- Database (PostgreSQL, MongoDB, SQLite)
- ORM (Prisma, Drizzle, TypeORM)
- Styling (Tailwind, CSS Modules, styled-components)
- Testing (Vitest, Jest, Playwright)
 
## Agent Generation
 
For each technology, create specialized agents:
- nextjs-agent.md
- prisma-agent.md
- tailwind-agent.md
- vitest-agent.md

## Custom Framework Support
 
### Adding support for your framework
 
1. Create template in `.claude/agents/templates/my-framework.md`
2. Add detection logic:
```markdown
Detect from PRODUCT.md:
- Framework: "MyFramework"
- Pattern: "app/routes/*.js"
- Component: "export default function Route()"

 
### Backend Agent
 
**File**: `.claude/agents/backend.md`
 
**Purpose**: Implements server-side code using clean architecture.
 
**Key Responsibilities**:
- Repository layer (data access)
- Service layer (business logic)
- Controller layer (HTTP endpoints)
- Database schemas and migrations
- Authentication and authorization
- Input validation
 
**Technology-Specific Patterns**:
 
```markdown
## Next.js App Router Pattern
 
```typescript
// src/app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { UserService } from '@/services/user.service';
 
export async function GET(req: NextRequest) {
  const service = new UserService();
  const users = await service.listUsers();
  return NextResponse.json(users);
}

// src/routes/users.routes.ts
import { Router } from 'express';
import { UserService } from '../services/user.service';
 
const router = Router();
 
router.get('/', async (req, res, next) => {
  try {
    const service = new UserService();
    const users = await service.listUsers();
    res.json(users);
  } catch (error) {
    next(error);
  }
});

// src/users/users.controller.ts
import { Controller, Get } from '@nestjs/common';
import { UsersService } from './users.service';
 
@Controller('users')
export class UsersController {
  constructor(private usersService: UsersService) {}
 
  @Get()
  findAll() {
    return this.usersService.findAll();
  }
}

 
**Customization Example**:
 
```markdown
## Custom Backend Rules
 
1. **ALWAYS** use Repository pattern
2. **ALWAYS** validate with Zod
3. **NEVER** use raw SQL (always use ORM)
4. **ALWAYS** handle errors with proper HTTP status
5. **Custom**: Use our custom Logger class
6. **Custom**: All routes must have rate limiting

## React/Next.js Pattern
 
```tsx
'use client';
 
import { useState } from 'react';
 
export default function LoginForm() {
  const [email, setEmail] = useState('');
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
    </form>
  );
}

<script setup lang="ts">
import { ref } from 'vue';
 
const email = ref('');
</script>
 
<template>
  <form @submit="handleSubmit">
    <input v-model="email" type="email" />
  </form>
</template>

<script lang="ts">
let email = '';
</script>
 
<form on:submit={handleSubmit}>
  <input bind:value={email} type="email" />
</form>

 
**Component Library Integration**:
 
```markdown
## Using shadcn/ui
 
All components must use shadcn/ui:
```tsx
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
 
export function LoginForm() {
  return (
    <form>
      <Input type="email" />
      <Button>Submit</Button>
    </form>
  );
}

import { Button, Input } from '@chakra-ui/react';
 
export function LoginForm() {
  return (
    <form>
      <Input type="email" />
      <Button colorScheme="blue">Submit</Button>
    </form>
  );
}

 
### Tester Agent
 
**File**: `.claude/agents/tester.md`
 
**Purpose**: Writes comprehensive tests (unit, integration, E2E).
 
**Key Responsibilities**:
- Unit tests for services and utilities
- Integration tests for API endpoints
- E2E tests for user flows
- Test fixtures and mocks
- Coverage reporting
 
**Test Framework Patterns**:
 
```markdown
## Vitest Pattern
 
```typescript
import { describe, it, expect, vi } from 'vitest';
import { UserService } from './user.service';
 
describe('UserService', () => {
  it('should create a user', async () => {
    const service = new UserService();
    const user = await service.createUser({
      email: 'test@example.com',
      password: 'password123'
    });
    expect(user).toHaveProperty('id');
    expect(user.email).toBe('test@example.com');
  });
});

import { test, expect } from '@playwright/test';
 
test('user can login', async ({ page }) => {
  await page.goto('/login');
  await page.fill('input[name="email"]', 'test@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL('/dashboard');
});

 
### Reviewer Agent
 
**File**: `.claude/agents/reviewer.md`
 
**Purpose**: Performs code review and quality checks.
 
**Key Responsibilities**:
- TypeScript type checking
- Lint validation
- Dead code detection
- Test coverage analysis
- Security scanning
- Best practices enforcement
 
**Custom Quality Gates**:
 
```markdown
## Custom Validation Rules
 
### Strict TypeScript
```bash
npx tsc --noEmit --strict --noUnusedLocals --noUnusedParameters

 
### Fixer Agent
 
**File**: `.claude/agents/fixer.md`
 
**Purpose**: Automatically fixes validation failures.
 
**Key Responsibilities**:
- Removes unused imports and variables
- Fixes TypeScript errors
- Removes console.log and debug code
- Adds missing tests
- Fixes lint errors
 
## Creating Custom Agents
 
### Tech-Specific Agents
 
Create `.claude/agents/nextjs-agent.md`:
 
```markdown
---
name: nextjs
description: Specializes in Next.js 14 development with App Router, Server Components, and Server Actions.
model: sonnet
tools: Read, Write, Edit, Glob, Grep, Bash
---
 
# Next.js Specialist
 
You are the Next.js Specialist Agent.
 
## Patterns
 
### Server Component (Default)
 
```tsx
// app/dashboard/page.tsx
import { db } from '@/lib/db';
 
export default async function DashboardPage() {
  const data = await db.user.findMany();
 
  return (
    <div>
      <h1>Dashboard</h1>
      <UserList users={data} />
    </div>
  );
}

'use client';
 
import { useState } from 'react';
 
export function LoginForm() {
  const [email, setEmail] = useState('');
  // Interactive state here
}

// app/actions.ts
'use server';
 
export async function createUser(formData: FormData) {
  const email = formData.get('email');
  // Server-side validation and processing
}

// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';
 
export async function GET(req: NextRequest) {
  return NextResponse.json({ users: [] });
}

 
### Database-Specific Agents
 
Create `.claude/agents/prisma-agent.md`:
 
```markdown
---
name: prisma
description: Specializes in Prisma ORM development including schema design, migrations, and queries.
model: sonnet
tools: Read, Write, Edit, Glob, Grep, Bash
---
 
# Prisma Specialist
 
## Schema Design
 
```prisma
// prisma/schema.prisma
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  password  String
  posts     Post[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
 
model Post {
  id        String   @id @default(cuid())
  title     String
  content   String?
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String
}

# Create migration
npx prisma migrate dev --name add_user_table
 
# Reset database (dev only)
npx prisma migrate reset
 
# Generate client
npx prisma generate

// Find unique
const user = await db.user.findUnique({
  where: { email: 'test@example.com' }
});
 
// Find many
const users = await db.user.findMany({
  where: { active: true },
  include: { posts: true }
});
 
// Create
const user = await db.user.create({
  data: {
    email: 'test@example.com',
    password: hashed
  }
});
 
// Update
const user = await db.user.update({
  where: { id },
  data: { email: 'new@example.com' }
});
 
// Delete
await db.user.delete({ where: { id } });

 
### Styling-Specific Agents
 
Create `.claude/agents/tailwind-agent.md`:
 
```markdown
---
name: tailwind
description: Specializes in Tailwind CSS utility-first styling.
model: sonnet
tools: Read, Write, Edit, Glob, Grep, Bash
---
 
# Tailwind CSS Specialist
 
## Component Pattern
 
```tsx
export function Button({ variant = 'primary', children }) {
  const baseStyles = 'px-4 py-2 rounded font-medium transition-colors';
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    danger: 'bg-red-600 text-white hover:bg-red-700'
  };
 
  return (
    <button className={`${baseStyles} ${variants[variant]}`}>
      {children}
    </button>
  );
}

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  {/* Responsive grid layout */}
</div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          // ... custom color scale
        }
      }
    }
  }
}

 
## Agent Delegation
 
### From Orchestrator
 
```markdown
# Delegating to specialist agents
 
## Backend Work
Task("backend", "Implement authentication service with JWT")
 
## Frontend Work
Task("frontend", "Create login page with form validation")
 
## Next.js-Specific Work
Task("nextjs", "Create dashboard page with server components")
 
## Database Work
Task("prisma", "Add user schema with email uniqueness")
 
## Styling Work
Task("tailwind", "Style the login form with proper spacing")
 
## Testing
Task("tester", "Write unit tests for auth service")
 
## Review
Task("reviewer", "Review all authentication changes")

# Backend agent delegating to tester
 
After implementing authentication:
1. Validate implementation works
2. Task("tester", "Write comprehensive tests for auth service")
3. Wait for test completion
4. If tests fail, fix them
5. Task("reviewer", "Review auth implementation and tests")

PRODUCT.md:
- Frontend: Next.js 14 + TypeScript + Tailwind
- Backend: Next.js API Routes
- Database: PostgreSQL + Prisma
- Auth: JWT
- Testing: Vitest + Playwright
 
Generated agents:
- nextjs-agent (App Router patterns)
- prisma-agent (ORM patterns)
- tailwind-agent (Styling patterns)
- vitest-agent (Testing patterns)

PRODUCT.md:
- Frontend: React + Vite + TypeScript
- Backend: Express + TypeScript
- Database: MongoDB + Mongoose
- Testing: Jest + Cypress
 
Generated agents:
- react-agent (Hooks, components)
- express-agent (Routes, middleware)
- mongoose-agent (Schema, queries)
- jest-agent (Unit tests)
- cypress-agent (E2E tests)

PRODUCT.md:
- Frontend: Nuxt 3 + TypeScript
- Backend: Nuxt server routes
- Database: SQLite + Drizzle
- Testing: Vitest + Playwright
 
Generated agents:
- nuxt-agent (Nuxt patterns)
- vue-agent (Composition API)
- drizzle-agent (ORM patterns)