비주얼 QA (웹·터미널 UI 검증)

무엇을 해주나

• 웹 페이지/컴포넌트와 터미널(TUI) UI 두 가지 표면을 자동으로 구분해 각기 다른 캡처 전략을 적용합니다.
• 동봉된 Node CLI(scripts/visual-qa.mjs)로 image-diff(픽셀 차이율, 유사도 점수, 핫스팟 좌표, 알파 채널 검사)와 tui-check(최대 폭, 오버플로 라인, 테두리 정렬, 전각 문자 열)을 실행해 객관적 증거 JSON을 남깁니다.
• 그 증거를 근거로 읽기 전용 서브에이전트 2개를 동시에 띄웁니다. Pass A는 "진짜 디자인 시스템인지 vs 이미지로 눌러 붙인 가짜인지", 기능 동작, 반응형, 알파 처리, 무의미한 슬롭 애니메이션을 점검하고, Pass B는 레퍼런스와의 픽셀 대조 및 한국어/일본어/중국어 줄바꿈·클리핑 정밀 검사를 담당합니다.
• 두 결과를 하나의 표 형식 판정 리포트로 합치고, "모든 페이지를 새로 캡처한 상태에서 독립 리뷰어가 BLOCKING 없이 PASS"할 때까지 루프를 강제합니다.
• 사이트 클론·Figma → 코드 같은 작업에는 픽셀 대조 오라클 + 코드 레벨 디자인 시스템 오라클을 추가로 요구하는 레퍼런스 충실도 모드가 따로 있습니다.

이런 분께 추천

• 프런트엔드/디자인 시스템 개발자, 목업을 픽셀 단위로 재현해야 하는 클론·리뉴얼 프로젝트 담당자.
• 한글·일본어·중국어 UI에서 조사만 다음 줄로 떨어지거나 글자가 잘리는 문제를 반복적으로 겪는 팀.
• CLI/TUI 앱을 만들며 박스 문자 정렬과 전각 문자 폭 깨짐을 검증해야 하는 개발자.
• 에이전트가 "다 됐습니다"라고 자체 승인하는 것을 막고 싶은 사람.

활용 예시

1. 랜딩 페이지를 Figma 시안대로 구현한 뒤: 시안 PNG와 동일 뷰포트 실제 스크린샷을 찍어 image-diff를 돌리고, 핫스팟이 헤더 우측에 몰린 원인을 두 리뷰어가 각각 코드·픽셀 관점에서 지적하게 합니다.
2. 40장짜리 슬라이드 덱/다중 라우트 앱: 5장만 샘플링하지 않고 전 페이지를 열거해 캡처하고, 리뷰어에게 페이지 수를 알려 누락 여부까지 확인시킵니다.
3. Node 기반 TUI 대시보드: 실제 pty → xterm.js 렌더 → PNG 캡처 후 tui-check --cols 80으로 3번째 줄이 2칸 넘치고 전각 문자 12~13열에서 테두리가 깨진 것을 찾아 수정합니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/HEAD/packages/shared-skills/skills/visual-qa/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 code-yeongyu/oh-my-openagent 의 packages/shared-skills/skills/visual-qa 폴더를 내 ~/.claude/skills/visual-qa/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.