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).
• Trang 3.2: Skills - Hệ thống kỹ năng và kiến thức chuyên sâu cho AI.
• Trang 3.3: Workflows - Quy trình làm việc tự động thông qua các lệnh gạch chéo (/).

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.

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ế

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:

---

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:

---

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

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

Nhóm Phát triển

Nhóm Chất lượng & Bảo mật

Nhóm Chuyên biệt

---

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

---

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

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?

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.

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ế:

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...

3. Cấu trúc một Skill

.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 

yaml
---
name: react-best-practices
description: React & Next.js performance optimization from Vercel Engineering.
allowed-tools: Read, Write, Edit, Bash
---

4. Danh sách đầy đủ 36 Skills theo nhóm

🎨 Frontend & UI (5 Skills)

⚙️ Backend & API (4 Skills)

🗄️ Database (2 Skills)

📝 TypeScript / JavaScript (1 Skill)

☁️ Cloud & Infrastructure (3 Skills)

🧪 Testing & Quality (5 Skills)

🔒 Security (2 Skills)

🏗️ Architecture & Planning (4 Skills)

📱 Mobile (1 Skill)

🎮 Game Development (1 Skill)

🔍 SEO & Growth (2 Skills)

💻 Shell / CLI (2 Skills)

🔧 Other (6 Skills)

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:

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

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

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

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

Ví dụ thực tế

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ụ:

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ụ:

/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ụ:

/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ụ:

/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ụ:

/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
/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 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ụ:

/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ụ:

/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ộ.

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.

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ụ:

/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/:

.agent/workflows/code-review.md

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

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:

/code-review

---

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