Bộ Skills & Subagents như chuyên gia

Claude viết code tốt, nhưng mỗi nghề lại có chuẩn riêng mà nếu không nhắc thì dễ bỏ sót: bảo mật theo OWASP, khả năng tiếp cận (a11y) theo WCAG, tối ưu để Google tìm thấy (SEO), giao diện nhất quán, định dạng code gọn gàng, và giữ toàn vẹn dữ liệu (data integrity). Trớ trêu là người không-code lại càng không biết những chuẩn đó để mà nhắc.

Lối ra: gói sẵn chuyên môn vào đồ nghề để Claude tự dùng. Có hai loại đồ nghề: Skill và Subagent.

Một Skill là một gói hướng dẫn (how-to) Claude nạp vào khi gặp việc liên quan. Ví dụ skill "shadcn-react + Tailwind" dạy nó dựng giao diện theo đúng bộ quy ước, nên các màn hình trông nhất quán thay vì mỗi trang một kiểu. Mèo con không cần thuộc quy ước - skill mang nó theo.

• ▸Skill = kiến thức/chuẩn nghề đóng gói, Claude tự nạp khi việc cần tới.
• ▸Bộ skill của Mèo: OWASP (bảo mật), WCAG (a11y), SEO, shadcn-react + Tailwind (giao diện), Prettier (format/lint), data integrity (toàn vẹn dữ liệu).
• ▸Mèo con chỉ cần làm việc bình thường; skill lo phần "đúng chuẩn".

Một Subagent là trợ lý có ngữ cảnh riêng, nhận nguyên một việc rồi trả kết quả về phiên chính. Ví dụ subagent "rà bảo mật" đọc cả phần thay đổi (diff) và liệt kê lỗ hổng; subagent "kiểm a11y" soi một trang theo WCAG. Vì chạy trong ngữ cảnh riêng nên nó rà kỹ mà không làm loãng phiên chính của mèo con:

Bộ đồ nghề mèo con sắp cài phủ đúng những chuẩn một sản phẩm bán hàng cần để ship an toàn:

• ▸🔒 Bảo mật (OWASP): rà các lỗ hổng phổ biến - lộ bí mật, kiểm tra đầu vào, quyền truy cập.
• ▸♿ A11y (WCAG): kiểm tương phản màu, alt cho ảnh, nhãn nút - để ai cũng dùng được.
• ▸🔍 SEO: tiêu đề, mô tả, dữ liệu có cấu trúc - để Google tìm thấy sản phẩm.
• ▸🎨 Design system (shadcn-react + Tailwind): dựng UI theo primary color + bảng màu bạn chọn, nhất quán cho cả shop và admin.
• ▸🧹 Prettier: tự format/lint cho code sạch, đỡ tranh cãi kiểu trình bày.
• ▸🛡️ Data integrity: giữ dữ liệu đúng và nhất quán (nhất là tiền và số dư).

Phần bảo mật, a11y, SEO và giao diện có cả subagent để rà theo lệnh (vd "rà giao diện" kiểm responsive + tương phản); phần design system, format và toàn vẹn dữ liệu thiên về skill mà Claude áp khi dựng.

Có skill giao diện rồi, nhưng Claude không tự biết ý đồ thiết kế của mèo con: màu thương hiệu nào, phong cách ra sao. Mô tả mơ hồ thì mỗi trang một kiểu. Phải ra đề rõ - ba thứ cần đưa:

• ▸Primary color + bảng màu: chọn một màu chính + vài màu phụ, khai báo MỘT LẦN thành design tokens; Claude bám tokens thay vì tự chế mã màu rải rác.
• ▸Reference: đưa ảnh mẫu hoặc web mèo con thích để AI bắt đúng phong cách.
• ▸Mobile-first: yêu cầu thiết kế cho điện thoại trước rồi mới mở rộng lên desktop.

Khai báo màu bằng design tokens (Tailwind v4 @theme, cũng là cách chính meohamhoc.vn làm) - đổi một chỗ là cả sản phẩm đổi theo, AI không lệch màu:

@theme {
  --color-primary: #7c3aed;  /* màu thương hiệu (vd tím) */
  --color-accent:  #14b8a6;  /* nhấn phụ */
  --color-bg:      #0d1117;
  --color-ink:     #e6edf3;
}
/* Dùng: class="bg-primary text-ink" - đổi token là đổi cả sản phẩm */

Bộ đồ nghề gói trong một thư mục .claude/ (gồm skills/ và agents/). Tải về, giải nén vào gốc repo, commit - thế là xong. Lần vibe sau Claude tự thấy và dùng:

Bộ này bổ trợ cho CLAUDE.md ở bài trước: CLAUDE.md nói luật riêng của business, còn đồ nghề mang chuẩn nghề. Cả hai cùng nằm trong repo, đi đâu cũng theo.

Bí quyết nằm ở chỗ chuyên môn được đóng gói sẵn. Mèo con không cần thuộc OWASP hay WCAG; chỉ cần gọi subagent rà, đọc danh sách phát hiện bằng tiếng Việt, rồi nhờ Claude sửa. Hàng rào tự bật mỗi lần làm, nên sản phẩm đạt chuẩn cao hơn hẳn so với vibe tay không.