AI 스킬마트스킬 둘러보기명령어프로그램배우기스킬이 뭐예요?
 
← 목록으로

Reticle 실행 앱 검증

실행 중인 웹 앱 내부(DOM·네트워크·콘솔·라우팅·상태)를 직접 읽어 변경사항이 실제로 동작하는지 yes/no/unknown으로 판정해 주는 스킬.

개발·코딩중급★ 1,292⑂ 240AI 점수 9/10마지막 업데이트: 2026. 10. 31.

무엇을 해주나

  • Reticle MCP 서버(@reticlehq/server)를 설치·연결하고, 개발 서버와 브라우저 탭을 열어 앱을 실제로 구동한다.
  • 스크린샷 추측 대신 DOM, 네트워크 요청, 콘솔 에러, 라우팅, 프레임워크 스토어 상태를 직접 읽어 reticle_act_and_wait 같은 호출로 "판정(verdict)"을 만든다.
  • 결과는 yes / no / unknown 세 가지뿐이며, 실패 시 기대값·관측값과 고쳐야 할 file:line을 함께 돌려준다.
  • 저장된 플로우 재생(verify change, verify flows), 셀렉터 자동 치유(heal), 계측 점수 진단(doctor) 등 비용이 낮은 경로를 우선 선택하도록 규칙화되어 있다.

이런 분께 추천

  • Claude Code 등 에이전트에게 UI 변경을 맡기는데, "테스트는 통과했는데 화면은 깨진" 상황을 반복적으로 겪는 프론트엔드 개발자.
  • 에이전트가 "다 됐습니다"라고 말할 때 근거를 요구하고 싶은 팀 리드.
  • E2E 테스트를 전부 작성하긴 부담스럽지만, 핵심 플로우 하나는 반드시 증명하고 싶은 개인 개발자.

활용 예시

  1. "Reticle 설치해줘" → npx @reticlehq/server@latest init 실행 후 에이전트를 재시작하고, 로그인 플로우 하나를 실제로 구동해 첫 판정을 받는다.
  2. 결제 버튼 수정 후 → 클릭 → POST /api/order 200 1회 + "Order confirmed" 다이얼로그 표시 + 콘솔 에러 없음을 한 번에 검증.
  3. src/App.tsx 수정 후 → reticle_verify { action: "change", files: ["src/App.tsx"] }로 해당 파일을 지나는 저장된 플로우만 재생해 회귀 여부를 저렴하게 확인.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/reticlehq/reticle/HEAD/docs/skill.md

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

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

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

직접 명령으로 설치하기

git clone https://github.com/reticlehq/reticle.git && mkdir -p ~/.claude/skills/reticle-docs && cp reticle/docs/skill.md ~/.claude/skills/reticle-docs/SKILL.md

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 열고 검증하려는 웹 앱 폴더로 이동합니다.
  2. 스킬 파일을 받습니다: git clone https://github.com/reticlehq/reticle.git
  3. mkdir -p ~/.claude/skills/reticle-docs 로 폴더를 만들고, cp reticle/docs/skill.md ~/.claude/skills/reticle-docs/SKILL.md 로 복사합니다.
  4. 앱 폴더에서 npx @reticlehq/server@latest 를 실행해 파일 변경 없이 현재 앱 상태를 먼저 점검합니다.
  5. 괜찮다면 npx @reticlehq/server@latest init 을 실행합니다. 이 단계는 설정 파일을 수정하므로 반드시 본인이 동의한 상태에서 실행하세요.
  6. Claude Code(또는 사용 중인 에이전트)를 완전히 재시작합니다. MCP 도구는 시작할 때만 로드됩니다. init 전에 떠 있던 개발 서버도 한 번 재시작합니다.
  7. 에이전트에 /reticle 또는 "로그인 플로우를 검증해줘"라고 입력해 첫 판정이 나오는지 확인합니다.
GitHub에서 원본 보기 ↗라이선스: NOASSERTION