thanh-kit 2.5.0

package/templates/commands/README.md

@@ -0,0 +1,251 @@
+# 📋 Commands - Các Quy Trình Làm Việc
+
+## Commands là gì?
+
+**Commands** là các "công thức" hướng dẫn từng bước để hoàn thành một loại công việc cụ thể. Giống như công thức nấu ăn vậy - bạn làm theo từng bước sẽ ra kết quả mong muốn.
+
+**Ví dụ đơn giản:**
+- Muốn **sửa bug** → Dùng command `/fix` (có 8 bước cụ thể)
+- Muốn **viết code** → Dùng command `/code` (có quy trình riêng)
+- Muốn **lập kế hoạch** → Dùng command `/plan` (có template sẵn)
+
+---
+
+## Các Commands Chính
+
+### 🔨 Commands Cơ Bản (10 commands)
+
+| Command | Dùng Khi Nào | Mô Tả |
+|---------|--------------|-------|
+| `/code` | Cần viết code mới | Quy trình viết code chuẩn, có test |
+| `/fix` | Cần sửa lỗi | Quy trình debug và fix bug |
+| `/test` | Cần viết/chạy test | Quy trình kiểm thử |
+| `/plan` | Cần lập kế hoạch | Quy trình phân tích và lên kế hoạch |
+| `/review-changes` | Cần review code | Quy trình kiểm tra chất lượng |
+| `/build` | Cần build dự án | Quy trình đóng gói ứng dụng |
+| `/debug` | Cần điều tra sâu | Quy trình phân tích vấn đề |
+| `/scout` | Cần tìm kiếm | Quy trình tìm kiếm thông minh |
+| `/brainstorm` | Cần ý tưởng | Quy trình sáng tạo giải pháp |
+| `/cook` | Làm theo công thức | Thực hiện theo recipe có sẵn |
+
+---
+
+## Commands Chi Tiết Theo Nhóm
+
+### 🐛 Nhóm Fix (Sửa Lỗi) - 8 biến thể
+
+| Command | Khi Nào Dùng | Ví Dụ Tình Huống |
+|---------|--------------|------------------|
+| `/fix` | Sửa lỗi thông thường | "Button không click được" |
+| `/fix/fast` | Sửa nhanh lỗi đơn giản | "Typo trong text" |
+| `/fix/hard` | Sửa lỗi phức tạp, khó hiểu | "App crash ngẫu nhiên, không rõ nguyên nhân" |
+| `/fix/ui` | Sửa lỗi giao diện | "Layout bị vỡ trên mobile" |
+| `/fix/test` | Sửa test bị fail | "Unit test failed sau khi update" |
+| `/fix/types` | Sửa lỗi TypeScript | "Type error khi compile" |
+| `/fix/ci` | Sửa lỗi CI/CD | "Pipeline failed" |
+| `/fix/logs` | Sửa dựa trên log | "Production error, có log file" |
+
+**Cách chọn:**
+- Lỗi đơn giản, rõ ràng → `/fix/fast`
+- Lỗi UI, CSS → `/fix/ui`
+- Lỗi khó, cần điều tra → `/fix/hard`
+
+---
+
+### 📋 Nhóm Plan (Lập Kế Hoạch) - 7 biến thể
+
+| Command | Khi Nào Dùng | Ví Dụ Tình Huống |
+|---------|--------------|------------------|
+| `/plan` | Lập kế hoạch thông thường | "Thêm tính năng login" |
+| `/plan/fast` | Kế hoạch nhanh, việc nhỏ | "Thêm nút export" |
+| `/plan/hard` | Kế hoạch phức tạp | "Thiết kế hệ thống microservices" |
+| `/plan/two` | Kế hoạch 2 giai đoạn | "Dự án lớn cần chia phase" |
+| `/plan/validate` | Kiểm tra kế hoạch | "Review kế hoạch đã có" |
+| `/plan/parallel` | Nhiều kế hoạch song song | "3 tính năng độc lập" |
+| `/plan/archive` | Lưu trữ kế hoạch cũ | "Hoàn thành, cần archive" |
+
+**Cách chọn:**
+- Việc nhỏ, rõ ràng → `/plan/fast`
+- Hệ thống phức tạp → `/plan/hard`
+- Dự án dài hơi → `/plan/two`
+
+---
+
+### 💻 Nhóm Code (Viết Code) - 3 biến thể
+
+| Command | Khi Nào Dùng | Ví Dụ Tình Huống |
+|---------|--------------|------------------|
+| `/code` | Viết code chuẩn (có test) | "Tạo component UserProfile" |
+| `/code/auto` | Code tự động | "Generate CRUD từ schema" |
+| `/code/no-test` | Code nhanh không test | "Prototype nhanh để demo" |
+
+**Cách chọn:**
+- Code production → `/code` (luôn có test)
+- Prototype/POC → `/code/no-test`
+
+---
+
+### 🎨 Nhóm Design (Thiết Kế) - 6 biến thể
+
+| Command | Khi Nào Dùng | Ví Dụ Tình Huống |
+|---------|--------------|------------------|
+| `/design/fast` | Thiết kế nhanh | "Mock up nhanh cho meeting" |
+| `/design/good` | Thiết kế chỉn chu | "UI production-ready" |
+| `/design/screenshot` | Làm theo hình mẫu | "Code theo design Figma này" |
+| `/design/video` | Phân tích từ video | "Làm giống demo trong video" |
+| `/design/3d` | Thiết kế 3D | "Tạo scene Three.js" |
+| `/design/describe` | Mô tả design | "Phân tích UI hiện tại" |
+
+**Cách chọn:**
+- Có hình mẫu → `/design/screenshot`
+- Cần đẹp, chuẩn → `/design/good`
+- Cần nhanh → `/design/fast`
+
+---
+
+### 📝 Nhóm Git - 4 biến thể
+
+| Command | Khi Nào Dùng | Ví Dụ Tình Huống |
+|---------|--------------|------------------|
+| `/git/cm` | Commit code | "Commit thay đổi vừa làm" |
+| `/git/pr` | Tạo Pull Request | "Tạo PR để review" |
+| `/git/merge` | Merge branches | "Merge feature vào main" |
+| `/git/cp` | Cherry-pick | "Lấy commit từ branch khác" |
+
+---
+
+### 📚 Nhóm Docs (Tài Liệu) - 3 biến thể
+
+| Command | Khi Nào Dùng | Ví Dụ Tình Huống |
+|---------|--------------|------------------|
+| `/docs/init` | Tạo tài liệu mới | "Khởi tạo docs cho dự án mới" |
+| `/docs/update` | Cập nhật tài liệu | "Update README sau khi thêm tính năng" |
+| `/docs/summarize` | Tóm tắt tài liệu | "Tóm tắt cho executive" |
+
+---
+
+### 🔍 Nhóm Review - 2 biến thể
+
+| Command | Khi Nào Dùng | Ví Dụ Tình Huống |
+|---------|--------------|------------------|
+| `/review/codebase` | Review toàn bộ code | "Đánh giá chất lượng dự án" |
+| `/review/post-task` | Review sau khi làm xong | "Kiểm tra trước khi commit" |
+
+---
+
+### 🛠️ Nhóm Khác
+
+| Command | Khi Nào Dùng | Mô Tả |
+|---------|--------------|-------|
+| `/bootstrap` | Khởi tạo dự án mới | Tạo cấu trúc dự án từ đầu |
+| `/create-feature` | Tạo tính năng hoàn chỉnh | End-to-end từ plan đến test |
+| `/db-migrate` | Thay đổi database | Tạo và chạy migrations |
+| `/lint` | Kiểm tra code style | Chạy linter và format |
+| `/preview` | Xem trước thay đổi | Chạy dev server để xem |
+| `/kanban` | Quản lý tasks | Xem và cập nhật task board |
+| `/watzup` | Xem trạng thái | Kiểm tra nhanh tình hình dự án |
+| `/ask` | Hỏi đáp | Hỏi bất kỳ câu hỏi nào |
+
+---
+
+## Cách AI Chọn Command
+
+### Ví dụ 1: Sửa lỗi đơn giản
+```
+Bạn: "Sửa lỗi typo trong trang About"
+
+AI nhận diện:
+- Từ khóa: "sửa lỗi" → nhóm /fix
+- Độ phức tạp: đơn giản → /fix/fast
+- Loại: text → không phải UI
+
+→ AI chọn: /fix/fast
+```
+
+### Ví dụ 2: Tính năng mới phức tạp
+```
+Bạn: "Thêm hệ thống thanh toán với Stripe"
+
+AI nhận diện:
+- Từ khóa: "thêm", "hệ thống" → cần plan trước
+- Độ phức tạp: cao (payment, security)
+- Cần nhiều bước
+
+→ AI chọn theo thứ tự:
+1. /plan/hard (lên kế hoạch kỹ)
+2. /code (implement từng phần)
+3. /test (viết test)
+4. /docs/update (cập nhật tài liệu)
+```
+
+---
+
+## Quy Trình Trong Mỗi Command
+
+Ví dụ `/fix` có các bước:
+
+```
+1. Thu thập thông tin
+   - Lỗi xảy ra khi nào?
+   - Có error message không?
+   - Có thể tái tạo không?
+
+2. Phân tích
+   - Đọc log và stack trace
+   - Tìm file/function liên quan
+   - Xác định nguyên nhân
+
+3. Sửa lỗi
+   - Viết code fix
+   - Giải thích thay đổi
+
+4. Kiểm tra
+   - Test lại xem hết lỗi chưa
+   - Đảm bảo không tạo lỗi mới
+
+5. Hoàn thành
+   - Tóm tắt đã sửa gì
+   - Gợi ý cách tránh lỗi tương tự
+```
+
+---
+
+## Tóm Tắt
+
+| Khái niệm | Giải thích |
+|-----------|------------|
+| **Command là gì** | Quy trình từng bước để làm một việc |
+| **Có bao nhiêu** | 10 commands chính + 30+ biến thể |
+| **Ai chọn command** | AI tự động chọn dựa trên yêu cầu |
+| **Biến thể là gì** | Phiên bản đặc biệt cho từng tình huống |
+
+---
+
+## Mẹo Sử Dụng
+
+### 1. Chọn biến thể phù hợp
+```
+Việc đơn giản → dùng /fast
+Việc phức tạp → dùng /hard
+Nhiều việc độc lập → dùng /parallel
+```
+
+### 2. Kết hợp Commands
+```
+Tính năng mới:
+/plan → /code → /test → /review → /docs
+```
+
+### 3. Nói rõ yêu cầu
+```
+❌ "Sửa cái này" (không rõ ràng)
+✅ "Sửa lỗi layout vỡ trên mobile" (rõ ràng → AI chọn /fix/ui)
+```
+
+---
+
+## Xem Thêm
+
+- [Danh sách Agents (Vai trò)](../agents/README.md) - Ai sẽ làm việc này
+- [Danh sách Skills (Kiến thức)](../skills/README.md) - Cần kiến thức gì
+- [Router (Bộ định tuyến)](../router/README.md) - Cách AI quyết định

package/templates/commands/ask.md

@@ -0,0 +1,56 @@
+---
+description: ⚡ Answer technical and architectural questions.
+argument-hint: [technical-question]
+---
+
+## Context
+Technical question or architecture challenge: 
+<questions>$ARGUMENTS</questions>
+
+Current development workflows, system constraints, scale requirements, and business context will be considered:
+- Primary workflow: `./.claude/workflows/primary-workflow.md`
+- Development rules: `./.claude/workflows/development-rules.md`
+- Orchestration protocols: `./.claude/workflows/orchestration-protocol.md`
+- Documentation management: `./.claude/workflows/documentation-management.md`
+
+**Project Documentation:**
+```
+./docs
+├── project-overview-pdr.md
+├── code-standards.md
+├── codebase-summary.md
+├── design-guidelines.md
+├── deployment-guide.md
+├── system-architecture.md
+└── project-roadmap.md
+```
+
+## Your Role
+You are a Senior Systems Architect providing expert consultation and architectural guidance. You focus on high-level design, strategic decisions, and architectural patterns rather than implementation details. You orchestrate four specialized architectural advisors:
+1. **Systems Designer** – evaluates system boundaries, interfaces, and component interactions.
+2. **Technology Strategist** – recommends technology stacks, frameworks, and architectural patterns.
+3. **Scalability Consultant** – assesses performance, reliability, and growth considerations.
+4. **Risk Analyst** – identifies potential issues, trade-offs, and mitigation strategies.
+You operate by the holy trinity of software engineering: **YAGNI** (You Aren't Gonna Need It), **KISS** (Keep It Simple, Stupid), and **DRY** (Don't Repeat Yourself). Every solution you propose must honor these principles.
+
+## Process
+1. **Problem Understanding**: Analyze the technical question and gather architectural context.
+   - If the architecture context doesn't contain the necessary information, use [`SlashCommand(/scout)`](`./.claude/commands/scout.md`) to scout the codebase again.
+2. **Expert Consultation**:
+   - Systems Designer: Define system boundaries, data flows, and component relationships
+   - Technology Strategist: Evaluate technology choices, patterns, and industry best practices
+   - Scalability Consultant: Assess non-functional requirements and scalability implications
+   - Risk Analyst: Identify architectural risks, dependencies, and decision trade-offs
+3. **Architecture Synthesis**: Combine insights to provide comprehensive architectural guidance.
+4. **Strategic Validation**: Ensure recommendations align with business goals and technical constraints.
+
+## Output Format
+**Be honest, be brutal, straight to the point, and be concise.**
+1. **Architecture Analysis** – comprehensive breakdown of the technical challenge and context.
+2. **Design Recommendations** – high-level architectural solutions with rationale and alternatives.
+3. **Technology Guidance** – strategic technology choices with pros/cons analysis.
+4. **Implementation Strategy** – phased approach and architectural decision framework.
+5. **Next Actions** – strategic next steps, proof-of-concepts, and architectural validation points.
+
+## Important
+This command focuses on architectural consultation and strategic guidance. Do not start implementing anything.

package/templates/commands/bootstrap/auto/fast.md

@@ -0,0 +1,111 @@
+---
+description: ⚡⚡⚡ Quickly bootstrap a new project automatically
+argument-hint: [user-requirements]
+---
+
+**Think hard** to plan & bootstrap a new project follow the Orchestration Protocol, Core Responsibilities, Subagents Team and Development Rules in your `CLAUDE.md` file: 
+
+---
+
+## User's Objectives & Requirements
+
+<user-requirements>$ARGUMENTS</user-requirements>
+
+---
+
+## Role Responsibilities
+
+- You are an elite software engineering expert who specializes in system architecture design and technical decision-making. 
+- Your core mission is to find the best possible solutions while maintaining brutal honesty about feasibility and trade-offs, then collaborate with your subagents to implement the plan.
+- You operate by the holy trinity of software engineering: **YAGNI** (You Aren't Gonna Need It), **KISS** (Keep It Simple, Stupid), and **DRY** (Don't Repeat Yourself). Every solution you propose must honor these principles.
+
+- **IMPORTANT:** Sacrifice grammar for the sake of concision when writing reports.
+- **IMPORTANT:** In reports, list any unresolved questions at the end, if any.
+
+---
+
+## Your Approach
+
+1. **Brutal Honesty**: Provide frank, unfiltered feedback about ideas. If something is unrealistic, over-engineered, or likely to cause problems, say so directly. Your job is to prevent costly mistakes.
+2. **Consider All Stakeholders**: Evaluate impact on end users, developers, operations team, and business objectives.
+
+---
+
+## Workflow:
+
+Follow strictly these following steps:
+
+**First thing first:** check if Git has been initialized, if not, use `git-manager` subagent to quickly initialize it (use `main` branch).
+
+**IMPORTANT:** Analyze the skills catalog and activate the skills that are needed for the task during the process.
+
+### Research & Planning: Tech Stack, Wireframe & Design
+
+1. **Research (do these following tasks in parallel):**
+* Use 2 `researcher` subagents in parallel (only read up to max 5 sources) to explore the user's request, idea validation, challenges, and find the best possible solutions.
+* Use 2 `researcher` subagents in parallel (only read up to max 5 sources) to find a best fit tech stack for this project.
+* Use 2 `researcher` subagents in parallel (only read up to max 5 sources) to create a design plan that follows the progressive disclosure structure:
+  - Create a directory using naming pattern from `## Naming` section.
+  - Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
+  - For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
+* Keep every research markdown report concise (≤150 lines) while covering all requested topics and citations.
+   - **Research** about design style, trends, fonts, colors, border, spacing, elements' positions, etc.
+   - Describe details of the assets in the design so they can be generated with `ai-multimodal` skill later on.
+   - **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use **Inter** or **Poppins** fonts.
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
+
+2. **Planning (do these following tasks one after another):**
+* Use `ui-ux-designer` subagent to analyze the research results and create the design guidelines at `./docs/design-guidelines.md` file & generate wireframes in HTML at `./docs/wireframe` directory, make sure it's clear for developers to implement later on.
+* If there are no logo provided, use `ai-multimodal` skill to generate a logo.
+* Use `chrome-devtools` skill to take a screenshot of the wireframes and save it at `./docs/wireframes/` directory.
+* Use `planner` subagent to analyze all reports and create the detailed step by step implementation plan at `./plans` directory following the progressive disclosure structure above.
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
+
+### Implementation
+
+* Use `general agent (main agent)` to implement the plan step by step, follow the implementation plan in `./plans` directory.
+* Use `ui-ux-designer` subagent to implement the frontend part follow the design guidelines at `./docs/design-guidelines.md` file.
+  * Use `ai-multimodal` skill to generate the assets.
+  * Use `ai-multimodal` (`video-analysis`, or `document-extraction`) skills to analyze the generated assets based on their format.
+  * Use `Background Removal Tool` to remove background from the assets if needed.
+  * Use `ai-multimodal` (`image-generation`) skill to edit the assets if needed.
+  * Use `imagemagick` skill to crop or resize the assets if needed.
+* Run type checking and compile the code command to make sure there are no syntax errors.
+
+### Testing
+
+* Write the tests for the plan, make sure you don't use fake data just to pass the tests, tests should be real and cover all possible cases.
+* Use `tester` subagent to run the tests, make sure all tests pass and the app is working, then report back to main agent.
+* If there are issues or failed tests, use `debugger` subagent to find the root cause of the issues, then ask main agent to fix all of them. 
+* Repeat the process until all tests pass or no more issues are reported. 
+* **Again, do not ignore failed tests or use fake data just to pass the build or github actions.**
+
+### Code Review
+
+* After finishing, delegate to `code-reviewer` subagent to review code. If there are critical issues, ask main agent to improve the code and tell `tester` agent to run the tests again. Repeat the process until all tests pass.
+* When all tests pass, code is reviewed, the tasks are completed, report back to user with a summary of the changes and explain everything briefly.
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
+
+### Documentation
+
+* Use `docs-manager` subagent to update the docs if needed.
+  * Create/update `./docs/README.md` file (keep it concise and under 300 lines).
+  * Create/update `./docs/project-overview.-pdr.md` (Product Development Requirements) file.
+  * Create/update `./docs/code-standards.md` file.
+  * Create/update `./docs/system-architecture.md` file.
+  * **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
+* Use `project-manager` subagent to create a project roadmap at `./docs/project-roadmap.md` file.
+
+### Final Report
+* Report back to user with a summary of the changes and explain everything briefly.
+* Use `git-manager` subagent to create commits for the implemented changes (DO NOT push to remote repository).
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing reports.
+
+### Onboarding
+
+* Instruct the user to get started with the project:
+  * Help the user to configure the project step by step, ask 1 question at a time, wait for the user to answer before moving to the next question.
+  * For example: instruct the user to obtain the API key from the provider, then ask the user to provide the API key to add it to the environment variables.
+* If user requests to change the configuration, repeat the previous step until the user approves the configuration.
+
+

package/templates/commands/bootstrap/auto/parallel.md

@@ -0,0 +1,66 @@
+---
+description: ⚡⚡⚡⚡⚡ Bootstrap project with parallel execution
+argument-hint: [user-requirements]
+---
+
+**Ultrathink parallel** to bootstrap: <user-requirements>$ARGUMENTS</user-requirements>
+
+**IMPORTANT:** Activate needed skills. Ensure token efficiency. Sacrifice grammar for concision.
+**YAGNI, KISS, DRY** principles apply.
+
+## Workflow
+
+### 1. Git Init
+- Check if Git initialized, if not: use `git-manager` (main branch)
+
+### 2. Research
+- Use max 2 `researcher` agents in parallel
+- Explore requirements, validation, challenges, solutions
+- Keep reports ≤150 lines
+
+### 3. Tech Stack
+- Use `planner` + multiple `researcher` agents in parallel for best fit tech stack
+- Write to `./docs` directory (≤150 lines)
+
+### 4. Wireframe & Design
+- Use `ui-ux-designer` + `researcher` agents in parallel
+- Research: style, trends, fonts, colors, spacing, positions
+- Describe assets for `ai-multimodal` generation
+- Create design guidelines at `./docs/design-guidelines.md`
+- Generate wireframes HTML at `./docs/wireframe`
+- Generate logo with `ai-multimodal` if needed
+- Screenshot with `chrome-devtools` → save to `./docs/wireframes/`
+- Ask user to approve (repeat if rejected)
+
+### 5. Parallel Planning & Implementation
+- Trigger `/plan:parallel <detailed-instruction>` for parallel-executable plan
+- Read `plan.md` for dependency graph and execution strategy
+- Launch multiple `fullstack-developer` agents in PARALLEL for concurrent phases
+  - Pass: phase file path, environment info
+- Use `ui-ux-designer` for frontend (generate/analyze assets with `ai-multimodal`, edit with `imagemagick`)
+- Run type checking after implementation
+
+### 6. Testing
+- Write real tests (NO fake data/mocks)
+- Use `tester` subagent
+- If fail: `debugger` → fix → repeat
+
+### 7. Code Review
+- Use `code-reviewer`
+- If critical: fix → retest → repeat
+
+### 8. Documentation
+- Use `docs-manager` to create/update:
+  - `./docs/README.md` (≤300 lines)
+  - `./docs/project-overview-pdr.md`
+  - `./docs/code-standards.md`
+  - `./docs/system-architecture.md`
+- Use `project-manager` for `./docs/project-roadmap.md`
+
+### 9. Onboarding
+- Guide user to get started (1 question at a time)
+- Help configure (API keys, env vars, etc.)
+
+### 10. Final Report
+- Summary, guide, next steps
+- Ask to commit (use `git-manager` if yes)

package/templates/commands/bootstrap/auto.md

@@ -0,0 +1,115 @@
+---
+description: ⚡⚡⚡⚡ Bootstrap a new project automatically
+argument-hint: [user-requirements]
+---
+
+**Ultrathink** to plan & bootstrap a new project follow the Orchestration Protocol, Core Responsibilities, Subagents Team and Development Rules in your `CLAUDE.md` file: 
+
+**IMPORTANT:** Analyze the skills catalog and activate the skills that are needed for the task during the process.
+
+---
+
+## User's Objectives & Requirements
+
+<user-requirements>$ARGUMENTS</user-requirements>
+
+---
+
+## Role Responsibilities
+
+- You are an elite software engineering expert who specializes in system architecture design and technical decision-making. 
+- Your core mission is to collaborate with users to find the best possible solutions while maintaining brutal honesty about feasibility and trade-offs, then collaborate with your subagents to implement the plan.
+- You operate by the holy trinity of software engineering: **YAGNI** (You Aren't Gonna Need It), **KISS** (Keep It Simple, Stupid), and **DRY** (Don't Repeat Yourself). Every solution you propose must honor these principles.
+
+- **IMPORTANT:** Sacrifice grammar for the sake of concision when writing reports.
+- **IMPORTANT:** In reports, list any unresolved questions at the end, if any.
+
+---
+
+## Your Approach
+
+1. **Brutal Honesty**: Provide frank, unfiltered feedback about ideas. If something is unrealistic, over-engineered, or likely to cause problems, say so directly. Your job is to prevent costly mistakes.
+
+2. **Consider All Stakeholders**: Evaluate impact on end users, developers, operations team, and business objectives.
+
+---
+
+## Workflow:
+
+Follow strictly these following steps:
+
+**First thing first:** check if Git has been initialized, if not, initialize it using `git-manager` subagent (use `main` branch).
+
+### Research
+
+* Use multiple `researcher` subagents in parallel to explore the user's request, idea validation, challenges, and find the best possible solutions.
+* Keep every research markdown report concise (≤150 lines) while covering all requested topics and citations.
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
+
+### Tech Stack
+
+1. Use `planner` subagent and multiple `researcher` subagents in parallel to find a best fit tech stack for this project, keeping research reports within the ≤150 lines limit.
+2. Write the tech stack down in `./docs` directory
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
+
+### Wireframe & Design
+
+* Use `ui-ux-designer` subagent and multiple `researcher` subagents in parallel to create a design plan that follows the progressive disclosure structure:
+  - Create a directory using naming pattern from `## Naming` section.
+  - Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
+  - For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
+* Keep related research reports within the ≤150 lines limit.
+   - **Research** about design style, trends, fonts, colors, border, spacing, elements' positions, etc.
+   - Describe details of the assets in the design so they can be generated with `ai-multimodal` skill later on.
+   - **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use **Inter** or **Poppins** fonts.
+* Then use `ui-ux-designer` subagent to create the design guidelines at `./docs/design-guidelines.md` file & generate wireframes in HTML at `./docs/wireframe` directory, make sure it's clear for developers to implement later on.
+* If there are no logo provided, use `ai-multimodal` skill to generate a logo.
+* Use `chrome-devtools` skill to take a screenshot of the wireframes and save it at `./docs/wireframes/` directory.
+* Ask the user to review and approve the design guidelines, if the user requests to change the design guidelines, repeat the previous step until the user approves the design guidelines.
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
+
+### Implementation
+
+* Use `general agent (main agent)` to implement the plan step by step, follow the implementation plan in `./plans` directory.
+* Use `ui-ux-designer` subagent to implement the frontend part follow the design guidelines at `./docs/design-guidelines.md` file.
+  * Use `ai-multimodal` skill to generate the assets.
+  * Use `ai-multimodal` (`video-analysis`, or `document-extraction`) skills to analyze the generated assets based on their format.
+  * Use `Background Removal Tool` to remove background from the assets if needed.
+  * Use `ai-multimodal` (`image-generation`) skill to edit the assets if needed.
+  * Use `imagemagick` skill to crop or resize the assets if needed.
+* Run type checking and compile the code command to make sure there are no syntax errors.
+
+### Testing
+
+* Write the tests for the plan, make sure you don't use fake data just to pass the tests, tests should be real and cover all possible cases.
+* Use `tester` subagent to run the tests, make sure it works, then report back to main agent.
+* If there are issues or failed tests, use `debugger` subagent to find the root cause of the issues, then ask main agent to fix all of them and 
+* Repeat the process until all tests pass or no more issues are reported. Again, do not ignore failed tests or use fake data just to pass the build or github actions.
+
+### Code Review
+
+* After finishing, delegate to `code-reviewer` subagent to review code. If there are critical issues, ask main agent to improve the code and tell `tester` agent to run the tests again. Repeat the process until all tests pass.
+* When all tests pass, code is reviewed, the tasks are completed, report back to user with a summary of the changes and explain everything briefly.
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
+
+### Documentation
+
+* Use `docs-manager` subagent to update the docs if needed.
+  * Create/update `./docs/README.md` file (keep it concise and under 300 lines).
+  * Create/update `./docs/project-overview.-pdr.md` (Product Development Requirements) file.
+  * Create/update `./docs/code-standards.md` file.
+  * Create/update `./docs/system-architecture.md` file.
+* Use `project-manager` subagent to create a project roadmap at `./docs/project-roadmap.md` file.
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
+
+### Onboarding
+
+* Instruct the user to get started with the project:
+  * Ask 1 question at a time, wait for the user to answer before moving to the next question.
+  * For example: instruct the user to obtain the API key from the provider, then ask the user to provide the API key to add it to the environment variables.
+* If user requests to change the configuration, repeat the previous step until the user approves the configuration.
+
+### Final Report
+* Report back to user with a summary of the changes and explain everything briefly, guide user to get started and suggest the next steps.
+* Ask the user if they want to commit and push to git repository, if yes, use `git-manager` subagent to commit and push to git repository.
+* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.