Kiểm tra Best Practices Web

Skill rà soát và sửa lỗi bảo mật, tương thích trình duyệt và chất lượng mã của web app theo tiêu chuẩn Lighthouse.

Lập trìnhTrung cấp★ 2,856⑂ 250Điểm AI 9/10Cập nhật lần cuối: 24 thg 8, 2026

Skill này làm gì

Chạy kiểm tra Lighthouse Best Practices trên trang thật (qua Chrome DevTools MCP lighthouse_audit hoặc Lighthouse CLI).
Áp dụng checklist bảo mật: HTTPS/HSTS, CSP & Trusted Types, SRI, security headers, lỗ hổng dependency, xử lý XSS sink.
Kiểm tra tương thích: doctype, charset, viewport, feature detection, chiến lược polyfill, loại bỏ API lỗi thời (document.write, XHR đồng bộ...).
Cải thiện chất lượng mã: xử lý lỗi console, React Error Boundary, dọn event listener bằng AbortController, tránh lộ source map, HTML semantic.
Tổng hợp kết quả theo 4 nhóm checklist: Bảo mật, Tương thích, Chất lượng mã, UX.

Phù hợp với ai

Lập trình viên front-end và người vận hành website
Nhóm muốn chuẩn hóa quy trình kiểm tra trước khi deploy
Người có điểm Lighthouse thấp nhưng không biết sửa từ đâu

Ví dụ sử dụng

"Áp dụng best practices cho trang này" → chạy audit rồi đề xuất sửa từng lỗi.
"Audit bảo mật" → kiểm tra CSP, headers, npm audit, source map bị lộ và báo cáo.
"Hiện đại hóa code cũ" → thay document.write, XHR đồng bộ, phân nhánh theo userAgent bằng API hiện đại.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/addyosmani/web-quality-skills/HEAD/skills/best-practices/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)

Tải tệp ZIP bằng nút bên dưới.
Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.

↓ Tải ZIP

Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục skills/best-practices từ repo GitHub addyosmani/web-quality-skills vào ~/.claude/skills/best-practices/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/addyosmani/web-quality-skills.git && mkdir -p ~/.claude/skills && cp -r web-quality-skills/skills/best-practices ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

Mở Terminal.
Tải repo: git clone https://github.com/addyosmani/web-quality-skills.git
Tạo thư mục skill: mkdir -p ~/.claude/skills
Sao chép skill: cp -r web-quality-skills/skills/best-practices ~/.claude/skills/
Kiểm tra các file phụ như references/SECURITY.md đã được copy.
Khởi động lại Claude Code và yêu cầu "apply best practices" hoặc "security audit".
(Tùy chọn) Cài Chrome DevTools MCP hoặc npm i -g lighthouse để chạy audit trực tiếp.

Xem mã nguồn trên GitHub ↗Giấy phép: MIT