Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

Kiểm thử trực quan Frontend

Kiểm định UI đã render (web, dashboard, slide HTML, Electron) bằng trình duyệt thật, ảnh chụp được kiểm tra và quét Playwright để tìm lỗi layout, responsive, trạng thái và đầu ra.

Lập trìnhNâng cao★ 1,323⑂ 212Điểm AI 9/10Cập nhật lần cuối: 8 thg 8, 2026

Nó làm được gì

  • Không coi "build thành công" hay "DOM có phần tử" là bằng chứng; chỉ đánh giá những gì người dùng thực sự thấy.
  • Áp dụng thang bằng chứng A–D (A: cửa sổ trình duyệt/ứng dụng thật → D: suy luận từ source) và cấm nâng cấp bằng chứng yếu thành kết luận mạnh.
  • Có sẵn visual_layout_audit.mjs (Playwright) để quét overflow, ngắt dòng, ảnh lỗi theo nhiều viewport, và silent_degradation_probe.mjs để phát hiện lỗi "âm thầm" như font khai báo nhưng không được ship, hay class thư viện đổi tên làm cả nhóm CSS vô hiệu.
  • Bắt buộc xác định đúng trạng thái (đăng xuất, rỗng, thiếu quyền, feature flag) trước khi phán xét pixel.
  • Mặc định chỉ kiểm định (audit-only): không sửa code, không cài dependency, không deploy nếu bạn không cho phép rõ ràng.
  • Báo cáo theo mức độ (Blocker/Major/Moderate/Minor) kèm ảnh crop, cách tái hiện và danh sách phần chưa xác minh.

Phù hợp với ai

  • Lập trình viên frontend cần rà soát chất lượng hiển thị trước khi release.
  • Nhóm thường gặp lỗi "máy tôi nhìn ổn mà" ở mobile/responsive.
  • Người làm dashboard/admin, landing page, slide HTML, bản đồ, biểu đồ, ứng dụng Electron.
  • Tech lead muốn chấm dứt tình trạng AI báo "đã kiểm tra" nhưng không có bằng chứng hình ảnh.

Ví dụ sử dụng

  1. Rà lỗi responsive: "Kiểm tra dashboard ở localhost:5173 tại 375, 768, 1440px, tập trung vào ngắt dòng tiêu đề card và phần bị cắt dưới trang." → chụp và mở từng ảnh, đối chiếu hình học DOM, trả về danh sách lỗi kèm ảnh crop.
  2. Kiểm tra xuất PDF/tải file: "Xem nút Export báo cáo có hoạt động thật không." → bấm trong trình duyệt thật, mở preview in và file đã tải, báo lỗi trang trắng hoặc about:blank ở mức Major.
  3. So sánh với thiết kế tham chiếu: "So landing page hiện tại với ảnh thiết kế." → crop cùng một component ở cùng chiều rộng, nêu chênh lệch tính theo CSS px chứ không phải device px.

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

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 frontend-visual-qa từ repo GitHub daymade/claude-code-skills vào ~/.claude/skills/frontend-visual-qa/ 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/daymade/claude-code-skills.git /tmp/claude-code-skills && mkdir -p ~/.claude/skills && cp -r /tmp/claude-code-skills/frontend-visual-qa ~/.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 về thư mục tạm: git clone https://github.com/daymade/claude-code-skills.git /tmp/claude-code-skills
  3. Tạo thư mục skill cá nhân: mkdir -p ~/.claude/skills
  4. Sao chép đúng skill này: cp -r /tmp/claude-code-skills/frontend-visual-qa ~/.claude/skills/
  5. Kiểm tra đã có SKILL.md, thư mục scripts/ và references/ trong ~/.claude/skills/frontend-visual-qa/.
  6. Muốn dùng phần quét tự động (Level C), hãy cài Playwright trong chính dự án cần kiểm: npm i -D @playwright/test && npx playwright install chromium
  7. Khởi động lại Claude Code, rồi yêu cầu kiểu: "Hãy visual QA trang này giúp tôi".
  8. Ban đầu nên để chế độ chỉ kiểm định; khi cần sửa hãy nói rõ "fix-and-verify".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT