133 lines
6.8 KiB
Markdown
133 lines
6.8 KiB
Markdown
# 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
|
|
|
|
```mermaid
|
|
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`)**
|
|
|
|
1. Start a conversation with the `QWEN` agent and provide a high-level project goal.
|
|
2. Issue the `/plan` command.
|
|
3. `QWEN` enters an interactive loop, asking probing questions to fully understand the requirements and resolve all ambiguities.
|
|
4. Once all information is gathered, `QWEN` generates 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)**
|
|
|
|
1. After presenting the plan, `QWEN` immediately stops and offers a numbered list of "elicitation" options.
|
|
2. This allows you to challenge, critique, and refine the plan from various angles (e.g., "Stress-test the data schema," "Critique the tech stack").
|
|
3. This collaborative loop continues until you are fully satisfied with the blueprint and approve it for execution.
|
|
|
|
#### **Phase 3: Execution & Delegation (`/start`)**
|
|
|
|
1. Issue the `/start` command to begin development.
|
|
2. `QWEN` delegates **Task 1** by providing the exact prompt for the appropriate specialist.
|
|
3. Take that prompt to the specified specialist agent (in a new chat session) to get the implementation code.
|
|
4. Bring the specialist's output back to `QWEN`.
|
|
5. `QWEN` acknowledges 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`.
|
|
|
|
1. **Start with the Orchestrator:** To begin the planning phase, launch the orchestrator:
|
|
```bash
|
|
qwen-cli --agent QWEN.md
|
|
```
|
|
2. **Follow the Workflow:** Engage with `QWEN` using the `/plan` and `/start` commands as described above.
|
|
3. **Delegate to Specialists:** When `QWEN` provides a task prompt for a specialist (e.g., `Supabase-Engineer`), open a **new terminal window** and run the specialist agent:
|
|
```bash
|
|
# Example for the Supabase specialist
|
|
qwen-cli --agent Supabase-Engineer.md
|
|
```
|
|
4. **Return and Continue:** Paste the task prompt from `QWEN` into the specialist's CLI session. Once you receive the output, copy it and paste it back into the `QWEN` session 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.md`
|
|
* `Component-Builder-Assistant.md`
|
|
* `Dashboard-Master.md`
|
|
* `Animation-Assistant.md`
|
|
* `Nextjs-Developer.md`
|
|
* `Nextjs-Realtime-Developer.md`
|
|
* `Payment-Integration-Specialist.md`
|
|
* `Supabase-Engineer.md`
|
|
|
|
## Contributing
|
|
|
|
Contributions are welcome\! To add a new agent:
|
|
|
|
1. Create a new markdown file following the existing pattern.
|
|
2. Include the YAML frontmatter with `name`, `description`, and `color`.
|
|
3. Add a detailed description of the agent's responsibilities and specialties.
|
|
4. Include technology stack focus and implementation rules.
|
|
5. Submit a pull request.
|
|
|
|
## License
|
|
|
|
This project is licensed under the MIT License - see the LICENSE file for details. |