Front-End Checklist: 385 quy tắc vàng cho web dev

• Thông tin tổng quan
• Front-End-Checklist là gì?
• Tính năng chính
• Yêu cầu phần cứng & hệ thống
• Cách cài đặt và sử dụng
• Phù hợp với ai?
• Ứng dụng thực tế
• Các repo tương tự đáng chú ý
• Đánh giá của danhbaai.com
• Câu hỏi thường gặp

Bạn đã bao giờ ship một trang web rồi mới nhận ra quên thẻ lang, thiếu favicon, hay viewport meta tag sai cú pháp chưa? Những lỗi tưởng nhỏ nhưng ảnh hưởng trực tiếp đến SEO, accessibility và trải nghiệm người dùng. Front-End Checklist ra đời chính xác để giải quyết bài toán đó — một bộ quy tắc toàn diện giúp dev không bỏ sót bất kỳ chi tiết quan trọng nào trước khi đưa sản phẩm lên production.

Với hơn 73.000 stars trên GitHub và cộng đồng 120 contributors, Front-End Checklist không chỉ là một danh sách tĩnh mà đã phát triển thành một hệ thống kiểm tra chất lượng hoàn chỉnh — có website tương tác, MCP server cho AI agent, và cả skills system cho các công cụ tự động hóa. Phiên bản v2.0 đánh dấu bước chuyển mình quan trọng khi tích hợp sâu với workflow của AI agent.

Thông tin tổng quan

Front-End-Checklist là gì?

Front-End Checklist là một dự án mã nguồn mở cung cấp 385 quy tắc kiểm tra chất lượng cho phát triển frontend, được phân loại thành 11 danh mục: HTML (25 rules), CSS (32), JavaScript (26), Performance (43), Accessibility (95), SEO (94), Security (22), Images (25), Testing (13), Privacy (5) và Internationalization (5). Mỗi quy tắc đi kèm mức độ ưu tiên (Critical, High, Medium, Low), hướng dẫn khắc phục và các bước xác minh cụ thể.

Dự án được tạo từ năm 2017 bởi David Dias, xuất phát từ nhu cầu thực tế: các frontend developer thường phải nhớ hàng trăm best practices nhưng không có một nơi tập trung để kiểm tra. Thay vì dựa vào trí nhớ hay kinh nghiệm cá nhân, Front-End Checklist hệ thống hóa mọi thứ thành quy trình review có cấu trúc. Đến phiên bản v2.0, dự án mở rộng thêm khả năng phục vụ AI agent thông qua MCP (Model Context Protocol), cho phép các công cụ AI như Claude, Cursor hay các agent tương thích MCP truy vấn và sử dụng bộ quy tắc trực tiếp.

Tính năng chính

• 385 quy tắc chi tiết — Bao phủ 11 danh mục frontend từ cơ bản (HTML doctype, charset) đến nâng cao (CSP headers, ARIA patterns), mỗi rule có mức ưu tiên rõ ràng.
• MCP Server tích hợp AI agent — Endpoint công khai tại mcp.frontendchecklist.io cho phép AI agent review code, audit URL, tra cứu rule và chạy workflow kiểm tra tự động.
• Website tương tác — frontendchecklist.io cung cấp giao diện duyệt, lọc và theo dõi tiến trình checklist trực quan, không cần đọc README dài.
• Hệ thống priority 4 cấp — Critical (site-breaking/security), High (UX/accessibility), Medium (best practices), Low (cải thiện tùy tình huống) giúp dev biết nên fix gì trước.
• Review code qua MCP — Tool review_code cho phép paste HTML, CSS, JS, React hoặc Next.js code để AI agent phân tích theo checklist, trả về findings có độ tin cậy cao nhất.
• Audit URL trực tiếp — Tool audit_url kiểm tra trang web công khai về accessibility, performance và SEO dựa trên bộ quy tắc.
• Skills system — Cài đặt skills cho các workflow audit tái sử dụng, từ kiểm tra HTTPS đến audit toàn diện frontend, tích hợp vào các tool hỗ trợ skills.
• Tự động sinh artifacts — Hệ thống generate tự động README, skills từ corpus rules, đảm bảo tính nhất quán giữa website, MCP server và tài liệu.

Yêu cầu phần cứng & hệ thống

Cách cài đặt và sử dụng

Front-End Checklist có thể sử dụng theo nhiều cách. Nếu chỉ cần tra cứu, truy cập trực tiếp frontendchecklist.io. Để phát triển local hoặc đóng góp:

Bước 1: Clone repo:
git clone https://github.com/thedaviddias/Front-End-Checklist.git

Bước 2: Cài dependencies:
cd Front-End-Checklist && pnpm install

Bước 3: Chạy development server:
pnpm dev

Sử dụng với MCP: Kết nối agent tương thích MCP đến endpoint mcp.frontendchecklist.io. Hoặc chạy local stdio server từ packages/mcp/src/cli.ts.

Cài skills:
npx skills add frontendchecklist/skills

Phù hợp với ai?

Ứng dụng thực tế

• Pre-launch audit: Trước khi deploy production, chạy qua checklist để đảm bảo không thiếu meta tags, accessibility attributes, security headers hay performance optimizations.
• Code review có hệ thống: Tech lead dùng checklist làm tiêu chuẩn review PR, đảm bảo mọi thành viên trong team tuân thủ cùng một bộ best practices.
• AI-powered frontend review: Kết nối MCP server với Claude hoặc Cursor, paste component code và yêu cầu agent review theo Front-End Checklist — nhận findings tự động với mức ưu tiên rõ ràng.
• Accessibility compliance: Với 95 rules riêng cho accessibility, dùng làm tài liệu tham chiếu khi cần đạt chuẩn WCAG cho dự án chính phủ hoặc enterprise.
• SEO audit cho landing page: 94 rules SEO giúp kiểm tra từ canonical URL, structured data đến Open Graph tags trước khi chạy campaign marketing.

Các repo tương tự đáng chú ý

Đánh giá của danhbaai.com

Front-End Checklist xứng đáng với vị trí một trong những tài liệu tham chiếu frontend được yêu thích nhất trên GitHub. Với 385 quy tắc được phân loại rõ ràng, hệ thống priority 4 cấp và hướng dẫn khắc phục chi tiết, đây là công cụ thực sự hữu ích chứ không chỉ là “awesome list” để bookmark rồi quên. Phiên bản v2.0 với MCP server là một bước tiến đáng kể, biến checklist tĩnh thành hệ thống tương tác mà AI agent có thể truy vấn trực tiếp.

Điểm mạnh lớn nhất là độ bao phủ toàn diện — từ HTML cơ bản đến privacy, i18n — và cách tổ chức có hệ thống giúp dev không bị overwhelm. Website tương tác cũng là một cải tiến lớn so với việc đọc README dài hàng nghìn dòng. So với các giải pháp tương tự như Lighthouse (tập trung performance/accessibility tự động) hay webhint, Front-End Checklist thiên về hướng dẫn toàn diện hơn là tool scan tự động.

Tuy nhiên, dự án không có license rõ ràng trên GitHub — điều này có thể gây lo ngại cho enterprise adoption. Ngoài ra, với 385 rules, developer mới có thể cảm thấy choáng ngợp nếu không biết bắt đầu từ đâu, dù hệ thống priority đã giúp phần nào. MCP integration còn khá mới nên ecosystem hỗ trợ chưa rộng.

Câu hỏi thường gặp

Nguồn: github.com/thedaviddias/Front-End-Checklist — Bài phân tích bởi danhbaai.com.