Agent Design 2
This skill should be used when the user asks to "configure agent profile", "add skills to agent", "set up MCP servers", "configure agent tools", "write system prompt", "create agent workflow", "define agent commands", "add subagents", or needs to define what capabilities an agent has and how to orchestrate complex workflows in the runtime.
What this skill does
# Agent Design
## Overview
Agent profiles define what an agent can do - its personality, tools, skills, subagents, commands, and integrations. The runtime is architecture-agnostic, supporting both Claude Agent SDK and OpenCode.
## AgentProfile Structure
```typescript
interface AgentProfile {
// Identity
id: string; // Unique identifier
name: string; // Display name
description?: string; // Human-readable description
// Behavior
systemPrompt?: string; // Agent's system prompt
agentMDFile?: string; // Memory file content (CLAUDE.md/AGENT.md)
// Capabilities
tools?: string[]; // Available tools
skills?: ClaudeSkill[]; // Skill definitions
subagents?: ClaudeSubagent[]; // Subagent definitions
commands?: AgentCommand[]; // Command definitions
// Integrations
bundledMCPs?: LocalMcpServer[]; // MCP servers bundled with agent
externalMCPs?: McpServerConfig[];// External MCP servers
// Environment
npmDependencies?: string[]; // npm packages to install
pipDependencies?: string[]; // pip packages to install
environmentVariables?: Record<string, string>;
defaultWorkspaceFiles?: WorkspaceFile[];
}
```
## System Prompt vs Agent Memory File
Both can be used together:
| Field | Purpose | Analogy |
|-------|---------|---------|
| `systemPrompt` | Core personality and instructions | The agent's "DNA" |
| `agentMDFile` | Contextual memory and project knowledge | The agent's "CLAUDE.md" or "AGENT.md" |
**Example:**
```typescript
const profile: AgentProfile = {
id: "code-assistant",
name: "Code Assistant",
// Core behavior - who the agent is
systemPrompt: `You are a senior software engineer. You write clean,
tested code. You explain your reasoning before making changes.`,
// Project context - what the agent knows about this workspace
agentMDFile: `# Project: E-commerce API
## Tech Stack
- Node.js + TypeScript
- PostgreSQL + Prisma
- Jest for testing
## Conventions
- Use kebab-case for files
- All API routes in src/routes/
- Run tests before committing`,
};
```
## Tools Configuration
Available tools for Claude Agent SDK:
```typescript
tools: [
"Read", // Read files
"Write", // Create new files
"Edit", // Edit existing files
"Bash", // Execute shell commands
"Grep", // Search file contents
"Glob", // Find files by pattern
]
```
## Skills
Skills provide specialized knowledge and workflows:
```typescript
interface ClaudeSkill {
name: string; // Skill identifier
description: string; // When to use this skill
skillMd: string; // Main skill content (markdown)
supportingFiles?: { // Additional resources
relativePath: string;
content: string;
}[];
npmDependencies?: string[];
pipDependencies?: string[];
}
```
**Example skill:**
```typescript
skills: [{
name: "api-testing",
description: "Testing REST APIs with curl and validation",
skillMd: `# API Testing Skill
## When to Use
Use this skill when testing API endpoints.
## Process
1. Identify endpoint and method
2. Construct curl command
3. Validate response structure
4. Check status codes
## Common Patterns
\`\`\`bash
# GET request
curl -X GET http://localhost:3000/api/users
# POST with JSON
curl -X POST http://localhost:3000/api/users \\
-H "Content-Type: application/json" \\
-d '{"name": "John"}'
\`\`\``,
supportingFiles: [{
relativePath: "templates/test-script.sh",
content: "#!/bin/bash\ncurl -v $1"
}]
}]
```
## Subagents
Subagents handle delegated tasks during a session:
```typescript
interface ClaudeSubagent {
name: string; // Subagent identifier
description: string; // When main agent should use this
prompt: string; // Subagent's instructions
model?: string; // "sonnet" | "opus" | "haiku" | "inherit"
tools?: string[]; // Allowed tools (subset of main agent)
}
```
**Example:**
```typescript
subagents: [{
name: "test-writer",
description: "Delegate test writing to this subagent",
prompt: `You are a test-writing specialist. Given code, write
comprehensive unit tests. Use Jest. Cover edge cases.`,
model: "haiku", // Use faster model for focused task
tools: ["Read", "Write", "Bash"]
}, {
name: "code-reviewer",
description: "Delegate code review to this subagent",
prompt: `You are a code reviewer. Analyze code for bugs,
security issues, and style problems. Be thorough but constructive.`,
model: "sonnet",
tools: ["Read", "Grep"]
}]
```
## Commands
Commands enable the calling application to trigger specific agent workflows by sending command text as a prompt:
```typescript
interface AgentCommand {
name: string; // Command identifier
prompt: string; // Instructions executed when command is invoked
}
```
**Example:**
```typescript
commands: [{
name: "review-pr",
prompt: `Review the current pull request:
1. Use the code-reviewer subagent to analyze changes
2. Check for security issues using the security-audit skill
3. Verify tests pass by running: npm test
4. Generate a summary with:
- Overview of changes
- Issues found (critical/warning/info)
- Recommendations
Output a structured review report.`
}, {
name: "deploy-staging",
prompt: `Deploy to staging environment:
1. Run all tests: npm test
2. Build the project: npm run build
3. Use the deployment MCP server to push to staging
4. Verify deployment with health check
5. Report deployment status`
}]
```
**Invoking commands:** The calling application sends the command name as a message:
```typescript
// In your React app
const { sendMessage } = useMessages(sessionId);
await sendMessage("/review-pr"); // Triggers the review-pr command
```
## MCP Servers
### Bundled MCP Servers
MCP servers packaged with the agent:
```typescript
interface LocalMcpServer {
name: string; // Server identifier
description: string; // What this server provides
localProjectPath: string; // Path to MCP server project
startCommand: string; // Command to start server
installCommand: string; // Command to install dependencies
}
```
**Example:**
```typescript
bundledMCPs: [{
name: "github-tools",
description: "GitHub API integration for PRs, issues, repos",
localProjectPath: "./mcps/github-server",
startCommand: "tsx src/index.ts",
installCommand: "npm install"
}]
```
### External MCP Servers
Pre-existing MCP servers:
```typescript
externalMCPs: [{
name: "filesystem",
command: "npx",
args: ["-y", "@anthropic-ai/mcp-server-filesystem", "/workspace"]
}]
```
## Workflow Patterns
### Pattern 1: Command-Driven Workflows
Define commands that orchestrate skills, subagents, and tools:
```typescript
commands: [{
name: "full-feature",
prompt: `Implement the requested feature:
Phase 1 - Planning:
- Use the architecture skill to design the approach
- Create a task breakdown
Phase 2 - Implementation:
- Implement core functionality
- Use test-writer subagent for unit tests
Phase 3 - Review:
- Use code-reviewer subagent for review
- Address any critical issues
Phase 4 - Finalize:
- Run full test suite
- Update documentation`
}]
```
### Pattern 2: Skill Chains
Skills that reference other skills:
```typescript
skills: [{
name: "bug-fix",
description: "Systematic bug fixing process",
skillMd: `# Bug Fix Process
1. **Reproduce** - Verify the bug exists
2. **Locate** - Use the debugging skill to find root cause
3. **Fix** - Implement minimal fix
4. **Test** - Use the testing skill to verify
5. **Document** - Update changelog`
}]
```
### Pattern 3: MCP-Enhanced Workflows
Commands that leverage MCP servers:
```typescript
commands: [{
name: "sync-docs",
prompt: `Synchronize documentation:
1. Use the notion-mcp server to fetch latest specs
2. Update local markdown files
3. Use the github-mcp server to create PR
4. Post summary to slack-mcp`
}]
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.