프론트엔드 시각 QA

무엇을 해주나

• 구현이 끝난 화면을 실제 사용자가 보는 픽셀 기준으로 감사합니다. 빌드 성공, DOM 존재, 열어보지 않은 스크린샷 파일은 시각적 증거로 인정하지 않습니다.
• 감사 범위를 계약서 형태로 먼저 정의합니다: 대상 URL/파일/네이티브 앱 식별자, 사용자 역할, 조건 상태(로그아웃·빈 상태·권한 없음 등), 뷰포트 매트릭스, 참조 디자인 SSOT, 수정 권한.
• 증거 등급(A: 실제 브라우저/네이티브 창, B: DevTools·E2E, C: 헤드리스 자동 스윕, D: 소스 추론)을 구분해 낮은 등급 증거로 강한 결론을 내리지 못하게 막습니다.
• 동봉된 scripts/visual_layout_audit.mjs(Playwright)로 오버플로·줄바꿈·이미지 로딩·반응형 문제를 기계적으로 훑고, scripts/silent_degradation_probe.mjs로 폰트 미배포·클래스 이름 불일치 같은 "조용한 붕괴"를 탐지합니다.
• 다운로드/공유/클립보드/파일 다이얼로그/인쇄·PDF/네이티브 셸까지 여정 단위로 실제 클릭해 동작을 확인하고, 심각도(Blocker·Major·Moderate·Minor)와 근거 크롭이 포함된 표준 보고서를 출력합니다.

이런 분께 추천

• 웹 앱·랜딩페이지·HTML 슬라이드·관리자 대시보드를 만들고 릴리스 전 시각 결함을 잡아야 하는 프론트엔드 개발자
• "코드는 맞는데 화면이 싸구려처럼 보인다"는 문제를 근거 있게 규명하고 싶은 팀
• Electron/하이브리드 데스크톱 앱의 셸·권한·파일 다이얼로그 UI를 검증해야 하는 개발자
• QA 보고서를 일관된 형식(검증됨/부분/차단)으로 남기고 싶은 리드

활용 예시

1. "로컬 5173 포트의 대시보드를 데스크톱·태블릿·모바일에서 감사해줘" → 상태 마커로 픽스처 상태를 확인하고 스윕 실행, 스크린샷을 실제로 열어 확인한 뒤 결함 목록 제출.
2. "deck.html 슬라이드가 1920x1080 프로젝션에서 글자가 잘리는지 봐줘" → --file deck.html --page-type deck --viewport 1920x1080으로 캡처 후 잘림을 DOM 기하와 대조.
3. "PDF 내보내기 버튼이 정말 동작하는지 확인해줘" → 실제 브라우저에서 클릭해 인쇄 프리뷰가 빈 페이지가 아닌지까지 확인하고, 확인 못 한 부분은 '미검증'으로 명시.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/daymade/claude-code-skills/HEAD/frontend-visual-qa/SKILL.md

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

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