awf-vibecoder-kit 5.0.0

package/workflows/vibecoder-guide.md

@@ -0,0 +1,285 @@
+---
+description: 📖 Hướng dẫn Vibecoding với AWF — Dành cho mọi trình độ
+---
+
+# 📖 Hướng Dẫn Vibecoding Với AWF v5
+
+> **Vibecoding** = Bạn nói ý tưởng, AI viết code. Bạn làm "sếp", AI làm "nhân viên".
+> AWF là bộ công cụ giúp bạn "sếp" tốt hơn — ra lệnh đúng, kiểm tra đúng, ship nhanh.
+
+---
+
+## 🎯 Bạn Cần Biết Gì Trước?
+
+**Không cần biết code.** Bạn chỉ cần biết:
+- Gõ `/lệnh` trong chat
+- Trả lời câu hỏi AI đặt ra
+- Chọn option (1, 2, 3...)
+
+**Mất bao lâu để bắt đầu?** 5 phút đọc phần Quick Start bên dưới.
+
+---
+
+## ⚡ Quick Start — 3 Bước Đầu Tiên
+
+### Bước 1: Bắt đầu dự án
+```
+Gõ: /init
+→ AI hỏi tên project + mô tả ngắn
+→ Tạo workspace
+```
+
+### Bước 2: Khám phá ý tưởng
+```
+Gõ: /brainstorm
+→ AI hỏi 5 câu forcing (tại sao? ai dùng? cái gì đã có?)
+→ AI challenge giả định của bạn
+→ AI đưa 3 cách tiếp cận
+→ Bạn chọn 1 → tự động tạo Design Brief
+```
+
+### Bước 3: Lên kế hoạch + Code
+```
+Gõ: /plan
+→ AI tạo plan chi tiết, chia phases
+→ Bạn duyệt (OK hoặc chỉnh sửa)
+
+Gõ: /code phase-01
+→ AI bắt đầu code, tự test, tự fix
+```
+
+**Xong!** Bạn đã vibecoding. 🎉
+
+---
+
+## 🗺️ Bản Đồ Lệnh — 16 Lệnh Chính
+
+### Sprint Flow (Quy trình chính)
+
+```
+/init → /brainstorm → /plan → /design → /code → /review → /test → /deploy → /canary
+  ↑                                                                              ↓
+  └────────────────────── /recap (quay lại khi mở lại project) ←── /save-brain ←─┘
+```
+
+### 📋 Bảng Tra Cứu Nhanh
+
+| Lệnh | Icon | Làm gì | Khi nào dùng |
+|-------|------|--------|-------------|
+| `/init` | ✨ | Tạo dự án mới | Bắt đầu project mới |
+| `/brainstorm` | 💡 | Khám phá ý tưởng | Chưa rõ muốn làm gì |
+| `/plan` | 📋 | Lên kế hoạch chi tiết | Đã biết muốn làm gì |
+| `/design` | 🎨 | Thiết kế DB, API, luồng | Trước khi code |
+| `/visualize` | 🖼️ | Thiết kế giao diện (UI) | Muốn xem UI trước |
+| `/code` | 💻 | Viết code | Đã có plan, bắt đầu code |
+| `/review` | 👀 | Review code — tìm bug, auto-fix | Sau khi code xong |
+| `/test` | 🧪 | Chạy test | Kiểm tra code chạy đúng |
+| `/deploy` | 🚀 | Đưa app lên mạng | App đã sẵn sàng |
+| `/canary` | 🐤 | Kiểm tra sau deploy | Vừa deploy xong |
+| `/debug` | 🐛 | Tìm và sửa lỗi | App bị lỗi |
+| `/audit` | 🔒 | Kiểm tra bảo mật | Trước khi public |
+| `/recap` | 📖 | Nhớ lại đang làm gì | Mở lại project sau 1 thời gian |
+| `/save-brain` | 🧠 | Lưu context dự án | Cuối buổi làm việc |
+| `/learn` | 📚 | Quản lý kiến thức | Xem/thêm bài học qua sessions |
+| `/freeze` | 🔒 | Khóa phạm vi sửa file | Đang debug, tránh AI sửa lung tung |
+
+---
+
+## 📖 Chi Tiết Từng Lệnh
+
+### 💡 /brainstorm — "Em chưa biết muốn làm gì"
+
+**Khi nào dùng:** Có ý tưởng mơ hồ, cần AI giúp làm rõ.
+
+**Cách hoạt động:**
+1. AI hỏi bạn 5 câu (không skip được):
+   - ❶ Tại sao lúc này?
+   - ❷ Ai gặp vấn đề?
+   - ❸ Hiện giải quyết bằng cách nào?
+   - ❹ Không làm thì sao?
+   - ❺ Phiên bản nhỏ nhất là gì?
+
+2. AI đặt lại vấn đề (reframe) — có thể khác hoàn toàn feature request ban đầu
+3. AI challenge giả định — bạn đồng ý/phản bác
+4. AI đưa 3 giải pháp (Quick Win / Balanced / Full Vision)
+5. Bạn chọn → AI tạo Design Brief tự động
+
+**Ví dụ thực tế:**
+```
+Bạn: /brainstorm app quản lý chi tiêu
+AI:  ❶ "Tại sao lúc này? Chuyện gì xảy ra?"
+Bạn: "Tháng nào cũng hết tiền mà không biết tiêu ở đâu"
+AI:  ❷ "Ai gặp vấn đề? Có ví dụ cụ thể?"
+Bạn: "Mình. Tiêu vặt quá nhiều"
+AI:  "Reframe: Anh không cần app 'quản lý chi tiêu'.
+      Anh cần app 'NHẬN BIẾT chi tiêu vặt' → cảnh báo khi lố."
+```
+
+---
+
+### 📋 /plan — "Em biết muốn làm gì, lên kế hoạch đi"
+
+**Khi nào dùng:** Đã rõ feature/product, cần kế hoạch chi tiết.
+
+**Cách hoạt động:**
+1. AI hỏi 3 câu nhanh (Quản lý gì? Ai dùng? Quan trọng nhất là gì?)
+2. AI đề xuất kiến trúc (tự chọn tech stack)
+3. Bạn duyệt (OK / Chỉnh sửa / Từ đầu)
+4. AI tự tạo plan chi tiết → chia phases → list tasks
+
+**Output:** Folder plan với các file phase-01, phase-02... mỗi file có checklist tasks.
+
+---
+
+### 💻 /code — "Code đi"
+
+**Khi nào dùng:** Đã có plan, bắt đầu code.
+
+**Cách dùng:**
+```
+/code phase-01          → Code phase 1
+/code phase-02          → Code phase 2
+/code all-phases        → Code tất cả phases liên tục
+/code thêm dark mode    → Code feature cụ thể (không cần plan)
+```
+
+**Tính năng hay:**
+- **Auto Test Loop:** Code xong → tự chạy test → fail → tự fix → test lại (tối đa 3 lần)
+- **Quality Levels:** MVP (nhanh), Production (chuẩn), Enterprise (scale)
+- **Checkpoint:** Tự lưu progress sau mỗi phase
+
+---
+
+### 👀 /review — "Kiểm tra code trước khi ship"
+
+**Khi nào dùng:** Sau khi code xong, trước khi deploy.
+
+**Cách hoạt động:**
+1. AI scan toàn bộ code đã thay đổi
+2. **Auto-fix** những lỗi rõ ràng (missing imports, console.log, unused vars...)
+3. **Hỏi bạn** những lỗi cần judgment (race conditions, logic bugs)
+4. Chạy checklist: Security / Error Handling / Performance
+5. Hiển thị Review Dashboard: READY TO SHIP hoặc NEEDS WORK
+
+**Đây là bước quan trọng nhất.** Skip bước này = ship bug lên production.
+
+---
+
+### 🐤 /canary — "App deploy rồi, có chạy ngon không?"
+
+**Khi nào dùng:** Ngay sau khi deploy.
+
+Tự kiểm tra: homepage load, API health, console errors, performance. Nếu có lỗi nghiêm trọng → gợi ý rollback.
+
+---
+
+### 🔒 /freeze — "Đừng sửa lung tung!"
+
+**Khi nào dùng:** Đang debug 1 file, sợ AI "tiện tay" sửa file khác.
+
+```
+/freeze src/lib/auth.ts     → Chỉ cho sửa file auth.ts
+/freeze src/components/      → Chỉ cho sửa trong components/
+/unfreeze                    → Mở khóa
+```
+
+---
+
+### 📚 /learn — "AI ơi, nhớ bài học này"
+
+**Khi nào dùng:** Muốn xem/thêm kiến thức AI đã học qua các session.
+
+```
+/learn                → Xem tất cả learnings
+/learn add            → Thêm learning mới
+/learn search prisma  → Tìm learning liên quan
+/learn prune          → Dọn dẹp cũ
+```
+
+AI cũng tự lưu: khi fix bug khó, khi bạn sửa code AI viết, khi retry 3+ lần.
+
+---
+
+## 🎯 Kịch Bản Thực Tế
+
+### Kịch bản 1: Xây app từ đầu
+```
+/init                    → Tạo project "my-crm"
+/brainstorm              → Khám phá: quản lý khách hàng cho freelancer
+/plan                    → Lên kế hoạch 6 phases
+/design                  → Thiết kế DB + API
+/code phase-01           → Setup project
+/code phase-02           → Database + seed data
+/code phase-03           → Backend API
+/code phase-04           → Frontend UI
+/code phase-05           → Kết nối FE + BE
+/review                  → Kiểm tra code → auto-fix
+/test                    → Chạy test suite
+/deploy                  → Đưa lên Vercel
+/canary                  → Check sức khỏe sau deploy
+/save-brain              → Lưu context cuối buổi
+```
+
+### Kịch bản 2: Thêm feature cho project đang có
+```
+/recap                   → Nhớ lại đang làm gì
+/brainstorm thêm dark mode → Brainstorm (có thể skip nếu đơn giản)
+/code thêm dark mode     → Code luôn
+/review                  → Kiểm tra
+/deploy                  → Ship
+```
+
+### Kịch bản 3: Fix bug
+```
+/debug login không hoạt động   → AI phân tích + fix
+/freeze src/lib/auth.ts        → Lock scope (optional)
+/review                        → Kiểm tra fix
+/test                          → Chạy test
+/deploy                        → Ship fix
+```
+
+### Kịch bản 4: Mở lại project sau 1 tuần
+```
+/recap                   → AI đọc context, nhớ lại bạn đang ở đâu
+/learn                   → Xem learnings đã lưu
+/code phase-03           → Tiếp tục code
+```
+
+---
+
+## ⚡ Tips & Best Practices
+
+### ✅ NÊN Làm:
+1. **Luôn `/brainstorm` trước** — 5 phút brainstorm tiết kiệm 5 ngày code sai
+2. **Luôn `/review` trước `/deploy`** — catch bugs trước khi users gặp
+3. **`/save-brain` cuối mỗi buổi** — để AI nhớ context khi quay lại
+4. **Chọn Quality Level phù hợp** — MVP cho prototype, Production cho app thật
+5. **Dùng `/freeze` khi debug** — tránh AI sửa lung tung
+
+### ❌ KHÔNG NÊN:
+1. **Nhảy thẳng vào `/code` không có plan** — sẽ phải refactor nhiều
+2. **Skip `/review` đi `/deploy` luôn** — ship bugs
+3. **Không `/save-brain`** — mất context, session sau phải giải thíc lại
+4. **Sửa code AI mà không nói AI biết** — AI không biết bạn đã thay đổi gì
+
+---
+
+## ❓ FAQ
+
+### "Tôi không biết code, dùng được không?"
+**Được.** AWF thiết kế cho người không biết code. Bạn nói ý tưởng, AI code và test và fix cho bạn.
+
+### "Nếu AI code sai thì sao?"
+AI tự chạy test → tự phát hiện sai → tự fix (tối đa 3 lần). Nếu vẫn sai → hỏi bạn.
+
+### "Mỗi session có bao nhiêu lệnh?"
+Không giới hạn. Nhưng nên `/save-brain` khi context bắt đầu dài.
+
+### "Có thể dùng cho project nào?"
+Mọi project: Web app, mobile app, API, CLI tool, static site...
+
+### "GStack khác AWF chỗ nào?"
+GStack (của CEO Y Combinator) thiết kế cho Claude Code, tập trung browser testing. AWF thiết kế cho Antigravity, tập trung non-tech UX và phase-based coding. Cả 2 đều theo sprint flow.
+
+### "Tôi muốn dùng cả GStack và AWF?"
+Không nên. Chúng conflict slash commands. AWF v5 đã hấp thụ ý tưởng hay nhất từ GStack.