subagent-demo

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 16 Open GitHub ↗

Code for my Claude Code subagents YouTube tutorial.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Subagent Demo - Claude Code Agent Showcase

This repository demonstrates the power of **Claude Code's custom subagents** by showcasing how three specialized AI subagents agents can work together to build a full-stack application in a single session. The Notes app you see here was created entirely through agent collaboration, serving as a practical demonstration of agent capabilities.

## 🤖 Featured Agents

This repository includes three custom Claude Code subagents located in `.claude/agents/`:

### 1. **Frontend Architect** (`frontend-architect.md`)
Specializes in building user interfaces, converting designs to code, and implementing frontend components with modern frameworks.

### 2. **Database Agent** (`database-agent.md`)
Handles all database operations including schema design, migrations, RLS policies, and Supabase integration.

### 3. **Bugbot QA Specialist** (`bugbot-qa-specialist.md`)
Performs automated testing, bug detection, security scanning, and code quality assurance.

## 🎯 Purpose

This repository serves as a **demonstration and testing ground** for Claude Code's agent system. The Notes application was built in a single session using these agents to showcase:

- How specialized agents can collaborate on complex tasks
- The ability to build full-stack applications through agent orchestration
- Real-world application of custom agent configurations

**Important**: This Notes app is purely experimental and created for demonstration purposes. It is not intended for production use!

## 🚀 The Demo App

The agents collaborated to create a macOS-style Notes application featuring:

- **Frontend**: React + Next.js 14 + TypeScript + Tailwind CSS
- **Backend**: Supabase (PostgreSQL) with anonymous access
- **Features**: 
  - Rich text editing
  - Folder organization
  - Real-time persistence
  - Search functionality
  - No authentication required (uses anonymous user ID)

## 📝 How It Was Built

The entire application was created through the following agent workflow:

1. **Frontend Architect** created the UI based on design specifications
2. **Database Agent** set up the Supabase backend with proper schema and RLS policies
3. **Frontend Architect** integrated the database with the frontend
4. **Bugbot QA Specialist** reviewed the code, found bugs, and fixed them

All in a single Claude Code session!

## 🛠️ Running the Demo

### Prerequisites
- Node.js 18+
- npm or yarn
- Supabase account (for backend)

### Setup

1. Clone the repository:
```bash
git clone https://github.com/yourusername/subagent-demo.git
cd subagent-demo
```

2. Install dependencies:
```bash
npm install
```

3. Set up environment variables in `.env.local`:
```env
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
```

4. Run the development server:
```bash
npm run dev
```

5. Open [http://localhost:3000](http://localhost:3000)

## ⚠️ Known Issues

### Deprecated v0-generate Command
The `/v0-generate` custom slash command featured in the YouTube tutorial referenced in this codebase has been **deprecated** due to a bug where Claude Code does not always recognize `bash` as an allowed tool, even when explicitly listed in the custom command's configuration file. This limitation prevents the custom command from functioning in each session as intended.

## 🔧 Agent Configuration

Each agent is configured with:
- Specific responsibilities and expertise
- Tool permissions and restrictions
- Interaction patterns with other agents

See the `.claude/agents/` directory for detailed agent configurations.

## 📚 Project Structure

```
subagent-demo/
├── .claude/
│   ├── agents/           # Custom agent configurations
│   │   ├── frontend-architect.md
│   │   ├── database-agent.md
│   │   └── bugbot-qa-specialist.md
│   └── commands/         # Custom slash commands (deprecated)
├── app/                  # Next.js app directory
├── components/           # React components
├── hooks/               # Custom React hooks
├── lib/                 # Utility libraries
├── types/               # TypeScript type definitions
└── CLAUDE.md            # Claude Code guidance file
```

## 🤝 Contributing

This is an experimental demonstration repository. While contributions are welcome, please note that the primary purpose is to showcase agent capabilities rather than maintain a production application.

## 📄 License

MIT - This is demonstration software provided as-is for educational purposes.

## 🙏 Acknowledgments

- Built with [Claude Code](https://claude.ai/code)
- Powered by [Anthropic's Claude](https://anthropic.com)
- Database by [Supabase](https://supabase.com)
- UI framework by [Next.js](https://nextjs.org)

---

**Note**: This repository is a technical demonstration of AI agent capabilities. The application code was generated entirely by AI agents and should be treated as experimental software.

subagent-demo

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README