Visual QA (Kiểm định giao diện)

Skill này làm gì

Sau khi bạn dựng hoặc sửa bất kỳ giao diện nào, skill kiểm tra một cách khách quan xem nó có thực sự đúng hay không.

• Xác định loại bề mặt: web/page UI, terminal (TUI) UI, hoặc dự án clone theo một reference cụ thể — mỗi loại có luồng chụp bằng chứng riêng.
• Thu bằng chứng đầy đủ: liệt kê toàn bộ trang, tab, modal, breakpoint rồi chụp hết (40 slide là 40 ảnh, không lấy mẫu), sau đó chạy script đi kèm để lấy JSON image-diff (diffRatio, similarityScore, hotspots, alpha) hoặc tui-check (maxWidth, overflowLines, borderMisaligned, wideCharColumns).
• Hai oracle song song: hai subagent chỉ đọc chạy đồng thời — (A) kiểm tra design system thật hay chỉ là ảnh dán/hardcode và các tính năng có hoạt động, (B) kiểm tra độ trung thực pixel và độ chính xác ngắt dòng CJK (Hàn/Nhật/Trung).
• Cổng hoàn tất bắt buộc: chỉ được coi là xong khi reviewer độc lập trả PASS, không còn mục BLOCKING, trên bộ ảnh chụp mới của toàn bộ trang ở đúng bản build hiện tại.
• Kiểm tra chuyển động: chụp 3 frame (nghỉ, giữa transition, kết thúc) cho hover/focus/scroll để animation không trở thành cái cớ bỏ qua lỗi.

Phù hợp với ai

• Người thường clone website hoặc chuyển thiết kế Figma/mockup AI thành code
• Đội sản phẩm có nhiều nội dung tiếng Hàn/Nhật/Trung dễ bị ngắt dòng hoặc cắt chữ
• Lập trình viên CLI/TUI quan tâm tới viền box-drawing và ký tự rộng 2 cột
• Ai muốn chặn kiểu "agent tự khen đã xong" và bắt buộc có review độc lập

Ví dụ sử dụng

1. Clone landing page: chụp bản gốc và bản triển khai cùng viewport, chạy image-diff; similarityScore 97 nhưng hotspot ở góc phải header cho thấy sai spacing/shadow token cần sửa.
2. QA dashboard tiếng Hàn: soi từng ảnh để phát hiện tiêu đề bị ngắt kiểu 에이전트 오케스트 / 레이션, ra verdict REVISE và sửa quy tắc word-break.
3. Kiểm tra hồi quy TUI: render output pty thật qua xterm.js, lưu PNG rồi chạy tui-check --cols 80 để bắt dòng 3 tràn 2 cột và viền lệch tại cột ký tự rộng.

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.