Files
Claude-Code-Workflow/docs/agents/custom.md
catlog22 c3ddf7e322 docs: add VitePress documentation site
- Add docs directory with VitePress configuration
- Add GitHub Actions workflow for docs build and deploy
- Support bilingual (English/Chinese) documentation
- Include search, custom theme, and responsive design
2026-02-28 16:14:09 +08:00

264 lines
4.7 KiB
Markdown

# 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`:
```markdown
---
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`:
```typescript
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
```typescript
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
```typescript
async function analyzeCodebase(context: AgentContext) {
const files = await context.filesystem.read('src/**/*.ts')
const patterns = identifyPatterns(files)
return {
patterns,
recommendations: generateRecommendations(patterns)
}
}
```
### Testing
```typescript
async function generateTests(options: TestOptions) {
return {
framework: 'vitest',
files: [
{
path: `${options.file}.test.ts`,
content: generateTestCode(options)
}
]
}
}
```
## Agent Tools
Agents can define custom tools:
```typescript
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:
```typescript
// 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`:
```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:
```markdown
# 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:
```typescript
// 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
```typescript
try {
const result = await executeTask(prompt)
return { success: true, result }
} catch (error) {
return {
success: false,
error: error.message,
recovery: suggestRecovery(error)
}
}
```
## Testing Agents
```typescript
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](./builtin.md) - Pre-configured agents
- [Agents Overview](./index.md) - Agent system introduction
:::