# Chương 3: Khám phá các khái niệm cốt lõi (Core Concepts)

# Trang 3.1: AI Agents - Các đặc vụ chuyên gia và cơ chế định tuyến thông minh (Intelligent Routing).

## 1. Agent là gì?

**Agent** là một "nhân cách AI chuyên gia" được cấu hình sẵn với kiến thức sâu, công cụ và hành vi riêng biệt cho một lĩnh vực cụ thể trong phát triển phần mềm.

Hãy hình dung Agent như một chuyên viên tư vấn: thay vì hỏi một người biết tất cả một cách chung chung, bạn đang nói chuyện trực tiếp với **kiến trúc sư Frontend**, **chuyên gia bảo mật**, hay **kỹ sư kiểm thử** tùy theo từng vấn đề.

---

## 2. Hệ thống Định tuyến thông minh (Intelligent Routing)

### Cơ chế hoạt động

Điểm đặc biệt quan trọng nhất: **bạn không cần phải gọi tên Agent thủ công**. Hệ thống sẽ tự động phân tích yêu cầu của bạn và kích hoạt (các) Agent phù hợp nhất.

```html
Yêu cầu của bạn
│
▼
Hệ thống phân tích (Silent Analysis)
│
▼
Phát hiện lĩnh vực (Frontend? Backend? Security?...)
│
▼
Chọn Agent chuyên gia tương ứng
│
▼
Thông báo cho bạn Agent đang được dùng:
🤖 Đang áp dụng kiến thức của @[agent-name]...
│
▼
Trả lời ở cấp độ chuyên gia
```

### Ví dụ thực tế

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-y%C3%AAu-c%E1%BA%A7u-c%E1%BB%A7a-b%E1%BA%A1n-agen"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Yêu cầu của bạn</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Agent được kích hoạt</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">"Thêm xác thực JWT vào API"</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`@security-auditor` + `@backend-specialist`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">"Sửa lỗi nút dark mode bị lệch màu"</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`@frontend-specialist`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">"Login trả về lỗi 500 ngẫu nhiên"</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`@debugger`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">"Thiết kế schema cho bảng users và orders"</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`@database-architect`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">"Viết unit test cho service xác thực"</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`@test-engineer`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">"Tối ưu tốc độ tải trang"</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`@performance-optimizer`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">"Lập kế hoạch tính năng thanh toán"</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`@project-planner`</td></tr></tbody></table>

</div>### Ghi đè thủ công (Override)

Nếu bạn muốn buộc sử dụng một Agent cụ thể, chỉ cần đề cập tên trong yêu cầu:

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-%22d%C3%B9ng-security-audit" node="[object Object]"><div class="min-h-7 relative box-border flex flex-row items-center justify-between rounded-t border-b border-gray-500/20 px-2 py-0.5"><div class="font-sans text-sm text-ide-text-color opacity-60">  
</div><div class="flex flex-row gap-2 justify-end"></div></div><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="1" data-line-number="1" data-line-start="1"><div class="line-content"><span class="mtk1">"Dùng security-auditor để review toàn bộ phần auth của tôi"</span></div></div><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><span class="mtk1">"Nhờ debugger phân tích lỗi này theo quy trình 4 bước"</span></div></div></div></div></div></div>---

## 3. Checklist bắt buộc trước khi AI viết code

Trước khi thực hiện bất kỳ tác vụ code hoặc thiết kế nào, AI **bắt buộc** phải hoàn thành checklist sau:

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-b%C6%B0%E1%BB%9Bc-ki%E1%BB%83m-tra-n%E1%BA%BFu-ch"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Bước</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Kiểm tra</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Nếu chưa làm</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">1</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Đã xác định đúng Agent cho lĩnh vực này chưa?</td><td class="px-3 py-2 leading-snug border border-gray-500/20">→ Dừng lại. Phân tích lại lĩnh vực yêu cầu.</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">2</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Đã đọc file cấu hình của Agent chưa?</td><td class="px-3 py-2 leading-snug border border-gray-500/20">→ Dừng lại. Mở và đọc `.agent/agents/{agent}.md`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">3</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Đã thông báo Agent đang dùng cho người dùng chưa?</td><td class="px-3 py-2 leading-snug border border-gray-500/20">→ Dừng lại. Thêm thông báo `🤖 Đang áp dụng @[agent]...`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">4</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Đã tải các Skills cần thiết từ frontmatter chưa?</td><td class="px-3 py-2 leading-snug border border-gray-500/20">→ Dừng lại. Kiểm tra trường `skills:` và đọc chúng.</td></tr></tbody></table>

</div>---

## 4. Danh sách đầy đủ 20 Agents

### Nhóm Quản lý &amp; Điều phối

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-agent-chuy%C3%AAn-m%C3%B4n-ski"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Agent</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Chuyên môn</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skills sử dụng</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`orchestrator`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Điều phối nhiều Agent làm việc song song cho tác vụ phức tạp</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`parallel-agents`, `behavioral-modes`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`project-planner`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Khám phá yêu cầu, lập kế hoạch và phân rã công việc</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`brainstorming`, `plan-writing`, `architecture`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`product-manager`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Yêu cầu nghiệp vụ, user stories</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`plan-writing`, `brainstorming`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`product-owner`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Chiến lược sản phẩm, quản lý backlog, định nghĩa MVP</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`plan-writing`, `brainstorming`</td></tr></tbody></table>

</div>### Nhóm Phát triển

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-agent-chuy%C3%AAn-m%C3%B4n-ski-1"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Agent</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Chuyên môn</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skills sử dụng</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`frontend-specialist`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Giao diện Web (React, Next.js, Tailwind CSS)</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`react-best-practices`, `frontend-design`, `tailwind-patterns`, `web-design-guidelines`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`backend-specialist`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">API, Business Logic, máy chủ</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`api-patterns`, `nodejs-best-practices`, `database-design`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`database-architect`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Thiết kế schema, SQL, tối ưu truy vấn</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`database-design`, `prisma-expert`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`mobile-developer`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">iOS, Android, React Native, Flutter</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`mobile-design`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`game-developer`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Logic game, cơ học trò chơi</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`game-development`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`devops-engineer`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">CI/CD, Docker, hạ tầng cloud</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`deployment-procedures`, `docker-expert`</td></tr></tbody></table>

</div>### Nhóm Chất lượng &amp; Bảo mật

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-agent-chuy%C3%AAn-m%C3%B4n-ski-2"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Agent</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Chuyên môn</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skills sử dụng</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`security-auditor`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Kiểm tra bảo mật, tuân thủ OWASP</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`vulnerability-scanner`, `red-team-tactics`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`penetration-tester`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Bảo mật tấn công (Offensive Security)</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`red-team-tactics`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`test-engineer`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Chiến lược kiểm thử toàn diện</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`testing-patterns`, `tdd-workflow`, `webapp-testing`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`qa-automation-engineer`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Kiểm thử E2E và CI Pipeline</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`webapp-testing`, `testing-patterns`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`debugger`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Phân tích nguyên nhân gốc rễ của lỗi</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`systematic-debugging`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`performance-optimizer`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Tối ưu hiệu năng và Core Web Vitals</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`performance-profiling`</td></tr></tbody></table>

</div>### Nhóm Chuyên biệt

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-agent-chuy%C3%AAn-m%C3%B4n-ski-3"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Agent</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Chuyên môn</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skills sử dụng</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`seo-specialist`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Xếp hạng tìm kiếm, khả năng hiển thị (SEO + GEO)</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`seo-fundamentals`, `geo-fundamentals`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`documentation-writer`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Hướng dẫn sử dụng, tài liệu kỹ thuật</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`documentation-templates`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`code-archaeologist`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Phân tích và tái cấu trúc code cũ (Legacy code)</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`clean-code`, `code-review-checklist`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`explorer-agent`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Khám phá và phân tích codebase hiện có</td><td class="px-3 py-2 leading-snug border border-gray-500/20">*(không có skill cố định, dùng ngữ cảnh)*</td></tr></tbody></table>

</div>---

## 5. Khi nào nên sử dụng Agent nào?

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-t%C3%ACnh-hu%E1%BB%91ng-agent-ph%C3%B9"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Tình huống</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Agent phù hợp</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Bắt đầu dự án mới, chưa biết thiết kế thế nào</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`project-planner` → sau đó `orchestrator`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Xây dựng trang web, component UI</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`frontend-specialist`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Tạo API endpoint, kết nối database</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`backend-specialist`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Thiết kế bảng DB, model dữ liệu</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`database-architect`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Phát hiện lỗ hổng bảo mật</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`security-auditor`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Ứng dụng bị lỗi không rõ nguyên nhân</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`debugger`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Muốn viết test cho code hiện có</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`test-engineer`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Trang web tải chậm, điểm Lighthouse thấp</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`performance-optimizer`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Cần lên kế hoạch triển khai sản phẩm</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`project-planner` + `devops-engineer`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Cần phân tích một codebase lạ</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`explorer-agent`</td></tr></tbody></table>

</div>---

## 6. Agents làm việc cùng nhau

Các Agent có thể **phối hợp** để giải quyết các vấn đề phức tạp đa lĩnh vực. Sử dụng Agent `orchestrator` để điều phối:

**Ví dụ:** Xây dựng hệ thống đăng nhập hoàn chỉnh

```html
orchestrator điều phối:
├── database-architect → Thiết kế bảng users
├── backend-specialist → Viết API authentication
├── security-auditor → Review bảo mật, kiểm tra JWT
├── frontend-specialist → Xây dựng form login
└── test-engineer → Viết test cho toàn bộ flow
```

> **Lưu ý thực tế:** AI thực sự xử lý tuần tự (không song song thực sự), nhưng `orchestrator` quản lý ngữ cảnh và đảm bảo mỗi phần được thực hiện đúng bởi "góc nhìn" của Agent chuyên gia tương ứng.

# Trang 3.2: Skills - Hệ thống kỹ năng và kiến thức chuyên sâu cho AI.

## 1. Skill là gì?

**Skill** là một gói kiến thức chuyên biệt chứa các nguyên lý, mẫu thiết kế (patterns) và khung ra quyết định (decision-making framework) cho một lĩnh vực cụ thể.

### Skills khác gì so với template code thông thường?

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-%C4%90%E1%BA%B7c-%C4%91i%E1%BB%83m-template-co" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Đặc điểm</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Template Code Thông thường</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill trong Antigravity Kit</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">**Bản chất**</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Code mẫu cứng nhắc để copy</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Nguyên lý để suy nghĩ và quyết định</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">**Tính linh hoạt**</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Cố định, áp sát một pattern</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Thích nghi theo ngữ cảnh dự án</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">**Kết quả**</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Code giống nhau cho mọi trường hợp</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Code phù hợp với yêu cầu cụ thể</td></tr></tbody></table>

</div></div></div></div></div></div></div>> **Ví dụ:** Thay vì đưa cho bạn một template API cố định, Skill `api-patterns` dạy AI *cách quyết định* khi nào dùng REST, khi nào dùng GraphQL, và khi nào dùng tRPC dựa trên ngữ cảnh dự án của bạn.

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content">---

</div></div></div></div></div></div>## 2. Cách Skills được tải (Load on-demand)

Skills **không** được tải toàn bộ một lúc. Chúng được tải **theo yêu cầu** theo 3 cơ chế:

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-c%E1%BA%A5u-h%C3%ACnh-agent%3A%C2%A0m%E1%BB%97i-" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content">1. **Cấu hình Agent:** Mỗi Agent trong YAML frontmatter liệt kê các Skills nó được phép truy cập (trường `skills:`).
2. **Ngữ cảnh tác vụ:** Khi nhận yêu cầu, AI đọc mô tả của các Skills có liên quan và chỉ tải những Skill thực sự cần thiết.
3. **Đọc có chọn lọc:** Chỉ đọc các section cần thiết trong **<span class="context-scope-mention"><span class="inline-flex items-center gap-0.5 rounded-md align-middle text-sm font-medium transition-[opacity,background-color] cursor-pointer hover:bg-gray-500/20 select-text translate-y-[-1px]" draggable="true"><span class="inline-flex break-all leading-tight">SKILL.md</span></span></span>**, không đọc toàn bộ để tối ưu hiệu suất.

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="11" data-line-number="11" data-line-start="11"><div class="line-content"></div></div></div></div></div></div></div></div></div></div></div></div>```html
Ví dụ:
Yêu cầu: "Tạo API endpoint cho giỏ hàng"
│
▼
backend-specialist được kích hoạt
│
▼
Tải: api-patterns + nodejs-best-practices + database-design
│
▼
Không tải: mobile-design, seo-fundamentals, red-team-tactics...
```

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk--1" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="11" data-line-number="11" data-line-start="11"><div class="line-content"></div></div></div></div></div></div>---

</div></div></div></div></div></div>## 3. Cấu trúc một Skill

```html
.agent/skills/react-best-practices/
├── SKILL.md # Bắt buộc — Metadata, nguyên lý chính, khung quyết định
├── sections/ # Tùy chọn — Hướng dẫn chi tiết theo từng chủ đề nhỏ
├── examples/ # Tùy chọn — Ví dụ triển khai tham khảo thực tế
├── scripts/ # Tùy chọn — Script Python/Bash có thể chạy tự động
└── assets/ # Tùy chọn — Hình ảnh, assets tham khảo
```

**Phần đầu của**

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill.md%C2%A0%28frontmatte" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content">**<span class="inline-flex break-all leading-tight">SKILL.md</span> (Frontmatter YAML):**</div></div></div></div></div></div><div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk--2" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" node="[object Object]"><div class="min-h-7 relative box-border flex flex-row items-center justify-between rounded-t border-b border-gray-500/20 px-2 py-0.5">  
</div><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="5" data-line-number="5" data-line-start="5"><div class="line-content"></div></div></div></div></div></div></div></div></div></div></div></div>```html
yaml
---
name: react-best-practices
description: React & Next.js performance optimization from Vercel Engineering.
allowed-tools: Read, Write, Edit, Bash
---
```

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk--3" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="5" data-line-number="5" data-line-start="5"><div class="line-content"></div></div></div></div></div></div>---

</div></div></div></div></div></div>## 4. Danh sách đầy đủ 36 Skills theo nhóm

### 🎨 Frontend &amp; UI (5 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-react-be" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`react-best-practices`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Tối ưu React &amp; Next.js — 57 quy tắc từ Vercel Engineering</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`web-design-guidelines`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Kiểm toán UI web — 100+ quy tắc về Accessibility, UX, Performance</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`tailwind-patterns`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Tailwind CSS v4, CSS-first config, container queries</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`frontend-design`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Hệ thống thiết kế, bảng màu, typography, micro-animations</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`ui-ux-pro-max`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">**50 phong cách** thiết kế, **21 bảng màu**, **50 font chữ** chuyên nghiệp</td></tr></tbody></table>

</div></div></div></div></div></div></div>### ⚙️ Backend &amp; API (4 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-api-patt" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`api-patterns`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Thiết kế API: REST vs GraphQL vs tRPC, versioning, pagination</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`nestjs-expert`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">NestJS modules, DI container, decorators, Guards</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`nodejs-best-practices`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Node.js async patterns, bảo mật, kiến trúc module</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`python-patterns`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">FastAPI, Django, async vs sync, type hints, Pydantic v2</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 🗄️ Database (2 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-database" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`database-design`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Thiết kế schema, chiến lược indexing, tránh N+1 query</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`prisma-expert`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Prisma ORM, migrations, relations, query optimization</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 📝 TypeScript / JavaScript (1 Skill)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-typescri" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`typescript-expert`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Lập trình kiểu nâng cao (generics, conditional types), hiệu năng biên dịch</td></tr></tbody></table>

</div></div></div></div></div></div></div>### ☁️ Cloud &amp; Infrastructure (3 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-docker-e" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`docker-expert`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Containerization, Docker Compose, multi-stage builds</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`deployment-procedures`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">CI/CD, chiến lược deploy 5 giai đoạn, rollback</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`server-management`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Quản lý process, monitoring, scaling</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 🧪 Testing &amp; Quality (5 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-testing-" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`testing-patterns`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Pyramid kiểm thử, Jest/Vitest, AAA pattern, mocking</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`webapp-testing`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">E2E testing, Playwright, audit chiến lược sâu</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`tdd-workflow`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Vòng lặp RED-GREEN-REFACTOR, test-first development</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`code-review-checklist`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Tiêu chuẩn review code: chất lượng, bảo mật, best practice</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`lint-and-validate`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">ESLint, Prettier, TypeScript strict mode</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 🔒 Security (2 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-vulnerab" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`vulnerability-scanner`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">OWASP 2025, Supply Chain Security, phân tích lỗ hổng</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`red-team-tactics`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Chiến thuật tấn công theo MITRE ATT&amp;CK, báo cáo penetration test</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 🏗️ Architecture &amp; Planning (4 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-app-buil" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`app-builder`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Tạo khung ứng dụng full-stack, chọn tech stack, phối hợp Agent</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`architecture`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">ADR (Architecture Decision Records), đánh đổi trade-off</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`plan-writing`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Phân rã công việc, định nghĩa phụ thuộc, tiêu chí xác minh</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`brainstorming`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Giao thức Socratic: đặt câu hỏi làm rõ trước khi triển khai</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 📱 Mobile (1 Skill)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-mobile-d" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`mobile-design`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Touch interaction, Mobile-first, iOS/Android conventions</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 🎮 Game Development (1 Skill)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-game-dev" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`game-development`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Logic game, cơ học vật lý, vòng lặp game loop</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 🔍 SEO &amp; Growth (2 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-seo-fund" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`seo-fundamentals`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">E-E-A-T, Core Web Vitals, Google algorithm principles</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`geo-fundamentals`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Generative Engine Optimization (tối ưu cho AI search: ChatGPT, Perplexity)</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 💻 Shell / CLI (2 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-bash-lin" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`bash-linux`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Linux commands, piping, error handling, scripting</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`powershell-windows`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">PowerShell operators, quản lý lỗi, pitfalls</td></tr></tbody></table>

</div></div></div></div></div></div></div>### 🔧 Other (6 Skills)

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-m%C3%B4-t%E1%BA%A3-clean-co" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`clean-code`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Tiêu chuẩn code sạch toàn cục, không over-engineering</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`behavioral-modes`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Các chế độ hoạt động AI (brainstorm, implement, debug, ship...)</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`parallel-agents`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Mẫu điều phối đa Agent, phân chia công việc độc lập</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`mcp-builder`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Xây dựng MCP Server, thiết kế tool &amp; resource patterns</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`documentation-templates`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Cấu trúc README, API docs, comment code</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`i18n-localization`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Phát hiện hardcoded string, quản lý translations, RTL</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`performance-profiling`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Core Web Vitals, đo lường, bundle analysis</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`systematic-debugging`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Quy trình 4 giai đoạn: Discovery → Hypothesis → Verification → Resolution</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`rust-pro`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Rust 1.75+, async/await, Tokio, axum, systems programming</td></tr></tbody></table>

</div>---

</div></div></div></div></div></div>## 5. Skills đặc biệt kèm theo công cụ thực thi

Các Skills sau không chỉ cung cấp kiến thức mà còn có **scripts Python** để Agent có thể tự động kiểm tra:

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-skill-script-t%C3%A1c-d%E1%BB%A5n" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Skill</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Script</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Tác dụng</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`vulnerability-scanner`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`security_scan.py`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Quét lỗ hổng bảo mật trong dependencies</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`lint-and-validate`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`lint_runner.py`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Chạy ESLint, kiểm tra type errors</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`database-design`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`schema_validator.py`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Kiểm tra tính nhất quán schema DB</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`testing-patterns`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`test_runner.py`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Chạy bộ test tự động (Jest/Vitest)</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`frontend-design`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`ux_audit.py`, `accessibility_checker.py`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Kiểm tra UX Laws và WCAG Accessibility</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`seo-fundamentals`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`seo_checker.py`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Kiểm tra meta tags, cấu trúc heading</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`performance-profiling`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`lighthouse_audit.py`, `bundle_analyzer.py`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Đo lường Lighthouse score và bundle size</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`webapp-testing`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`playwright_runner.py`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Chạy E2E test với Playwright</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`mobile-design`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`mobile_audit.py`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Kiểm tra responsive và touch targets</td></tr></tbody></table>

</div>---

</div></div></div></div></div></div>## 6. Cách Skills được tích hợp với Agents (ví dụ thực tế)

```html
frontend-specialist.md:
---
skills: react-best-practices, frontend-design, tailwind-patterns, web-design-guidelines
---


Khi yêu cầu: "Tạo component card sản phẩm đẹp và dễ tiếp cận"
│
Agent tải:
├── react-best-practices → Áp dụng Server Components, tránh re-render thừa
├── frontend-design → Chọn bảng màu, spacing hợp lý
├── tailwind-patterns → Viết class Tailwind đúng chuẩn v4
└── web-design-guidelines → Đảm bảo ARIA labels, contrast ratio
```

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk--4" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" node="[object Object]"><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="12" data-line-number="12" data-line-start="12"><div class="line-content"></div></div></div></div></div></div>  
</div></div></div></div></div></div>

# Trang 3.3: Workflows - Quy trình làm việc tự động thông qua các lệnh gạch chéo (/).

## 1. Workflow là gì?

**Workflow** là các quy trình được định nghĩa sẵn theo từng bước để hoàn thành một tác vụ lập trình phổ biến. Mỗi Workflow đảm bảo tính **nhất quán** và **đúng chuẩn** cho dù bạn yêu cầu bao nhiêu lần.

### Workflow giải quyết vấn đề gì?

Không có Workflow, kết quả AI trả về cho cùng một yêu cầu có thể khác nhau mỗi lần. Với Workflow, AI luôn đi theo đúng quy trình đã được định nghĩa — đảm bảo không bỏ sót bước nào.

---

## 2. Cách kích hoạt và sử dụng

### Cú pháp cơ bản

```html
/tên-workflow [mô tả yêu cầu]
```

### Ví dụ thực tế

```bash
bash
/brainstorm hệ thống thanh toán cho SaaS app
/plan trang e-commerce với giỏ hàng và checkout
/create ứng dụng todo có dark mode và đồng bộ real-time
/debug form submit không hoạt động, không báo lỗi gì
/test src/services/auth.ts
/ui-ux-pro-max landing page cho startup fintech, tông màu xanh navy
```

---

## 3. Tính năng Turbo (`// turbo`)

Một số bước trong Workflow được đánh dấu `// turbo`. Khi gặp dấu này:

- AI có thể **tự động thực thi** lệnh terminal an toàn mà không cần dừng lại hỏi bạn.
- Nếu toàn bộ Workflow có nhãn `// turbo-all`: mọi lệnh terminal trong Workflow đều tự chạy.

> **Lợi ích:** Tăng tốc độ đáng kể cho các tác vụ lặp đi lặp lại như chạy test, lint check, hay preview server.

---

## 4. Danh sách 11 Workflows và hướng dẫn chi tiết

---

### `/brainstorm` — Lên ý tưởng có cấu trúc

**Mục đích:** Khám phá ít nhất 3 phương án tiếp cận khác nhau cho một vấn đề trước khi viết code. AI sẽ phân tích ưu/nhược điểm và mức độ nỗ lực của từng phương án, sau đó đưa ra khuyến nghị.

**Khi nào dùng:**

- Bắt đầu một tính năng mới và chưa chắc về hướng triển khai.
- Cần so sánh các công nghệ hoặc kiến trúc khác nhau.
- Muốn đảm bảo đã cân nhắc đủ các lựa chọn trước khi commit.

**Ví dụ:**

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk-%2Fbrainstorm-chi%E1%BA%BFn-l%C6%B0" node="[object Object]"><div class="min-h-7 relative box-border flex flex-row items-center justify-between rounded-t border-b border-gray-500/20 px-2 py-0.5"><div class="font-sans text-sm text-ide-text-color opacity-60">  
</div><div class="flex flex-row gap-2 justify-end"></div></div><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="1" data-line-number="1" data-line-start="1"><div class="line-content"><span class="mtk1">/brainstorm chiến lược quản lý state cho ứng dụng có 50+ màn hình</span></div></div><div class="code-line" data-line-end="2" data-line-number="2" data-line-start="2"><div class="line-content"><span class="mtk1">/brainstorm lựa chọn database: PostgreSQL vs MongoDB cho hệ thống IoT</span></div></div></div></div></div></div>**Lưu ý quan trọng:** Chỉ đưa ra ý tưởng, **chưa viết code** ở bước này. Sau khi chọn phương án xong mới dùng `/create` hoặc `/enhance` để triển khai.

---

### `/plan` — Lập kế hoạch dự án

**Mục đích:** Kích hoạt Agent `project-planner` để tạo ra một file kế hoạch chi tiết (`PLAN-{tên}.md`). **Không viết code** trong quá trình này.

**Quy trình:**

1. Bạn mô tả dự án hoặc tính năng.
2. AI đặt câu hỏi làm rõ (Socratic Questions) về yêu cầu, ràng buộc, tech stack.
3. Bạn trả lời các câu hỏi.
4. AI tạo file `docs/PLAN-tên-dự-án.md` với danh sách tác vụ và phân công Agent.

**Ví dụ:**

```bash
/plan hệ thống quản lý nhân sự với phân quyền RBAC
/plan tích hợp cổng thanh toán VNPay vào ứng dụng Next.js
```

---

### `/create` — Tạo ứng dụng/tính năng mới

**Mục đích:** Trình thuật sĩ tạo ứng dụng hoàn chỉnh. Từ mô tả yêu cầu đến code chạy được.

**Quy trình:**

1. Bạn mô tả ứng dụng cần tạo.
2. AI phân tích và đề xuất tech stack.
3. Bạn xác nhận (Y) để tiến hành.
4. Các Agent chuyên gia triển khai từng phần (DB → Backend → Frontend → Tests).

**Ví dụ:**

```bash
/create blog cá nhân với Next.js, MDX và hệ thống comments
/create REST API cho ứng dụng quản lý thư viện sách
```

---

### `/enhance` — Cải tiến code hiện có

**Mục đích:** Thêm tính năng mới vào codebase hiện tại một cách "phẫu thuật" — không làm hỏng code đang chạy.

**Khác `/create` ở điểm nào?**

- `/create` → Xây từ đầu (greenfield).
- `/enhance` → Sửa chữa và bổ sung vào hệ thống đang chạy (brownfield).

**Quy trình:**

1. AI phân tích codebase hiện có (đọc các file liên quan).
2. Lập kế hoạch thay đổi tối thiểu cần thiết.
3. Triển khai tính năng mới cùng với bài test tương ứng.
4. Chạy kiểm tra để đảm bảo không có regression.

**Ví dụ:**

```bash
/enhance thêm tính năng dark mode toggle vào ứng dụng
/enhance tích hợp real-time notifications dùng WebSocket
```

---

### `/debug` — Sửa lỗi có hệ thống

**Mục đích:** Kích hoạt Agent `debugger` để điều tra lỗi theo giao thức 4 giai đoạn nghiêm ngặt.

**4 giai đoạn:**

1. **Discovery (Khám phá):** Thu thập log, báo cáo lỗi, các bước tái hiện.
2. **Hypothesis (Giả thuyết):** Đưa ra danh sách nguyên nhân tiềm năng, sắp xếp theo khả năng xảy ra.
3. **Verification (Xác minh):** Kiểm tra từng giả thuyết bằng bằng chứng cụ thể (không đoán mò).
4. **Resolution (Giải quyết):** Áp dụng bản sửa lỗi và thêm regression test.

**Ví dụ:**

```bash
/debug API trả về 403 dù đã đăng nhập đúng
/debug animation bị giật trên mobile Safari
```

---

### `/test` — Tạo và chạy kiểm thử

**Mục đích:** Tự động hóa toàn bộ quy trình kiểm thử.

**Các chức năng:**

```bash
bash
/test # Chạy toàn bộ test suite hiện có
/test src/auth.ts # Tạo test cases cho file cụ thể (ở đây là auth.ts)
/test coverage # Báo cáo độ bao phủ (coverage report)
```

**Kết quả trả về:** File test mới (`tests/auth.test.ts`), số lượng test cases, tỉ lệ coverage.

---

### `/ui-ux-pro-max` — Thiết kế UI nâng cao

**Mục đích:** Tạo landing page hoặc giao diện chất lượng cao theo phong cách cụ thể trong thời gian ngắn.

**Tích hợp với NextLevelBuilder:** Bạn có thể chọn phong cách từ thư viện tại [nextlevelbuilder.io](https://ui-ux-pro-max-skill.nextlevelbuilder.io/#styles) và dán vào lệnh.

**Kết quả trả về:**

- HTML semantic chuẩn SEO.
- Components có thể tái sử dụng.
- Micro-animations và responsive design.

**Ví dụ:**

```bash
/ui-ux-pro-max tạo landing page SaaS với glassmorphism cards, pricing 3 tới, testimonials
/ui-ux-pro-max portfolio cá nhân cho designer, phong cách minimalist với dark mode
```

---

### `/deploy` — Triển khai ứng dụng

**Mục đích:** Quy trình 5 giai đoạn để triển khai an toàn lên môi trường production.

**5 giai đoạn:** Pre-flight checks → Build → Test → Deploy → Verify.

**Ví dụ:**

```bash
/deploy lên Vercel
/deploy lên VPS với Nginx và PM2
```

---

### `/preview` — Quản lý server xem trước

**Mục đích:** Khởi động, dừng hoặc kiểm tra trạng thái server phát triển cục bộ.

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk--12" node="[object Object]"><div class="min-h-7 relative box-border flex flex-row items-center justify-between rounded-t border-b border-gray-500/20 px-2 py-0.5">  
</div><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="3" data-line-number="3" data-line-start="3"><div class="line-content"></div></div></div></div></div></div>```bash
bash
/preview start # Khởi động server (tự nhận diện Next.js, Vite...)
/preview stop # Dừng server
/preview # Kiểm tra trạng thái hiện tại
```

---

### `/status` — Xem tổng quan dự án

**Mục đích:** Hiển thị bảng điều khiển (dashboard) tổng thể: thông tin dự án, tech stack, tiến độ các Agent, trạng thái server.

<div class="relative whitespace-pre-wrap word-break-all my-2 rounded-lg bg-list-hover-subtle border border-gray-500/20" id="bkmrk--14" node="[object Object]"><div class="min-h-7 relative box-border flex flex-row items-center justify-between rounded-t border-b border-gray-500/20 px-2 py-0.5">  
</div><div class="p-3"><div class="w-full h-full text-xs cursor-text"><div class="code-block"><div class="code-line" data-line-end="1" data-line-number="1" data-line-start="1"><div class="line-content"></div></div></div></div></div></div>```bash
bash
/status
```

---

### `/orchestrate` — Điều phối đa Agent

**Mục đích:** Kích hoạt `orchestrator` để phối hợp nhiều Agent chuyên gia cùng giải quyết một vấn đề lớn, phức tạp đòi hỏi nhiều góc nhìn chuyên môn.

**Khi nào dùng:** Tác vụ yêu cầu đồng thời Frontend + Backend + Security + QA.

**Ví dụ:**

```bash
/orchestrate build toàn bộ hệ thống authentication (DB + API + UI + Tests + Security review)
```

---

## 5. Tạo Workflow tùy chỉnh của riêng bạn

Bất kỳ ai cũng có thể thêm Workflow riêng phù hợp với quy trình nội bộ của đội:

**Bước 1:** Tạo file trong `.agent/workflows/`:

```bash
.agent/workflows/code-review.md
```

**Bước 2:** Viết nội dung theo format:

```bash
markdown
---
description: Tiến hành code review theo tiêu chuẩn nội bộ của đội
---


# Code Review Workflow


1. Đọc toàn bộ diff thay đổi
// turbo
2. Kiểm tra security issues
3. Kiểm tra performance implications
4. Kiểm tra code style theo team conventions
5. Tạo báo cáo review với mức ưu tiên (critical/major/minor)
```

**Bước 3:** Gọi bằng lệnh:

```bash
/code-review
```

---

## 6. Tóm tắt nhanh — Chọn Workflow nào?

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-t%C3%ACnh-hu%E1%BB%91ng-workflow-"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Tình huống</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Workflow</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Chưa biết nên làm theo hướng nào</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/brainstorm`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Cần kế hoạch trước khi code</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/plan`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Xây dự án/tính năng mới từ đầu</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/create`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Thêm tính năng vào dự án hiện có</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/enhance`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Cần giao diện đẹp nhanh</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/ui-ux-pro-max`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Ứng dụng bị lỗi không rõ nguyên nhân</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/debug`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Muốn kiểm thử code</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/test`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Sẵn sàng đưa lên production</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/deploy`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Muốn xem app đang chạy</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview start`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Muốn biết dự án đang ở đâu</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/status`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Tác vụ cần nhiều chuyên gia cùng lúc</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/orchestrate`</td></tr></tbody></table>

</div>