Claude-Code-Workflow/docs/agents/custom.md

Custom Agents

Guide to creating and configuring custom CCW agents.

Agent Structure

~/.claude/agents/my-agent/
├── AGENT.md          # Agent definition
├── index.ts          # Agent logic
├── tools/            # Agent-specific tools
└── examples/         # Usage examples

Creating an Agent

1. Define Agent

Create AGENT.md:

---
name: my-agent
type: development
version: 1.0.0
capabilities: [react, typescript, testing]
---

# My Custom Agent

Specialized agent for React component development with TypeScript.

## Capabilities

- Generate React components with hooks
- TypeScript type definitions
- Vitest testing setup
- Tailwind CSS styling

## Usage

\`\`\`javascript
Task({
  subagent_type: "my-agent",
  prompt: "Create a user profile component"
})
\`\`\`

2. Implement Agent Logic

Create index.ts:

import type { AgentContext, AgentResult } from '@ccw/types'

export async function execute(
  prompt: string,
  context: AgentContext
): Promise<AgentResult> {
  // Analyze request
  const intent = analyzeIntent(prompt)

  // Execute based on intent
  switch (intent.type) {
    case 'generate-component':
      return await generateComponent(intent.options)
    case 'add-tests':
      return await addTests(intent.options)
    default:
      return await handleGeneral(prompt)
  }
}

function analyzeIntent(prompt: string) {
  // Parse user intent from prompt
  // Return structured intent object
}

Agent Capabilities

Code Generation

async function generateComponent(options: ComponentOptions) {
  return {
    files: [
      {
        path: 'src/components/UserProfile.tsx',
        content: generateReactComponent(options)
      },
      {
        path: 'src/components/UserProfile.test.tsx',
        content: generateTests(options)
      }
    ]
  }
}

Analysis

async function analyzeCodebase(context: AgentContext) {
  const files = await context.filesystem.read('src/**/*.ts')
  const patterns = identifyPatterns(files)
  return {
    patterns,
    recommendations: generateRecommendations(patterns)
  }
}

Testing

async function generateTests(options: TestOptions) {
  return {
    framework: 'vitest',
    files: [
      {
        path: `${options.file}.test.ts`,
        content: generateTestCode(options)
      }
    ]
  }
}

Agent Tools

Agents can define custom tools:

export const tools = {
  'my-tool': {
    description: 'My custom tool',
    parameters: {
      type: 'object',
      properties: {
        input: { type: 'string' }
      }
    },
    execute: async (params) => {
      // Tool implementation
    }
  }
}

Agent Communication

Agents communicate via message bus:

// Send message to another agent
await context.messaging.send({
  to: 'tester',
  type: 'task-complete',
  data: { files: generatedFiles }
})

// Receive messages
context.messaging.on('task-complete', async (message) => {
  if (message.from === 'executor') {
    await startTesting(message.data.files)
  }
})

Agent Configuration

Configure agents in ~/.claude/agents/config.json:

{
  "my-agent": {
    "enabled": true,
    "priority": 10,
    "capabilities": {
      "frameworks": ["react", "vue"],
      "languages": ["typescript", "javascript"],
      "tools": ["vitest", "playwright"]
    },
    "limits": {
      "maxFiles": 100,
      "maxSize": "10MB"
    }
  }
}

Agent Best Practices

1. Clear Purpose

Define specific, focused capabilities:

# Good: Focused
name: react-component-agent
purpose: Generate React components with TypeScript

# Bad: Too broad
name: fullstack-agent
purpose: Handle everything

2. Tool Selection

Use appropriate tools for tasks:

// File operations
context.filesystem.read(path)
context.filesystem.write(path, content)

// Code analysis
context.codebase.search(query)
context.codebase.analyze(pattern)

// Communication
context.messaging.send(to, type, data)

3. Error Handling

try {
  const result = await executeTask(prompt)
  return { success: true, result }
} catch (error) {
  return {
    success: false,
    error: error.message,
    recovery: suggestRecovery(error)
  }
}

Testing Agents

import { describe, it, expect } from 'vitest'
import { execute } from '../index'

describe('my-agent', () => {
  it('should generate component', async () => {
    const result = await execute(
      'Create a UserCard component',
      mockContext
    )
    expect(result.success).toBe(true)
    expect(result.files).toHaveLength(2) // component + test
  })
})

::: info See Also

• Built-in Agents - Pre-configured agents
• Agents Overview - Agent system introduction :::