dev-workflow
Agent điều phối toàn bộ quy trình phát triển Frontend 5 bước: B0-Clone giao diện tham khảo → B1-Đọc inbox tạo tài liệu → B2-Implement code + tự review → B3-Review chuyên sâu → B4-Commit & đóng task. D
SKILL.md.claude/skills/dev-workflow/SKILL.md
GitHubDev Workflow — Agent Điều Phối 5 Bước
Đầu vào bắt buộc (user cung cấp khi khởi chạy):
Biến Mô tả Ví dụ URL_CLONEURL trang web cần clone để làm tài liệu tham khảo https://actasp.misa.vn/app/BA/.../ListDIR_CLONEThư mục lưu kết quả clone exports/clone-results/ten-tinh-nangINBOX_IDID hoặc tiêu đề task trong inbox task-abc123DOC_FOLDERThư mục lưu tài liệu thiết kế src/modules/business/docs/Nang-capNếu thiếu bất kỳ biến nào → DỪNG, hỏi user trước khi bắt đầu.
⚙️ Quy Tắc Chung
- Tuần tự tuyệt đối: Không nhảy bước, không bỏ qua bước kiểm tra.
- Dừng có lý do: Nếu bất kỳ bước nào thất bại → dừng, báo cáo bước nào, lý do cụ thể.
- Sau mỗi bước thành công: Ghi nhận kết quả ngắn gọn rồi tự động chuyển sang bước tiếp.
- Không tự sáng tạo: Luôn theo skill/prompt được chỉ định, không suy diễn thêm.
🛑 BƯỚC 0 — CLONE GIAO DIỆN THAM KHẢO
Mục tiêu
Dùng Playwright chụp và trích xuất toàn bộ UI từ URL_CLONE để làm tài liệu thiết kế tham khảo.
Thực thi
Load skill
clone-web-playwright:- Đọc file
.claude/skills/clone-web-playwright/SKILL.md - Áp dụng toàn bộ quy trình trong skill đó
- Đọc file
Thực hiện clone theo skill
clone-web-playwright:- URL đích:
URL_CLONE - Thư mục output:
DIR_CLONE - Dùng chế độ tối ưu token (mặc định trong skill)
- URL đích:
Xác nhận kết quả:
- File
DIR_CLONE/analysis/page-structure.mdtồn tại? - File
DIR_CLONE/raw/page-snapshot.jsontồn tại? - Ảnh
DIR_CLONE/screenshots/fullpage.pngtồn tại?
- File
Điều kiện chuyển bước
✅ PASS khi cả 3 file trên tồn tại và có nội dung. ❌ FAIL → dừng, báo lỗi cụ thể (lỗi Playwright, URL không hợp lệ, timeout auth...).
📝 BƯỚC 1 — ĐỌC INBOX & TẠO TÀI LIỆU YÊU CẦU
Mục tiêu
Kết hợp nội dung inbox + kết quả clone B0 → tạo tài liệu thiết kế đầy đủ theo chuẩn dự án.
Thực thi
1.1 — Đọc inbox:
mcp_hub-mcp_inbox-detail
taskId: INBOX_ID
Nếu không tìm thấy task → thử mcp_hub-mcp_inbox-check (agentType: 1) để lấy danh sách rồi tìm lại.
1.2 — Báo cáo đang xử lý:
mcp_hub-mcp_report-task-progress
taskId: INBOX_ID
progressNote: "Đang phân tích yêu cầu và tạo tài liệu thiết kế"
1.3 — Load prompt tạo tài liệu:
Đọc file .github/prompts/prompt-tao-tai-lieu-upgrade-fix.prompt.md — áp dụng TOÀN BỘ quy trình trong prompt đó:
- B1: Thu thập thông tin từ inbox (Luồng B) + từ kết quả clone ở B0
- B2: Xác định vị trí tài liệu → lưu vào
DOC_FOLDER/nc-{ten-tinh-nang}-{yyyy-mm-dd}.md - B3 → B6: Xác định thư mục, menu, soạn tài liệu, review tài liệu
1.4 — Xác nhận:
File tài liệu đã được tạo tại DOC_FOLDER/nc-*.md và có đủ các section (0–7)?
Điều kiện chuyển bước
✅ PASS khi file tài liệu tồn tại, có section 7 Checklist đầy đủ. ❌ FAIL → dừng, báo lý do (không đọc được inbox, mâu thuẫn kiến trúc, thiếu thông tin...).
💻 BƯỚC 2 — IMPLEMENT CODE & TỰ REVIEW SƠ BỘ
Mục tiêu
Triển khai code từ tài liệu B1 theo đúng chuẩn dự án, rồi tự kiểm tra trước khi qua review chuyên sâu.
Thực thi
2.1 — Load prompt triển khai:
Đọc file .github/prompts/prompt-code-tu-tai-lieu.prompt.md → áp dụng toàn bộ quy trình:
- B1: Đọc tài liệu từ B1 (phải có
✅ APPROVEDhoặc đã pass review) - B2: Load các skill cần thiết theo tài liệu
- B3: Triển khai code theo thứ tự:
types → services → hooks → components → dialogs → pages → route → menu - B4: Đối chiếu tài liệu vs code
- B5: Kiểm tra runtime Playwright
2.2 — Cập nhật tiến độ:
mcp_hub-mcp_report-task-progress
taskId: INBOX_ID
progressNote: "Đã implement code, đang tự review..."
2.3 — Tự Review (Self-Review):
Kiểm tra nhanh theo checklist B4 của prompt-code-tu-tai-lieu.prompt.md:
- Mỗi endpoint → ApiService method đúng?
- Mỗi field response → type FE đúng?
- Mỗi màn hình trong tài liệu đã tạo?
- Route đúng path + lazy import?
- Compile errors:
get_errors→ 0 errors
Nếu phát hiện lỗi → sửa ngay, lặp lại đến khi không còn lỗi.
Điều kiện chuyển bước
✅ PASS khi: 0 compile errors + tất cả file trong tài liệu đã tồn tại + runtime Playwright không có Critical errors. ❌ FAIL → dừng, báo file nào lỗi, lỗi cụ thể là gì.
🔍 BƯỚC 3 — REVIEW CODE CHUYÊN SÂU
Mục tiêu
Review toàn bộ code vừa implement theo bộ tiêu chuẩn 11 bước của dự án.
Thực thi
3.1 — Load prompt review:
Đọc file .github/prompts/prompt-review-sau-code.md → thực thi TOÀN BỘ 11 bước B1–B11:
- B1: Đọc tài liệu & xác định phạm vi
- B2: Kiểm tra cấu trúc & tên file
- B3: Code quality (no
any, noconsole.log, comments tiếng Việt...) - B4: API Service vs tài liệu BE
- B5: Tích hợp API → UI (phân tầng, ValidationErrorDialog...)
- B6: UI giao diện (master/dialog/sub-page conventions)
- B7: Validate & format chuẩn hóa
- B8: Routes & Menu
- B9: Runtime Playwright — click HẾT nút, mở HẾT dialog
- B10: Báo cáo kết quả chi tiết
3.2 — Xử lý lỗi phát hiện:
- Critical: Sửa ngay, chạy lại bước bị fail, lặp tối đa 3 lần
- Non-critical (minor/suggestion): Ghi nhận vào báo cáo, không block
- Sau 3 lần vẫn còn Critical: Dừng, báo user quyết định
3.3 — Cập nhật tiến độ:
mcp_hub-mcp_report-task-progress
taskId: INBOX_ID
progressNote: "Review hoàn thành: [Pass/Fail]. [Tóm tắt kết quả B2-B9]"
Điều kiện chuyển bước
✅ PASS khi B10 báo cáo ✅ PASS — Tất cả critical đã fix.
❌ FAIL → dừng, xuất báo cáo B10 đầy đủ để user quyết định.
🚀 BƯỚC 4 — COMMIT & HOÀN THÀNH TÁC VỤ
Mục tiêu
Commit toàn bộ thay đổi (code + tài liệu) và đóng task trong hệ thống.
Thực thi
4.1 — Kiểm tra lần cuối:
get_errors # Phải = 0
git status --short # Liệt kê file thay đổi
git branch --show-current # Phải là branch development hoặc branch hiện tại
4.2 — Load skill commit:
Đọc .claude/skills/commit-local-push-server/SKILL.md → áp dụng quy trình commit.
4.3 — Commit:
git add <các file code và tài liệu đã thay đổi>
git commit -m "feat: <tên tính năng> from inbox INBOX_ID
<Tóm tắt ngắn: file mới, file sửa, tính năng chính>"
Quy tắc commit message:
- Prefix:
feat:(tính năng mới),fix:(sửa lỗi),refactor:(tái cấu trúc) - Body: liệt kê file chính đã thay đổi
- Không commit
auth.json,.env, credentials
4.4 — Push (nếu đủ 5 commits chưa push):
git log origin/development..HEAD --oneline | wc -l
# Nếu ≥ 5 → git push origin development
4.5 — Đóng task inbox:
mcp_hub-mcp_inbox-completed
taskId: INBOX_ID
result: "✅ Hoàn thành. Commit: [hash]. Files: [danh sách ngắn]. Runtime: Pass."
Điều kiện hoàn thành
✅ DONE khi: commit thành công + inbox task đã đóng (status Completed). ❌ FAIL → báo lỗi cụ thể (conflict git, MCP error...).
📊 BÁO CÁO KẾT THÚC
Sau khi hoàn thành, xuất báo cáo:
## ✅ Dev Workflow — Hoàn Thành
| Bước | Kết quả | Chi tiết |
|------|:-------:|---------|
| B0 — Clone | ✅ / ❌ | Đường dẫn: DIR_CLONE |
| B1 — Tài liệu | ✅ / ❌ | File: DOC_FOLDER/nc-*.md |
| B2 — Implement | ✅ / ❌ | Files mới: [...] / Files sửa: [...] |
| B3 — Review | ✅ / ❌ | Critical fixed: N / Runtime: Pass/Fail |
| B4 — Commit | ✅ / ❌ | SHA: [commit-hash] / Inbox: Completed |