# Biến Tiêu Chuẩn Frontend Thành Kỹ Năng AI Cài Đặt Được — Cho React, Next.js, Vue, Angular, Svelte, Nuxt, Astro và HTML/CSS Nguyên Thủy
Nếu bạn đã từng sử dụng các công cụ AI hỗ trợ lập trình như Claude Code, Cursor hay Copilot cho công việc phát triển frontend, bạn có lẽ đã nhận ra một vấn đề phổ biến: mã nguồn được tạo ra rất nhanh nhưng lại thiếu sự nhất quán. Một component có thể được gắn đúng thuộc tính `aria-label`, component kế tiếp lại không. Một hình ảnh có dimensions rõ ràng, hình ảnh tiếp theo lại gây ra sự dịch chuyển bố cục (layout shift). Một pull request tuân thủ quy tắc thư mục của dự án, pull request tiếp theo lại tự tạo ra một quy tắc mới.
Bạn có thể giải quyết vấn đề này bằng cách yêu cầu từng lần một: “hãy làm cho phần này accessible hơn,” “tối ưu hóa nó cho Core Web Vitals,” “hãy tuân theo quy tắc của chúng ta,” nhưng phương pháp này chỉ hiệu quả khi bạn nhớ yêu cầu đúng, mỗi lần, cho mỗi tệp tin. Chính vì vậy, tôi đã chuyển đổi chúng thành một bộ quy tắc mà AI tự động tham khảo thay vì bạn phải nhắc đi nhắc lại.
## Đây là gì
**[frontend-standard-skills](https://github.com/abayomijohn273/frontend_standard_skills)** là một bộ sưu tập mã nguồn mở gồm các kỹ năng AI có thể cài đặt được — mỗi kỹ năng dành cho một framework frontend — giúp Claude Code, Cursor và bất kỳ công cụ AI hỗ trợ lập trình nào khác tạo ra mã frontend có khả năng truy cập (accessible), hiệu suất cao và nhất quán mà không cần bạn phải nhắc lại nó mỗi lần.
Hãy trỏ vào dự án và nó sẽ cài đặt một bộ quy tắc nghiêm ngặt, có ý kiến rõ ràng và có thể thực thi, bao gồm:
* **Khả năng truy cập (Accessibility)** — Tuân thủ WCAG 2.1 AA, hỗ trợ đầy đủ thao tác bằng bàn phím, ưu tiên HTML ngữ nghĩa thay vì “div-soup”, sử dụng ARIA đúng cách, quản lý tiêu điểm.
* **Hỗ trợ người khiếm thị** — Mô tả alt text chính xác, trạng thái không phụ thuộc vào màu sắc, sử dụng `rem`/`em` để scaling chữ, hỗ trợ `prefers-reduced-motion`, các mẫu thiết kế tương thích với VoiceOver/NVDA.
* **Core Web Vitals** — LCP < 2.5s, CLS < 0.1, INP < 200ms, được đo lường thông qua [pagespeed.web.dev](https://pagespeed.web.dev/), với thiết lập Lighthouse CI để thực thi trong quy trình CI/CD thay vì chỉ kiểm tra thủ công.
* **Thiết kế component** — Tái sử dụng, có khả năng kết hợp, typing đúng cách, không truyền prop qua nhiều cấp.
* **Tính nhất quán UX** — Giao diện người dùng có thể dự đoán được, sử dụng design tokens, xử lý trạng thái loading/empty/error, thiết kế responsive mobile-first.
* **Chất lượng mã nguồn** — Quy tắc đặt tên camelCase, tránh lặp lại mã (DRY), cấu trúc thư mục hợp lý, yêu cầu README phải luôn được cập nhật.
Bộ kỹ năng này cung cấp một kỹ năng cho mỗi stack **HTML & CSS, React, Next.js, Nuxt, Astro, Angular, Vue.js, và Svelte** cộng thêm một kỹ năng `core-standards` không phụ thuộc framework mà mọi kỹ năng khác đều xây dựng dựa trên. Bạn có thể cài đặt chỉ một kỹ năng cần thiết hoặc cài đặt tất cả.
## Tại sao lại là một "kỹ năng" thay vì chỉ là một "prompt"
Prompt là thứ bạn phải nhớ để gõ. Kỹ năng là thứ mà AI tự động tham khảo khi nó liên quan: đang review một component, xây dựng một biểu mẫu, hay chẩn đoán một điểm PageSpeed thấp. Thư mục kỹ năng của mỗi stack bao gồm:
* `SKILL.md` — Điểm vào chính, với mô tả được viết để thực sự kích hoạt (không chỉ ngồi đó mà không được dùng).
* `references/` — Tài liệu chuyên sâu về khả năng truy cập, hiệu suất, tiêu chuẩn component/mã nguồn, và testing & CI, mỗi tài liệu đều có ví dụ mã **sai vs. đúng** cụ thể.
* `assets/RULES.md` — Một tệp quy tắc ngắn gọn, tự chứa, sẵn sàng để đưa thẳng vào dự án.
## Cài đặt
Bốn cách để sử dụng, hãy chọn cách phù hợp nhất với thiết lập của bạn:
**CLI (npx / npm / pnpm / yarn)** — Hoạt động với Cursor, Claude Code, hoặc bất kỳ công cụ nào đọc tệp `AGENTS.md`:
bash
npx frontend-standard-skills add nextjs
npx frontend-standard-skills add react vuejs svelte # nhiều framework cùng lúc
npx frontend-standard-skills add all # tất cả
```
Lệnh này sẽ tạo và ghi vào `.claude/skills/
**Cài đặt qua plugin marketplace của Claude Code:**
“`bash
/plugin marketplace add abayomijohn273/frontend_standard_skills
/plugin install nextjs
“`
**Cài đặt thủ công cho Claude Skills** — Chúng chỉ là các thư mục, vì vậy bạn có thể sao chép trực tiếp kỹ năng mong muốn vào `.claude/skills/` hoặc `~/.claude/skills/`, không cần bước cài đặt nào cả.
**Cài đặt toàn cục qua npm:**
“`bash
npm install -g frontend-standard-skills
fss add nextjs
“`
## Nó trông như thế nào trong thực tế
Sau khi cài đặt, bạn chỉ cần làm việc bình thường và AI sẽ đọc các quy tắc như một phần của ngữ cảnh:
> “Hãy review `ProductCard.tsx` dựa trên tiêu chuẩn frontend của chúng ta, chỉ ra các vấn đề về khả năng truy cập và Core Web Vitals.”
>
> “Tại sao điểm PageSpeed trên trang chủ của chúng ta lại thấp? Hãy sử dụng tiêu chuẩn hiệu suất của chúng ta để chẩn đoán vấn đề.”
>
> “Hãy thiết lập Lighthouse CI trong quy trình CI/CD của chúng ta theo tiêu chuẩn testing.”
Không còn phải giải thích lại “accessible” hay “nhanh” có nghĩa là gì với bạn mỗi lần nữa.
## Liên kết
* npm: [npmjs.com/package/frontend-standard-skills](https://www.npmjs.com/package/frontend-standard-skills)
* GitHub: [github.com/abayomijohn273/frontend_standard_skills](https://github.com/abayomijohn273/frontend_standard_skills)
Dự án được phát hành theo giấy phép MIT và mở để đóng góp. Việc thêm một stack mới (Solid, Qwik, Remix, hoặc bất kỳ framework nào bạn đang dùng) chỉ đơn giản là theo cấu trúc của một framework có sẵn. Tôi sẽ cập nhật nó với nhiều framework hơn nữa. Nếu bạn thử sử dụng nó, tôi thực sự muốn biết nếu có điều gì không hoạt động đúng trên dự án của bạn vì chính loại phản hồi này giúp cải thiện tốt hơn các tệp quy tắc. Đừng quên để lại một **Star** trên GitHub.
