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.
This repository includes three custom Claude Code subagents located in .claude/agents/:
Specializes in building user interfaces, converting designs to code, and implementing frontend components with modern frameworks.
Handles all database operations including schema design, migrations, RLS policies, and Supabase integration.
Performs automated testing, bug detection, security scanning, and code quality assurance.
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 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)
The entire application was created through the following agent workflow:
- Frontend Architect created the UI based on design specifications
- Database Agent set up the Supabase backend with proper schema and RLS policies
- Frontend Architect integrated the database with the frontend
- Bugbot QA Specialist reviewed the code, found bugs, and fixed them
All in a single Claude Code session!
- Node.js 18+
- npm or yarn
- Supabase account (for backend)
- Clone the repository:
git clone https://github.com/yourusername/subagent-demo.git
cd subagent-demo- Install dependencies:
npm install- Set up environment variables in
.env.local:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key- Run the development server:
npm run devThe /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.
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.
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
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.
MIT - This is demonstration software provided as-is for educational purposes.
- Built with Claude Code
- Powered by Anthropic's Claude
- Database by Supabase
- UI framework by Next.js
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.