Front-End Checklist: 385 quy tắc audit chất lượng web
/Front-End-Checklist
Front-End Checklist biến kiến thức best practice frontend vốn rải rác thành 385 quy tắc cụ thể, có thể kiểm tra được, chia trong 11 danh mục. Điểm mạnh nằm ở độ sâu của những danh mục mà các công cụ khác thường bỏ qua — accessibility có tới 95 quy tắc, SEO có 94, gấp đôi số quy tắc của HTML hay JavaScript. Đây là checklist để bạn đi qua từng mục, không phải linter tự chạy, nên giá trị chỉ hiện ra khi có người, hoặc agent, thực sự làm theo.
Front-End Checklist là gì
Front-End Checklist là một bộ quy tắc mã nguồn mở để review chất lượng frontend, bao quát HTML, CSS, JavaScript, performance, accessibility, SEO, security, và nhiều hơn nữa. Mỗi quy tắc trong số 385 quy tắc có trang riêng với phần giải thích, nhãn ưu tiên Critical/High/Medium/Low, hướng dẫn khắc phục, và các bước xác minh. Duyệt trên frontendchecklist.io, truy vấn qua MCP server, hoặc đọc trọn vẹn trong README.
385 quy tắc trong 11 danh mục
- ✓385 quy tắc trong 11 danh mục, từ Privacy chỉ 5 quy tắc đến Accessibility tới 95 quy tắc
- ✓Mỗi quy tắc được gắn nhãn Critical, High, Medium, hoặc Low để bạn ưu tiên thay vì đọc từ đầu đến cuối
- ✓Trang quy tắc có cả giải thích, hướng dẫn khắc phục, và bước xác minh, không chỉ là một ô checkbox
- ✓MCP server tại mcp.frontendchecklist.io expose 11 tool, gồm review_code, audit_url, search_rules, get_workflow, và get_checklist_rules
- ✓Skill có thể cài đặt (npx skills add frontendchecklist/skills) đóng gói từng quy tắc riêng lẻ, như https, thành một workflow tập trung cho agent
- ✓Dự án song hành UX Patterns for Devs giúp chọn UI pattern trước khi bạn audit phần triển khai bằng checklist này
Cách sử dụng Front-End Checklist
- •Đi qua category navigator trên frontendchecklist.io trước khi launch hoặc trước một pull request
- •Trỏ agent tương thích MCP vào mcp.frontendchecklist.io và yêu cầu nó review một component hoặc audit một URL đang chạy
- •Cài một skill theo từng quy tắc như https khi bạn chỉ cần kiểm tra một điểm cụ thể, không cần chạy hết 385 quy tắc
- •Gọi search_rules hoặc get_workflow ngay trong phiên làm việc của agent trước khi viết code liên quan đến accessibility, SEO, hoặc security
- •Đọc thẳng README khi bạn muốn có cả checklist trong một file, không cần vào website
Điểm mạnh
- ✓Bao quát cả những danh mục mà linter thông thường bỏ qua — privacy, internationalization, accessibility cho breadcrumb, accessibility cho file upload
- ✓Nhãn ưu tiên nghĩa là 385 quy tắc không đồng nghĩa với 385 việc khẩn cấp như nhau
- ✓MCP server đưa cùng một bộ quy tắc ra trước cả người review thủ công lẫn agent audit tự động
- ✓Mỗi quy tắc giải thích luôn cách khắc phục, không chỉ nêu vấn đề
Những gì Front-End Checklist không bao quát
- △License không được nêu trong dữ liệu công khai của repo — kiểm tra trực tiếp trong repository trước khi dùng cho sản phẩm audit thương mại
- △385 quy tắc là khá nhiều với một dự án nhỏ; không có cách thu gọn sẵn ngoài việc duyệt theo từng danh mục
- △Đây là checklist, không phải scanner tự động — không có gì ở đây tự sửa code cho bạn, nó chỉ cho biết cần sửa gì
- △Các tool MCP như audit_url vẫn phụ thuộc vào agent điều khiển chúng; agent yếu thì audit ra cũng yếu, dù tool đúng
Các lựa chọn thay thế Front-End Checklist
Câu hỏi thường gặp
Front-End Checklist miễn phí để dùng, và repository công khai trên GitHub kèm quy trình đóng góp rõ ràng (pnpm install, pnpm dev). License cụ thể không được nêu trong dữ liệu công khai của repo, nên hãy kiểm tra file LICENSE trong repository trước khi dùng cho mục đích thương mại.
Front-End Checklist bao quát 11 danh mục: HTML, CSS, JavaScript, performance, accessibility, SEO, security, hình ảnh, testing, privacy, và internationalization, tổng cộng 385 quy tắc. Accessibility (95 quy tắc) và SEO (94 quy tắc) là hai danh mục sâu nhất.
Front-End Checklist có MCP server tại mcp.frontendchecklist.io với 11 tool, gồm review_code cho code dán trực tiếp, audit_url cho trang public, và search_rules để tra theo từ khóa, nên agent có thể dùng trực tiếp. Trỏ bất kỳ agent tương thích MCP nào vào đó và nêu tên server trong prompt, vì một số client chỉ phát hiện MCP tool khi được nhắc tên.
Front-End Checklist gắn nhãn mỗi quy tắc là Critical, High, Medium, hoặc Low. Critical là các vấn đề làm hỏng site, liên quan compliance, hoặc bảo mật, cần sửa trước tiên; High là ảnh hưởng lớn tới UX, accessibility, performance, hoặc khả năng được tìm thấy; Medium là best practice thông thường; Low là cải thiện tùy tình huống.
Việc tích hợp trực tiếp vào pipeline CI/CD không được nêu rõ trong repository của Front-End Checklist. Các workflow được công bố là duyệt website, truy vấn MCP server, hoặc đọc README, chứ không phải một bước CLI gắn sẵn vào pipeline, nên kiểm tra trực tiếp repository nếu bạn cần điều đó.
Website của Front-End Checklist (frontendchecklist.io) dùng để duyệt và lọc quy tắc theo cách thủ công cho con người. MCP server (mcp.frontendchecklist.io) expose cùng bộ 385 quy tắc đó thành 11 tool, như review_code và audit_url, cho agent dùng.
Nên dùng khi nào — và khi nào nên bỏ qua
Các team làm review trước khi launch, hoặc dev độc lập muốn có thêm một vòng kiểm tra mà không cần thuê auditor, sẽ tận dụng được nhiều nhất — nhất là khi kết nối một agent tương thích MCP và để nó chạy search_rules hay audit_url thay bạn. Nếu điều bạn thực sự muốn là một điểm số tự động duy nhất, không cần review thủ công, thì đây không phải công cụ đó: Front-End Checklist đưa cho bạn một bộ quy tắc để tự đi qua, không phải điểm số nó tự tính sẵn.
Repo liên quan
Muốn nghe thêm một ý kiến về Front-End-Checklist?
Hỏi một AI đọc được trang này — một cú bấm là có ngay nhận định về Front-End-Checklist.