Visual QA (kiểm định UI web & terminal)

Sau khi dựng hoặc sửa UI, skill này chụp bằng chứng, so sánh pixel/độ rộng cột rồi chạy song song hai reviewer chỉ-đọc để đưa ra kết luận đạt/không đạt.

Thiết kế · UINâng cao★ 67,531⑂ 5,507Điểm AI 9/10Cập nhật lần cuối: 9 thg 8, 2026

Skill này làm gì

Nhận diện loại bề mặt cần kiểm tra: UI web/trang (chụp screenshot) hay UI terminal/TUI (chụp bản render terminal), hoặc cả hai.
Dùng CLI Node kèm theo (scripts/visual-qa.mjs): image-diff cho tỉ lệ khác biệt, điểm tương đồng 0–100, danh sách hotspot theo lưới và kiểm tra kênh alpha; tui-check cho maxWidth, dòng tràn, lệch khung box-drawing, cột ký tự rộng (CJK).
Bắt buộc gửi hai subagent chỉ-đọc chạy song song: Pass A soi "design system thật hay chỉ là ảnh dán/mock", tính năng có chạy, responsive, alpha, animation vô nghĩa; Pass B so pixel với bản tham chiếu và kiểm tra cực kỹ việc ngắt dòng/cắt chữ tiếng Hàn–Nhật–Trung.
Tổng hợp thành một báo cáo dạng bảng theo từng tiêu chí, kèm cổng hoàn thành: chỉ "xong" khi reviewer độc lập PASS không còn mục BLOCKING trên bộ ảnh mới chụp của tất cả trang.
Có chế độ riêng cho nhiệm vụ clone site / Figma-to-code: phải qua cả oracle so pixel và oracle rà soát code design-system.

Phù hợp với ai

Lập trình viên frontend, người xây design system, đội làm dự án clone/redesign cần khớp mockup từng pixel.
Nhóm làm sản phẩm có tiếng Hàn/Nhật/Trung, thường gặp lỗi ngắt dòng xấu hoặc chữ bị cắt chân.
Người viết ứng dụng CLI/TUI cần kiểm tra khung viền và độ rộng ký tự CJK.
Ai muốn chặn việc agent tự chấm điểm rồi tuyên bố "đã hoàn thành".

Ví dụ sử dụng

Dựng trang landing theo file Figma: chụp reference và ảnh thực tế cùng viewport, chạy image-diff, rồi để hai reviewer giải thích nguyên nhân hotspot lệch ở vùng header.
Deck 40 slide hoặc app nhiều route: liệt kê đầy đủ số trang, chụp hết chứ không lấy mẫu, và nói rõ số trang cho reviewer để chắc chắn không bỏ sót.
Dashboard TUI: render qua pty thật rồi xterm.js, chạy tui-check --cols 80 để phát hiện dòng 3 tràn 2 cột và viền lệch tại cột ký tự rộng 12–13.

· · · 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/code-yeongyu/oh-my-openagent/HEAD/packages/shared-skills/skills/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 packages/shared-skills/skills/visual-qa từ repo GitHub code-yeongyu/oh-my-openagent vào ~/.claude/skills/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/code-yeongyu/oh-my-openagent.git && mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/shared-skills/skills/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, chuyển tới thư mục làm việc tạm.
Clone repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
Tạo thư mục skills: mkdir -p ~/.claude/skills
Copy skill: cp -r oh-my-openagent/packages/shared-skills/skills/visual-qa ~/.claude/skills/
Kiểm tra bằng ls ~/.claude/skills/visual-qa (phải thấy SKILL.md và scripts/visual-qa.mjs).
Đảm bảo đã có Node.js (node -v) vì script chạy bằng Node.
Nếu chưa có công cụ chụp web: npm install -g agent-browser && agent-browser install, hoặc dùng Playwright có sẵn trong dự án.
Khởi động lại Claude Code và yêu cầu ví dụ: "kiểm tra visual QA trang này".
Lưu ý: phần chụp TUI dùng script riêng của repo gốc; ở dự án khác bạn cần tự dựng chuỗi "pty thật → xterm.js → PNG" hoặc chỉ dùng tui-check với bản text.

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