Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Kiểm định chất lượng web toàn diện

Skill chạy audit web dựa trên bằng chứng đo thực tế: hiệu năng, khả năng truy cập, SEO, best practices và agentic browsing, kèm báo cáo có thứ tự ưu tiên.

Web · APITrung cấp★ 2,788⑂ 246Điểm AI 9/10Cập nhật lần cuối: 24 thg 8, 2026

Skill này làm gì

  • Bắt buộc xác định phạm vi audit trước (URL tiêu biểu, luồng người dùng, mobile/desktop, trang công khai hay cần đăng nhập), rồi thu số đo thực từ trình duyệt trước khi đọc mã nguồn.
  • Cung cấp bảng định tuyến công cụ: ưu tiên Chrome DevTools MCP (performance_start_trace, performance_analyze_insight, lighthouse_audit, take_snapshot), dự phòng bằng Lighthouse CLI / PageSpeed Insights.
  • Chuẩn hóa tiêu chí: Core Web Vitals (LCP < 2.5s, INP < 200ms, CLS < 0.1), WCAG AA (tương phản 4.5:1, bàn phím, ARIA), SEO kỹ thuật, bảo mật (HTTPS, CSP, thư viện lỗi), và agentic browsing (accessibility tree, WebMCP, llms.txt).
  • Phân loại mức độ Critical/High/Medium/Low và xuất báo cáo theo mẫu: bảng bằng chứng → vấn đề kèm đường dẫn file → thứ tự ưu tiên → phần xác minh lại.
  • Cập nhật theo Lighthouse 13+ (Performance Insights) và nhấn mạnh: điểm tổng không phải bằng chứng chất lượng.

Phù hợp với ai

  • Lập trình viên frontend/full-stack muốn có cổng kiểm tra chất lượng trước khi deploy.
  • Agency, freelancer cần báo cáo hiệu năng và accessibility gửi khách hàng.
  • Tech lead, QA phụ trách theo dõi Core Web Vitals và SEO kỹ thuật định kỳ.

Ví dụ sử dụng

  1. Nói "audit website của tôi" → skill chạy trace + Lighthouse, lập bảng bằng chứng LCP/INP/CLS và điểm accessibility kèm nguồn dữ liệu.
  2. Trước khi deploy: kiểm nhanh console errors, HTTPS, meta tags, lỗi accessibility; chỉ báo cáo mục chưa đạt kèm vị trí file.
  3. Trang bán hàng có INP kém: khoanh vùng lỗi lúc runtime trước, chỉ soi bundle JS và long task liên quan, đề xuất sửa rồi đo lại cùng điều kiện.

· · · 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/web-quality-audit/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)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. 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/web-quality-audit từ repo GitHub addyosmani/web-quality-skills vào ~/.claude/skills/web-quality-audit/ 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 /tmp/web-quality-skills && cp -r /tmp/web-quality-skills/skills/* ~/.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.

  1. Mở Terminal.
  2. Tải repo: git clone https://github.com/addyosmani/web-quality-skills.git
  3. Tạo thư mục skills nếu chưa có: mkdir -p ~/.claude/skills
  4. Vì skill tham chiếu các skill khác qua đường dẫn tương đối, hãy copy toàn bộ thư mục skills: cp -r web-quality-skills/skills/* ~/.claude/skills/
  5. (Khuyến nghị) Kết nối Chrome DevTools MCP, hoặc cài Lighthouse CLI: npm i -g lighthouse.
  6. Khởi động lại Claude Code và thử: "review web quality cho site của tôi" hoặc "chạy lighthouse audit".
  7. Xử lý các mục Critical/High trước, sau đó đo lại trong cùng điều kiện để xác minh.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT