깨진 UI 디버깅 (Reticle)

무엇을 해주나

• 버튼이 먹지 않음, 폼 제출 실패, 데이터 로딩 안 됨, 빈 화면, 모달이 닫히지 않음 같은 "코드는 멀쩡한데 안 되는" 증상을 실행 중인 브라우저 안에서 진단합니다.
• Reticle MCP 도구로 클릭 한 번의 인과 구간(네트워크 요청, 콘솔 에러, 상태 스토어 before→after diff, 스토리지 변화, 라우트, 레이아웃 시프트)을 한 번에 읽습니다.
• "요청이 아예 안 나감 = 핸들러 미바인딩", "2xx인데 변화 없음 = 응답을 읽지 않음", "보이는데 클릭 안 됨 = occluded/0×0/disabled" 같은 증상→원인→다음 행동 진단 표를 제공합니다.
• 추측이 아니라 source: { file, line } 로 조사를 끝내고, 수정 후에는 눈으로 확인하지 말고 재현 시나리오를 판정(verdict)으로 다시 돌리게 합니다.

이런 분께 추천

• React/Vue 등 SPA를 다루며 "로컬에서만 안 되는" 버그에 시간을 많이 쓰는 프론트엔드 개발자
• QA 리포트의 "그냥 안 돼요"를 재현 가능한 증거로 바꿔야 하는 팀
• Claude Code에 브라우저 제어 MCP(Reticle)를 붙여 에이전트가 직접 디버깅하도록 만들고 싶은 분

활용 예시

1. 저장 버튼이 아무 반응 없음 → reticle_act_and_wait로 클릭을 재현하고 summary의 net.total = 0을 확인, reticle_look { element }로 해당 버튼의 file:line을 받아 핸들러 바인딩 누락을 찾습니다.
2. 목록이 갱신되지 않음 → 요청은 200인데 stateDiffs가 비어 있고 verdict가 outcome_unread → 성공 콜백에서 응답을 반영하지 않는 버그로 특정합니다.
3. 로그인한 것처럼 보이는데 로그아웃 동작 → reticle_storage로 토큰이 실제로 저장되지 않았음을 확인합니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/reticlehq/reticle/HEAD/skills/debug-broken-ui/SKILL.md

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

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