Your comprehensive playbook of systematic AI agents. Using Anthropic's Official methodology, we provide ready-to-use agent templates with complete workflows that make Claude smarter at specific development tasks.
What is this? A collection of specialized "expert personas" that make Claude better at specific development tasks.
Works with: Claude Code CLI, OpenCode, Claude Web/Desktop
How does it work?
- Clone this repo into your project
- Reference an agent when talking to Claude (e.g.,
@frontend-developer) - Claude now has deep expertise in that domain
📋 View Complete Feature List → | 📚 Marketplace Docs | 🪝 Hooks Guide | 🔌 MCP Guide | ⚡ LSP Guide
Try it now:
# Add the marketplace to Claude Code
/plugin marketplace add https://github.com/dazeb/ClaudePlaybook
# Install specific category
/plugin install web-development-agents@claude-playbook
/plugin install engineering-agents@claude-playbook
# Or install the essentials bundle (recommended for starters)
/plugin install essentials-bundle@claude-playbook
# Browse all available plugins
/plugin > Discovercurl -fsSL https://raw.githubusercontent.com/dazeb/ClaudePlaybook/main/install.sh | bashInteractive installer lets you choose which agents to install.
📚 View Full Marketplace Documentation →
# Clone into your project
git clone https://github.com/dazeb/ClaudePlaybook.git .claude# Use an agent
# Just say: "@frontend-developer, build me a responsive navbar"
That's it! Claude will now respond with frontend-specific best practices, modern tools, and avoid common pitfalls.
- NEW: Vercel Skills Integration - Added 3 frontend/performance skills from vercel-labs/agent-skills (react-best-practices, web-design-guidelines, vercel-deploy)
- NEW: 100% Complete Agentic System - All 20 agents now have comprehensive Anthropic-style workflows (6-9 numbered steps with decision points, loops, verification gates)
- NEW: Complete workflow coverage across all categories:
- Engineering (6/6) - Backend, frontend, mobile, AI/LLM, DevOps, project init
- Web Development (9/9) - React/Next.js, APIs, full-stack, performance, PWA, CSS, Tailwind v4, static sites, browser automation
- Testing & Quality (5/5) - API testing, performance benchmarking, test analysis, tool evaluation, workflow optimization
- Operations (1/1) - Infrastructure maintenance
- NEW: Latest technology versions across all agents (React 19, Next.js 15, Tailwind 4, React Native 0.76+, Flutter 3.27+, Llama 3.3)
- NEW: Skills integration throughout workflows (TDD, systematic debugging, brainstorming, verification)
- NEW: Delegation triggers for parallel agent execution across all agents
- Major overhaul to specialized set of agents
Specialized workflows that make agents systematic and quality-focused. Skills are automatically available to all agents.
- test-driven-development - RED-GREEN-REFACTOR cycle for bulletproof code
- systematic-debugging - Four-phase root cause analysis (gather, analyze, fix, verify)
- verification-before-completion - Never claim done without running verification
- brainstorming - Requirements exploration before implementation
- writing-plans - Break complex tasks into actionable steps
- executing-plans - Execute multi-step plans with review checkpoints
- react-best-practices - 45 performance rules from Vercel Engineering
- web-design-guidelines - 100+ accessibility and UX compliance rules
- vercel-deploy - Instant deployment with auto-framework detection
- requesting-code-review - Systematic review requests with context
- receiving-code-review - Handle feedback with technical rigor
- dispatching-parallel-agents - Coordinate multiple agents on independent tasks
- subagent-driven-development - Execute implementation plans in current session
- using-git-worktrees - Isolated git worktrees for feature work
- finishing-a-development-branch - Structured options for merge/PR/cleanup
- using-superpowers - Introduction to the skills system
- writing-skills - Create new skills with proper structure
View Complete Skills Documentation
Automate workflows that run in response to events (editing files, git operations, session end):
- post-edit-format.sh - Auto-format 12+ languages after every file edit
- pre-git-safety.sh - Block dangerous git operations (force push, protected files)
- stop-session-summary.sh - Generate session reports with statistics
- post-tests-update.sh - Auto-update tests.json after test runs
AI Setup
Copy this WHOLE section and paste it into your AI agent's context and your AI will do the rest.
### AI Agent Setup Instructions
You are being equipped with specialized agent capabilities from the ClaudePlaybook repository.
#### Installation Steps
1. **Clone the repository into the project's `.claude` directory:**
```bash
git clone https://github.com/dazeb/ClaudePlaybook.git .claude
```
2. **Verify installation:**
```bash
ls .claude/agents/
```
You should see directories for: engineering, web-development, testing, and studio-operations.
3. **You now have access to 21 specialized development agents.** Reference them using the `@agent-name` syntax.
#### How to Use Agents
When the user requests a task that matches an agent's expertise:
1. **Identify the appropriate agent** from these categories:
**Engineering (6 agents):**
- `@project-initializer` - Start here for new projects (sets up long-term memory)
- `@backend-architect` - APIs, databases, server-side architecture
- `@frontend-developer` - UI development with React/Vue/Svelte
- `@ai-engineer` - LLM integration, RAG systems, AI features
- `@devops-automator` - CI/CD, Docker, deployments
- `@mobile-app-builder` - React Native, Flutter apps
**Web Development (9 agents):**
- `@react-nextjs-specialist` - Next.js apps, Server Components, App Router
- `@api-integration-specialist` - REST/GraphQL APIs, auth flows
- `@fullstack-web-developer` - Complete apps from database to UI
- `@web-performance-optimizer` - Site optimization, Core Web Vitals
- `@pwa-builder` - Progressive Web Apps, offline functionality
- `@css-tailwind-expert` - Advanced styling, design systems
- `@tailwind-v4-specialist` - Tailwind CSS v4 CSS-first config, @theme, migration
- `@static-site-specialist` - Astro, 11ty, Hugo sites
- `@browser-automation-specialist` - E2E testing, web scraping
**Testing & Quality (5 agents):**
- `@api-tester` - API testing and contract validation
- `@performance-benchmarker` - Load testing, optimization
- `@test-results-analyzer` - Test quality analysis
- `@tool-evaluator` - Build vs. buy decisions
- `@workflow-optimizer` - Developer workflow improvements
**Operations (1 agent):**
- `@infrastructure-maintainer` - System maintenance, internal tools
2. **Activate the agent** by reading its file:
```bash
cat .claude/agents/[category]/[agent-name].md
```
3. **Apply the agent's expertise** to the task:
- Follow the agent's best practices
- Use recommended tools and technologies
- Avoid documented anti-patterns
- Apply systematic skills (TDD, debugging protocols, verification)
#### Project Initialization
**For new projects, start with the Project Initializer:**
```bash
cat .claude/agents/engineering/project-initializer.md
```
It will guide you to create:
- `tests.json` - Feature tracking and completion status
- `init.sh` - Environment setup automation
- `claude-progress.txt` - Session memory and decisions
- Project structure and configurations
These files enable long-term memory across sessions.
#### Agent Discovery
To see all available agents:
```bash
find .claude/agents -name "*.md" -type f
```
To search for agents by capability:
```bash
grep -r "Use When" .claude/agents/
```
#### Example Workflow
User request: "Build a Next.js e-commerce site with Stripe integration"
Your response:
1. Activate `@project-initializer` - Set up project structure
2. Activate `@react-nextjs-specialist` - Build Next.js app
3. Activate `@api-integration-specialist` - Integrate Stripe API
4. Activate `@api-tester` - Test payment endpoints
5. Apply systematic skills throughout (TDD, verification, code review)
#### Skills System
You also have access to 17 composable skills in `.claude/skills/`:
- `test-driven-development.md` - RED-GREEN-REFACTOR workflow
- `systematic-debugging.md` - Four-phase root cause analysis
- `verification-before-completion.md` - Always verify before claiming done
- `brainstorming.md` - Requirements exploration
- `writing-plans.md` - Implementation planning
- `react-best-practices/` - 45 performance rules from Vercel Engineering
- `web-design-guidelines/` - 100+ accessibility and UX compliance rules
- `vercel-deploy/` - Instant deployment to Vercel
- And 9 more systematic development workflows
Read and apply these skills to ensure high-quality, systematic development.
#### Repository Information
- **Source:** https://github.com/dazeb/ClaudePlaybook
- **21 Focused Development Agents** across 4 categories
- **17 Composable Skills** for systematic development
- **MIT Licensed**
Start Every Project Right
We recommend starting with the Project Initializer agent for new projects.
The Project Initializer sets up essential infrastructure that gives Claude long-term memory:
tests.json- Tracks all features and their completion statusinit.sh- One-command environment setupclaude-progress.txt- Remembers decisions across sessions- Project structure - Organized files and configs
Without these files: Claude forgets context after long conversations and has to restart from scratch.
With these files: Claude remembers everything, even across multiple days or weeks. Each new session picks up exactly where you left off.
Start your project:
# In your project directory, say:
"@project-initializer, create a Next.js e-commerce app with authentication,
product catalog, shopping cart, and admin dashboard. Use PostgreSQL and Stripe."The Project Initializer will create your entire project structure, roadmap, and tracking files in minutes.
What You Get
21 focused development agents - ALL with comprehensive Anthropic-style workflows
- Web Development (9 agents) - React 19, Next.js 15, APIs, CSS/Tailwind 4, Tailwind v4 specialist, PWAs, performance, full-stack, static sites, browser automation
- Engineering (6 agents) - Backend, frontend, mobile (React Native 0.76+, Flutter 3.27+), AI/LLM (Llama 3.3, Claude 3.5), DevOps, project initialization
- Testing & Quality (5 agents) - API testing, performance benchmarking, test analysis, tool evaluation, workflow optimization
- Operations (1 agent) - Infrastructure maintenance and internal tooling
Every single agent includes complete workflows with:
- Numbered workflow steps (6-9 steps) - Clear, actionable phases from start to finish
- Decision points (→) - Branching logic adapting to your requirements
- Loop conditions (↻) - Iterative improvement cycles for quality
- Verification gates (✓) - Quality checkpoints before proceeding
- Human-in-the-loop approval - Critical decision points requiring review
- Skills integration - TDD, systematic debugging, verification protocols
- Collaboration triggers - Smart delegation to spawn parallel agents
- Latest technology versions - Updated to 2025/2026 standards
This is a truly agentic system - Every agent knows exactly how to work systematically, when to delegate, and how to ensure quality at every step.
PLUS: 17 composable skills for systematic, quality-focused development:
- Development - TDD, systematic debugging, verification protocols
- Frontend & Performance - React/Next.js optimization, web design guidelines, Vercel deployment
- Planning - Brainstorming, plan writing, execution workflows
- Collaboration - Parallel agents, code review, multi-stage review
- Workflow - Git worktrees, branch management
- Meta - Skills creation, usage guides
Each agent knows:
- The right tools for the job
- Best practices and patterns
- Common mistakes to avoid
- When to use them vs. other approaches
- How to apply systematic skills for quality code
Why Use These Agents?
Without agents:
You: "Build me a login form"
Claude: Creates basic form with inline styles and no validation
With agents:
You: "@react-nextjs-specialist, build me a login form"
Claude: Creates form with:
- React Hook Form for validation
- Zod schema for type safety
- Server Actions for authentication
- Loading states and error handling
- Accessibility (ARIA labels, keyboard nav)
- Responsive design
Agents turn general AI into domain experts.
Claude Code 2.1 Features (NEW!)
Leverage the latest Claude Code capabilities:
Auto-format code, block dangerous git operations, generate session summaries:
- post-edit-format.sh - Auto-formats 12+ languages after every edit
- pre-git-safety.sh - Blocks force pushes, protected file edits
- stop-session-summary.sh - Session reports with stats
- post-tests-update.sh - Auto-updates tests.json
Connect to 15+ services for live data:
- GitHub - PRs, issues, code review
- Perplexity - Real-time web research
- PostgreSQL - Database queries
- Slack - Team notifications
- And 11 more...
IDE-like intelligence for 11 languages. Go-to-definition in 50ms (vs 45 seconds):
- TypeScript/JavaScript, Python, Go, Rust, Java, C/C++, C#, PHP, Ruby, Kotlin, HTML/CSS
Browse Agents
| Agent | Use When |
|---|---|
| React/Next.js Specialist | Building Next.js apps, Server Components, App Router |
| API Integration Specialist | Connecting to REST/GraphQL APIs, auth flows |
| Full-Stack Developer | Building complete apps from database to UI |
| Web Performance Optimizer | Fixing slow sites, improving Core Web Vitals |
| PWA Builder | Making apps installable and work offline |
| CSS & Tailwind Expert | Advanced styling, animations, design systems |
| Tailwind v4 Specialist | Tailwind CSS v4 setup, @theme tokens, v3 migration, CSS-first config |
| Static Site Specialist | Building fast sites with Astro, 11ty, Hugo |
| Browser Automation Specialist | E2E testing, web scraping, visual regression |
| Agent | Use When |
|---|---|
| Project Initializer | Recommended for new projects - Sets up long-term memory |
| Backend Architect | Building APIs, databases, server-side logic |
| Frontend Developer | Building UIs with React/Vue/Svelte |
| AI Engineer | Adding AI features, RAG systems, LLM integration |
| DevOps Automator | Setting up CI/CD, Docker, deployments |
| Mobile App Builder | Creating React Native or Flutter apps |
| Agent | Use When |
|---|---|
| API Tester | Testing API contracts and endpoints |
| Performance Benchmarker | Load testing and optimization |
| Test Results Analyzer | Analyzing test quality and coverage |
| Tool Evaluator | Build vs. buy decisions for tools |
| Workflow Optimizer | Improving developer workflows |
| Agent | Use When |
|---|---|
| Infrastructure Maintainer | Maintaining internal tools and infrastructure |
How to Use
# Clone into your project
git clone https://github.com/dazeb/ClaudePlaybook.git .claude
# Agents are auto-discovered. Just reference them:
# "@react-nextjs-specialist, build a user profile page"# Copy any agent's content into Claude's system prompt
# Example: Open .claude/agents/web-development/react-nextjs-specialist.md
# Copy content → Paste into Claude → Start chattingOpenCode uses a different folder structure (.opencode/agent/ instead of .claude/agents/).
Quick setup:
# Clone the repo
git clone https://github.com/dazeb/ClaudePlaybook.git
# Rename folders for OpenCode
mv ClaudePlaybook/.claude .opencode
mv .opencode/agents .opencode/agent
# Clean up
rm -rf ClaudePlaybook
# Agents are now auto-discovered in OpenCode!
# Use them the same way: "@react-nextjs-specialist, ..."One-liner setup:
git clone https://github.com/dazeb/ClaudePlaybook.git && mv ClaudePlaybook/.claude .opencode && mv .opencode/agents .opencode/agent && rm -rf ClaudePlaybookOptional: Telegram Notifier
Get notifications on your phone when Claude completes tasks or needs approval for important actions.
What it does:
- Sends task completion alerts to your phone
- Requests approval for sensitive operations (deployments, DB changes)
- Sends error notifications in real-time
Setup (2 minutes):
cd .claude/tools/telegram-notifier
npm install
node telegram-notifier.js setupThe wizard will walk you through creating a Telegram bot and connecting it.
Example use:
# Get notified when builds complete
node telegram-notifier.js send "Build successful!"
# Request approval for sensitive operations
node telegram-notifier.js approve "Deploy to production?"Contributing
Want to add agents or improve existing ones? PRs welcome!
- Follow the agent template structure
- Include concrete examples
- Document anti-patterns (common mistakes)
- Submit PR with clear description
License
MIT License - use freely for personal or commercial projects.
FAQ
Q: Do I need to use the Project Initializer? We recommend starting with @project-initializer for new projects. It creates tracking files that give Claude long-term memory across sessions. Without these files, Claude may lose context after long conversations.
Q: Do I need all 21 agents? No! Use only what you need. Most projects use 2-5 agents after the initial setup.
Q: Can I modify agents for my needs? Absolutely! Fork and customize to match your stack and preferences.
Q: Do agents work with Claude Web (not CLI)? Yes! Copy any agent's content into your conversation or system prompt.
Q: Can I use these with OpenCode?
Yes! See Option 3 in the "How to Use" section for setup instructions. You'll need to rename folders: .claude → .opencode and agents → agent.
Q: Are these better than generic Claude? For specialized tasks, yes! Agents provide domain expertise, know the right tools, and avoid common mistakes.
Quick Reference
┌─────────────────────────────────────────────┐
│ RECOMMENDED WORKFLOW │
├─────────────────────────────────────────────┤
│ 1. Clone repo into .claude folder │
│ 2. Start with @project-initializer │
│ Creates: tests.json, init.sh, etc. │
│ 3. Use specialized agents for features │
│ 4. Get expert-level responses with memory │
└─────────────────────────────────────────────┘
Ready to build? Start with @project-initializer, then use specialized agents.
Advanced: Long-Running Agents Methodology
Traditional AI agents fail on complex projects because they try to "one-shot" everything. As conversations grow, they hit critical limitations:
| Traditional Approach | Long-Running Agents |
|---|---|
| Context loss after 50+ messages | Persistent state in tests.json |
| Forgets initial architecture decisions | Design intent in claude-progress.txt |
| Degraded code quality over time | Fresh context per atomic feature |
| New sessions start from scratch | Orientation protocol recovers state |
| Overwhelmed by project complexity | Incremental, focused implementation |
Instead of keeping everything in chat history (which gets forgotten), we externalize state to the filesystem:
your-project/
├── tests.json # The roadmap (50-200+ features)
├── init.sh # One-command environment setup
├── claude-progress.txt # Session memory (decisions & rationale)
├── src/ # Your actual code
└── .git/ # Version control for verification
Key Insight: A feature isn't "done" until the agent runs verification, commits to git, and updates
tests.json. This forces test-driven, incremental progress.
Every time a new agent session starts (or context refreshes), the agent follows a strict startup routine:
# Agent starts session with:
pwd # Confirm workspace
git log -3 --oneline # Recent changes
cat claude-progress.txt # Recover design intent
cat tests.json | head -50 # See roadmap status
./init.sh # Ensure environment readyWhy this matters: Takes 10 seconds but prevents the agent from:
- ❌ Re-asking questions already answered
- ❌ Making redundant file searches
- ❌ Violating architectural decisions from previous sessions
Complex features are broken into Atomic Units in tests.json:
{
"feature": "User Authentication",
"atomic_units": [
{"id": 1, "task": "Create User model with email/password fields", "passes": true},
{"id": 2, "task": "Implement password hashing with bcrypt", "passes": true},
{"id": 3, "task": "Create POST /auth/register endpoint", "passes": false},
{"id": 4, "task": "Add email validation middleware", "passes": false},
{"id": 5, "task": "Write integration tests for registration flow", "passes": false}
]
}The Worker Agent Process:
- ✅ Read
claude-progress.txt(what was done last session) - ✅ Run
init.sh(ensure environment ready) - ✅ Implement exactly ONE atomic unit (e.g., task #3)
- ✅ Run verification (tests, manual checks)
- ✅ Commit to git with descriptive message
- ✅ Update
tests.json→"passes": true - ✅ Update
claude-progress.txt(document decisions)
🎯 Result: High-quality code with focused context. Each session uses "early tokens" for implementation, not fighting cluttered memory.
| Artifact | Purpose | Format | Updated By |
|---|---|---|---|
tests.json |
Feature roadmap & status | JSON | Worker agents (passes: true/false) |
init.sh |
Environment automation | Shell script | Initializer (once), refined by workers |
claude-progress.txt |
Design intent & decisions | Markdown | Every agent session |
.git/ |
Code verification | Git commits | After each atomic unit completion |
💡 Pro Tip: These files are your "source of truth". Any agent can recover full project state by reading them, even months later.
Every agent session should begin with orientation:
# Before implementing anything:
1. Read claude-progress.txt (what was done last)
2. Check tests.json (which features are pending)
3. Run init.sh (ensure environment ready)
4. Implement ONE atomic unit
5. Verify, commit, update tests.json
6. Document decisions in claude-progress.txt🎯 Why: This prevents wasted tokens on "What's the current state?" questions.
Break big features into 5-10 atomic units:
❌ Bad (too large):
{
"id": 1,
"task": "Implement complete user authentication system",
"passes": false
}
✅ Good (atomic):
{
"id": 1, "task": "Create User model schema", "passes": true
},
{
"id": 2, "task": "Implement password hashing", "passes": true
},
{
"id": 3, "task": "Create /register endpoint", "passes": false
},
{
"id": 4, "task": "Add JWT token generation", "passes": false
},
{
"id": 5, "task": "Create /login endpoint", "passes": false
}💡 Rule of Thumb: If a task takes >30 minutes, break it down further.
Multiple agents can work together on complex features:
# Example: Building a payment system
1. @backend-architect
→ Design payment API contract and database schema
→ Document in claude-progress.txt
2. @frontend-developer
→ Build payment form UI with validation
→ Integrate with API contract
3. @api-tester
→ Write contract tests for payment endpoints
→ Test auth boundaries and edge cases
4. @devops-automator
→ Set up Stripe webhook handling in production
→ Configure environment variables and secretsWhen working across many features, refresh context to maintain code quality:
## Session Management Strategy
**When to use `/clear`**:
- After completing 3-4 atomic units
- When context feels cluttered
- Before switching to a different feature area
- After any extended debugging session
**Recovery after `/clear`**:
1. Agent reads claude-progress.txt (recovers session memory)
2. Agent checks tests.json (sees completed vs. pending work)
3. Agent runs init.sh (verifies environment)
4. Ready to continue with fresh, focused context
**Result**: Better code quality with focused attention on current task🎯 Why: Fresh context = sharper reasoning. State files ensure no information loss.
For complex decisions, explicitly request extended thinking:
## Extended Thinking Triggers
Use these phrases to activate deeper reasoning:
**"think"** - Basic extended thinking
Example: "Think about the best database schema for this feature"
**"think hard"** - Deeper analysis
Example: "Think hard about the trade-offs between microservices vs. monolith"
**"think harder"** - Complex problem solving
Example: "Think harder about why these tests are flaky using 5 Whys"
**"ultrathink"** - Maximum depth reasoning
Example: "Ultrathink about the full TCO analysis for build vs. buy"
## Best Use Cases by Agent
- **Backend Architect**: Architecture decisions, scaling strategies
- **AI Engineer**: RAG pipeline design, prompt optimization
- **Test Results Analyzer**: Root cause analysis of complex failures
- **Tool Evaluator**: Build vs. buy decisions, vendor selection
- **Performance Benchmarker**: Bottleneck identification, optimization paths
- **Growth Hacker**: Multi-variate experiment design💡 Pro Tip: Extended thinking is most valuable for decisions with multiple trade-offs or non-obvious solutions.
Before deploying agents to your team, measure their impact:
## Agent Evaluation Framework
**1. Create 3 Test Scenarios**
Example for @frontend-developer:
- Scenario 1: "Build a login form with email/password validation"
- Scenario 2: "Create a responsive dashboard with 4 metric cards"
- Scenario 3: "Fix accessibility issues in the checkout flow"
**2. Measure Baseline (Without Agent)**
Run each scenario with Claude (no agent loaded):
- Time to completion
- Code quality (subjective 1-5 rating)
- Required iterations
- Adherence to project patterns
**3. Measure With Agent (Agent Loaded)**
Run same scenarios with agent:
- Did agent activate correctly?
- Time to completion vs. baseline
- Code quality vs. baseline
- Did agent follow project conventions?
- Were there any hallucinations or mistakes?
**4. Calculate Impact**
Improvements to look for:
- ✅ Faster time to completion (20-50% faster)
- ✅ Better code quality (fewer revisions needed)
- ✅ Consistent adherence to project patterns
- ✅ Correct tool/library selection
- ✅ Proper error handling and edge cases
**5. Iterate Based on Results**
If agent underperforms:
- Add missing context to agent definition
- Include more specific examples
- Clarify success criteria in "When to Use" section
- Update tools/technologies section🎯 Goal: Agents should provide 20-50% improvement in quality and speed for their specialized tasks.
These agents leverage Claude 4.5's unique capabilities:
Agents read multiple files and run searches simultaneously:
✅ Do this:
- Read 5 files in parallel
- Run 3 grep searches simultaneously
- Analyze multiple code paths at once
❌ Not this:
- Read file 1 → wait → read file 2 → wait → read file 3Frontend agents enforce distinctive design:
- ✅ Unique typography combinations (not default system fonts)
- ✅ Cohesive color palettes (not generic blue/gray)
- ✅ Staggered micro-interactions (not uniform animations)
- ❌ Generic "Bootstrap-looking" designs
Complex decisions use Claude's extended thinking mode:
- Architecture design (Backend Architect)
- Root cause analysis (Test Results Analyzer)
- Build vs. buy decisions (Tool Evaluator)
- Multi-source data synthesis (Analytics Reporter)
Strict verification protocols:
- ✅ Must read file before discussing contents
- ✅ Must verify changes with git diff
- ✅ Must run tests before marking features complete
- ✅ Must update tests.json only after verification
-
Anthropic Research: Building Effective Agents The foundational research behind this methodology
-
State-First Development Deep dive into why filesystem state beats chat memory
-
Agent Collaboration Patterns How agents hand off work effectively
- 🎥 [Getting Started: First Project with Initializer] (10 min)
- 🎥 [Building a Feature Across Multiple Sessions] (15 min)
- 🎥 [Agent Collaboration: Payment System Example] (20 min)
| Metric | Value |
|---|---|
| Total Agents | 21 |
| Categories | 4 (Engineering, Web Development, Testing & Quality, Operations) |
| Agents with Workflows | 21/21 (100% Complete!) ✅ |
| Workflow Coverage | Engineering: 6/6, Web Dev: 9/9, Testing: 5/5, Ops: 1/1 |
| Lines of Content | ~10,000+ lines of comprehensive workflow guidance |
| Workflow Steps | 140+ numbered steps across all agents |
| Decision Points | 180+ branching logic points (→) |
| Verification Gates | 95+ quality checkpoints (✓) |
| Collaboration Triggers | 20+ parallel agent delegation patterns |
| Tools Referenced | 150+ specialized development tools |
| Example Tasks | 200+ concrete implementation examples |
| Anti-patterns | 250+ development mistakes documented |
| Average Agent Size | ~400 lines of comprehensive expertise |
Every agent definition follows this comprehensive structure with Anthropic-style workflows:
# Role: [Agent Name]
## Profile
High-level philosophy and approach
## Capabilities (10 bullets)
Specific skills and expertise areas
## Tools & Technologies
Recommended stack and platforms (updated to latest versions)
## When to Use This Agent
Specific scenarios and use cases
## Workflow (NEW!)
Comprehensive 6-9 step workflows with:
### Step 1: [Phase Name]
**Action**: What to do
- Detailed implementation steps
- Clear deliverables
**Decision Point**:
- → If X condition: Go to Step Y
- → If Z condition: Proceed to next step
**Skills Integration**: Which systematic skills to apply
**Loop Condition**:
- ↻ Repeat if conditions not met
- → Continue when verified
**Verification Gate**: ✓ Quality checkpoint before proceeding
**Human Approval Required**: ✓ Critical decisions requiring review
**Delegation Point**: When to spawn parallel agents
## Example Tasks (7 examples)
Concrete, detailed implementations
## Deliverables
Expected outputs and artifacts
## Collaboration
• Works closely with: [other agents]
• Receives from: [inputs]
• Provides to: [outputs]
## Success Metrics
Measurable KPIs for effectiveness
## Anti-patterns (10 items)
Common mistakes to avoidWorkflow symbols:
- → = Decision point (branching logic)
- ↻ = Loop condition (iterative cycles)
- ✓ = Verification gate (quality checkpoint)
We welcome contributions! Here's how to help:
- Follow the standard agent template structure
- Include 7+ concrete example tasks
- Document 10+ anti-patterns
- Define clear collaboration interfaces
- Submit PR with agent in appropriate category folder
- Update tools/technologies (new frameworks, platforms)
- Add more example tasks and edge cases
- Refine success metrics
- Improve anti-pattern documentation
- Document your success stories
- Share
tests.jsonexamples for common project types - Contribute starter templates for popular stacks
Acknowledgments
This project builds upon exceptional work from the AI agent development community:
Built on Anthropic's research on effective agents and inspired by modern DevOps practices.
The comprehensive skills system (.claude/skills/) combines two exceptional sources:
obra/superpowers - Battle-tested systematic development methodologies:
- Test-Driven Development (RED-GREEN-REFACTOR cycle)
- Systematic Debugging (four-phase root cause analysis)
- Brainstorming & Planning workflows
- Code Review & Collaboration protocols
- Git Worktrees & Branch management
vercel-labs/agent-skills - Frontend performance and deployment skills:
- React/Next.js performance optimization (45 rules across 8 categories)
- Web design guidelines (100+ accessibility and UX rules)
- Vercel deployment automation (40+ framework support)
These skills transform our agents from knowledge repositories into systematic, quality-focused development partners. Huge thanks to @obra and the Vercel Labs team for creating and sharing these invaluable resources with the community.
Built by developers, for developers • MIT Licensed • 21 Focused Development Agents • 17 Composable Skills
![@mend-bolt-for-github[bot]](https://avatars.githubusercontent.com/in/16809?s=64&v=4){kind=small}