Next.js AI Agent Development Team
Welcome to the AI Agent Development Team repository. This project provides a structured framework for building full-stack Next.js applications using a team of specialized AI agents, led by a master orchestrator named QWEN.
This system is designed to transform a high-level project idea into a complete, production-ready application through a methodical, plan-driven, and interactive process.
Meet the Team
The team consists of one orchestrator and several specialist agents, each with a distinct role.
| Icon | Agent Name | Role & Responsibilities |
|---|---|---|
| 🏛️ | QWEN | Project Architect & Orchestrator. Analyzes requirements, designs the architecture and data schema, and creates a sequential execution plan. It delegates all implementation tasks to the specialists. |
| 🗃️ | Supabase-Engineer | Backend & Database Specialist. Handles all database schema implementation, authentication, Row Level Security (RLS) policies, and file storage logic using Supabase. |
| 💻 | Nextjs-Developer | Core Frontend Specialist. Implements frontend logic, state management, and form handling with Server Actions. Connects the UI to the backend services. |
| 🎨 | Component-Builder-Assistant | UI Specialist. Creates pure, reusable, and logic-less shadcn/ui components based on design specifications from the orchestrator. |
| 💳 | Payment-Integration-Specialist | Payments Specialist. Implements all Stripe payment flows, subscription logic, pricing tables, and secure webhook handling. |
| 📊 | Dashboard-Master | Data Visualization Specialist. Builds complex data tables, charts, and interactive dashboards using TanStack Table and Recharts. |
| ✨ | Animation-Assistant | Motion Specialist. Implements UI animations, transitions, and micro-interactions using Framer Motion to enhance the user experience. |
| 📡 | Nextjs-Realtime-Developer | Real-time Specialist. Implements real-time features using WebSockets or Server-Sent Events (SSE) for chat, notifications, and live updates. |
The Development Workflow
The entire development process is managed by QWEN and follows a strict, interactive workflow. This ensures that a solid plan is in place before any code is written.
Workflow Diagram
graph TD
A[Start: User has Project Idea] --> B{Interact with QWEN};
B --> C[/plan command];
C --> D[QWEN asks clarifying questions];
D --> E[QWEN generates full Execution Plan <br/>(Architecture, Schema, Task List)];
E --> F{Plan Refinement <br/>(Advanced Elicitation)};
F -- Revise --> E;
F -- Approve --> G;
G[/start command] --> H[QWEN delegates Task 1<br/>to a Specialist Agent];
H --> I[Specialist generates output (code, etc.)];
I --> J{User provides output back to QWEN};
J --> K{All tasks complete?};
K -- No --> H_Next[QWEN delegates next Task];
H_Next --> I;
K -- Yes --> L[End: Project Complete];
subgraph "Phase 1: Planning"
direction LR
A; B; C; D;
end
subgraph "Phase 2: Refinement"
direction LR
E; F;
end
subgraph "Phase 3: Execution"
direction TB
G; H; I; J; K; L; H_Next;
end
Usage Guide
This guide is broken into two parts: first, understanding the conceptual process, and second, the practical commands for implementing it.
1. The Conceptual Workflow
The entire project lifecycle is a structured conversation with the QWEN orchestrator.
Phase 1: Planning & Architecture (/plan)
- Start a conversation with the
QWENagent and provide a high-level project goal. - Issue the
/plancommand. QWENenters an interactive loop, asking probing questions to fully understand the requirements and resolve all ambiguities.- Once all information is gathered,
QWENgenerates a complete Execution Plan, which includes the system architecture, the full database schema, and a sequential list of tasks with detailed prompts for the specialist agents.
Phase 2: Plan Refinement (Advanced Elicitation)
- After presenting the plan,
QWENimmediately stops and offers a numbered list of "elicitation" options. - This allows you to challenge, critique, and refine the plan from various angles (e.g., "Stress-test the data schema," "Critique the tech stack").
- This collaborative loop continues until you are fully satisfied with the blueprint and approve it for execution.
Phase 3: Execution & Delegation (/start)
- Issue the
/startcommand to begin development. QWENdelegates Task 1 by providing the exact prompt for the appropriate specialist.- Take that prompt to the specified specialist agent (in a new chat session) to get the implementation code.
- Bring the specialist's output back to
QWEN. QWENacknowledges completion and delegates the next task in the sequence. This cycle repeats until the project is finished.
2. Practical Implementation with Qwen-CLI
The conceptual workflow described above is put into practice using qwen-cli.
- Start with the Orchestrator: To begin the planning phase, launch the orchestrator:
qwen-cli --agent QWEN.md - Follow the Workflow: Engage with
QWENusing the/planand/startcommands as described above. - Delegate to Specialists: When
QWENprovides a task prompt for a specialist (e.g.,Supabase-Engineer), open a new terminal window and run the specialist agent:# Example for the Supabase specialist qwen-cli --agent Supabase-Engineer.md - Return and Continue: Paste the task prompt from
QWENinto the specialist's CLI session. Once you receive the output, copy it and paste it back into theQWENsession to proceed to the next task.
Following this structured process and using separate terminal sessions for each agent will yield the best results.
Agent Prompt Files
This repository contains the master prompts for each agent:
QWEN.mdComponent-Builder-Assistant.mdDashboard-Master.mdAnimation-Assistant.mdNextjs-Developer.mdNextjs-Realtime-Developer.mdPayment-Integration-Specialist.mdSupabase-Engineer.md
Contributing
Contributions are welcome! To add a new agent:
- Create a new markdown file following the existing pattern.
- Include the YAML frontmatter with
name,description, andcolor. - Add a detailed description of the agent's responsibilities and specialties.
- Include technology stack focus and implementation rules.
- Submit a pull request.
License
This project is licensed under the MIT License - see the LICENSE file for details.