Kiểm định trực quan Frontend

Kỹ năng QA trực quan: soi UI đã render (web, landing page, dashboard, Electron) bằng bằng chứng trình duyệt thật rồi xuất báo cáo lỗi có ảnh minh chứng.

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

Kỹ năng này làm gì

Kiểm định giao diện theo đúng những gì người dùng thật nhìn thấy; build thành công, DOM tồn tại hay ảnh chụp chưa mở đều không được coi là bằng chứng trực quan.
Trước khi soi pixel, viết một "hợp đồng kiểm định": URL/đường dẫn/định danh app, vai trò người dùng, trạng thái điều kiện (đăng xuất, rỗng, thiếu quyền...), ma trận viewport, tham chiếu design system, quyền được sửa hay chỉ đọc.
Phân bốn cấp bằng chứng (A: trình duyệt/app thật, B: DevTools hoặc E2E, C: quét headless tự động, D: đọc code) và cấm dùng bằng chứng cấp thấp để kết luận mạnh.
Có script kèm theo: scripts/visual_layout_audit.mjs (Playwright) quét tràn chữ, ngắt dòng, ảnh lỗi, responsive; scripts/silent_degradation_probe.mjs phát hiện font không được ship, class CSS đổi tên khiến rule vô hiệu.
Thử thật các hành trình: tải file, chia sẻ, clipboard, hộp thoại chọn file, in/PDF, vỏ Electron; rồi báo cáo theo mức Blocker/Major/Moderate/Minor kèm ảnh crop.

Phù hợp với ai

Lập trình viên frontend cần rà lỗi hiển thị trước khi phát hành web app, landing page, slide HTML, trang admin.
Nhóm gặp tình huống "code đúng mà trang trông rẻ tiền" và cần bằng chứng cụ thể.
Người phát triển app desktop Electron/hybrid cần kiểm tra vỏ ứng dụng, quyền, hộp thoại file.
Trưởng nhóm muốn báo cáo QA thống nhất (verified / partial / blocked).

Ví dụ sử dụng

"Kiểm tra dashboard ở localhost:5173 trên desktop, tablet, mobile" → xác nhận trạng thái bằng marker, chạy sweep, mở từng ảnh để xem rồi liệt kê lỗi.
"Slide deck.html có bị cắt chữ ở 1920x1080 không?" → chạy --file deck.html --page-type deck --viewport 1920x1080 và đối chiếu hình học DOM.
"Nút xuất PDF có thật sự hoạt động?" → click trong trình duyệt thật, kiểm tra bản in không phải trang trắng, phần nào chưa kiểm được thì ghi rõ là chưa xác minh.

· · · 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/daymade/claude-code-skills/HEAD/frontend-visual-qa/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 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 && mkdir -p ~/.claude/skills && cp -r 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.

Mở terminal.
Tải repo: git clone https://github.com/daymade/claude-code-skills.git
Tạo thư mục skills: mkdir -p ~/.claude/skills
Copy kỹ năng: cp -r claude-code-skills/frontend-visual-qa ~/.claude/skills/
(Khuyến nghị) Kiểm tra dự án cần audit đã có Playwright. Nếu chưa, phần quét tự động cấp C sẽ bị bỏ qua, chỉ dùng bằng chứng A/B.
Khởi động lại Claude Code, sau đó yêu cầu kiểu "hãy QA trực quan trang này".
Chạy script từ trong thư mục dự án được audit: node ~/.claude/skills/frontend-visual-qa/scripts/visual_layout_audit.mjs --help

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