깨진 UI 디버깅 (Reticle)

무엇을 해주나

• 실행 중인 웹 앱 내부에서 클릭 이벤트, 네트워크 요청, 상태 스토어, 로컬스토리지, 콘솔 로그를 하나의 인과 구간으로 함께 읽습니다.
• 먼저 재현(reticle_act_and_wait)으로 판정(no/contradicted/unknown)을 뽑고, 결과 요약(net·consoleErrors·stateDiffs·storageDiffs·route)에서 이미 드러난 단서만 더 깊게 파고들도록 호출 낭비를 줄여줍니다.
• "요청이 아예 안 나감 → 핸들러 미바인딩/캐시", "2xx인데 화면 그대로 → 성공 경로 버그", "클릭 무반응 → 요소가 가려짐/0×0/disabled" 같은 증상-원인-다음 조치 진단 표를 제공합니다.
• 마지막에 reticle_inspect로 해당 요소의 컴포넌트와 source: {file, line}을 반환해, 가설이 아니라 열어야 할 위치로 조사를 끝냅니다.
• 수정 후에는 눈으로 확인하는 대신 재현 시나리오를 판정 형태로 재실행하도록 강제합니다.

이런 분께 추천

• React/Vue 등 SPA를 만들며 "내 로컬에선 되는데" 류의 재현 어려운 버그를 자주 만나는 프론트엔드 개발자
• 스크린샷으로는 보이지 않는 UI-상태 불일치, 토큰 미저장, 가상 리스트 미마운트 문제를 자주 겪는 팀
• QA 리포트만 보고 원인 파일을 빠르게 특정해야 하는 개발자

활용 예시

1. "저장 버튼을 눌러도 아무 일이 없어요" → 클릭 재현 후 네트워크 요청이 0건임을 확인하고, inspect로 버튼이 투명 오버레이에 가려져 있음을 찾아 해당 컴포넌트 파일:줄 제시.
2. "목록이 갱신되지 않아요" → 요청은 200, DOM도 정상인데 stateDiffs가 비어 있어 스토어가 응답을 반영하지 않은 성공 경로 버그로 특정.
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/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.