프론트엔드 비주얼 QA

무엇을 해주나

• 빌드 성공이나 DOM 존재만으로 "괜찮다"고 넘기지 않고, 사용자가 실제로 보는 화면을 기준으로 검수합니다.
• 증거 등급 체계(A: 실제 브라우저/네이티브 창 → D: 소스·빌드 추론)를 강제해, 열어보지도 않은 스크린샷 파일을 근거로 삼는 것을 막습니다.
• 번들된 visual_layout_audit.mjs(Playwright)로 뷰포트별 오버플로·줄바꿈·이미지 상태를 자동 스윕하고, silent_degradation_probe.mjs로 "폰트가 선언만 되고 배포되지 않음", "라이브러리 클래스명 변경으로 CSS 규칙이 전부 무효" 같은 조용한 결함을 탐지합니다.
• 로그인 상태, 빈 상태, 권한 없는 역할, 피처 플래그 분기 등 어떤 상태의 픽셀인지를 먼저 확정한 뒤 판정합니다.
• 기본은 감사 전용(audit-only). 명시적 허가 없이는 코드 수정·의존성 설치·재배포를 하지 않습니다.
• 결함마다 심각도(Blocker/Major/Moderate/Minor), 범주, 재현 방법, 잘라낸 스크린샷 증거를 붙여 보고합니다.

이런 분께 추천

• UI 구현을 마친 뒤 릴리스 전에 실제 화면 품질을 점검하고 싶은 프론트엔드 개발자.
• "내 화면에서는 잘 보였는데" 류의 반응형·모바일 깨짐 이슈에 반복적으로 시달리는 팀.
• 대시보드·관리자 콘솔, 랜딩 페이지, HTML 슬라이드 덱, 지도/차트 화면, Electron 앱을 다루는 분.
• AI가 "확인했습니다"라고만 말하고 실제 증거가 없는 상황을 없애고 싶은 리드/리뷰어.

활용 예시

1. 반응형 깨짐 확인: "로컬 5173 대시보드를 375·768·1440 폭에서 검수해줘. 카드 제목 줄바꿈과 하단 섹션 잘림 위주로." → 뷰포트별 스크린샷을 캡처·열람하고 DOM 기하로 클리핑을 검증한 뒤 잘라낸 증거와 함께 결함 목록을 제출합니다.
2. PDF/다운로드 출력 검증: "보고서 내보내기 버튼이 동작하는지 확인해줘." → 실제 브라우저에서 클릭해 인쇄 미리보기와 내려받은 파일을 열어보고, 빈 페이지·about:blank 같은 결함을 Major로 보고합니다.
3. 디자인 레퍼런스 비교: "참고 스크린샷과 현재 랜딩 페이지를 같은 배율로 비교해줘." → 동일 컴포넌트·동일 폭으로 크롭해 나란히 비교하고, CSS px 기준 치수 차이를 정리합니다.

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