Hướng dẫn sử dụng Skill erp-uiux-pro
Bộ kỹ năng erp-uiux-pro vừa được tạo là một Agent Skill chuẩn của Antigravity. Cách sử dụng rất linh hoạt theo 3 hình thức dưới đây.
Cách 1: Tự động kích hoạt (Automatic / Khuyên dùng nhất)
Không cần gõ lệnh phức tạp. Bất cứ khi nào có yêu cầu làm việc liên quan đến giao diện người dùng, AI sẽ tự động đọc và tuân thủ bộ quy chuẩn này.
Ví dụ yêu cầu: "Làm giao diện bảng ma trận phân bổ kích thước và màu sắc cho đơn hàng dệt."
AI sẽ tự động áp dụng ngay các quy tắc sau:
| Hạng mục | Quy tắc tự động áp dụng |
|---|---|
| Mật độ hiển thị | Chọn High-Density (8-9/10): padding compact py-1.5 px-2.5, chữ cỡ 13-14px. |
| Số lượng, số mét, kg | Tự động căn phải (text-right) kèm font-mono tabular-nums. |
| Mã cuộn, mã size | Tự động căn giữa (text-center). |
| Màu sắc | Tự động dùng Semantic Tokens (bg-surface, text-foreground, bg-warning-soft...). |
| Icon | Cấm tuyệt đối emoji; dùng icon Lucide SVG chuẩn. |
Cách 2: Kêu gọi trực tiếp (Explicit Prompting)
Khi muốn chỉ đạo AI thiết kế một màn hình hoặc audit giao diện theo đúng tiêu chuẩn này, có thể gọi tên skill trong ba tình huống sau.
1. Khi yêu cầu thiết kế mới
"Dựa theo skill erp-uiux-pro, hãy thiết kế component bảng chi tiết cuộn vải tồn kho."
2. Khi muốn audit / rà soát chất lượng UI cũ
"Hãy dùng pre-delivery checklist của erp-uiux-pro để review lại màn hình FabricRollPackingTable.tsx."
3. Khi cần điều chỉnh mật độ hiển thị (Density Dial)
"Màn hình này đang quá thoáng, hãy đẩy Density lên 9/10 theo chuẩn erp-uiux-pro để hiển thị được nhiều hàng trên một màn hình."
Cách 3: Ứng dụng trong quy trình nghiệm thu (Quality Gates)
Trước khi duyệt merge hoặc commit code (ở bước kết luận task), AI sẽ dùng Mục 6 của erp-uiux-pro kết hợp với AI_CHECKLIST.md để báo cáo nghiệm thu theo 8 tiêu chí sau:
| STT | Tiêu chí | Nội dung kiểm tra |
|---|---|---|
| 1 | No Emoji | Đã thay thế toàn bộ bằng Lucide SVG. |
| 2 | No Hardcoded Colors | 100% token ngữ nghĩa, lint:css 0 lỗi. |
| 3 | Number Alignment | Cột số lượng/khối lượng/tiền căn phải + tabular-nums. |
| 4 | Overflow Protection | Cột tên vải có truncate + tooltip chống tràn màn hình. |
| 5 | Loading Skeleton | Có skeleton loader dạng table khi query dữ liệu. |
| 6 | Empty State | Hiển thị icon và thông báo thân thiện khi danh sách rỗng. |
| 7 | Keyboard & Focus | Nhảy ô mượt bằng phím Tab/Enter, focus ring rõ ràng. |
| 8 | Responsive | Đã kiểm tra hiển thị từ 375px đến desktop 1440px. |