에이전트가 브라우저로 제품을 직접 사용하여 문제를 발견하고 개선까지 자율 완주한다. "/use", "써봐", "직접 써봐", "QA 해봐", "사용해봐", "테스트해봐", "돌려봐", "확인해봐" 등 실사용 테스트 의도가 보이면 사용. 특정 라우트를 인자로 받을 수 있다 (예: "/use /chat", "/use /viewer"). 에이전트끼리 논의하며 개선점을 찾으라는 요청에도 사용.
Installation
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
에이전트가 브라우저로 제품을 직접 사용하여 문제를 발견하고 개선까지 자율 완주한다. "/use", "써봐", "직접 써봐", "QA 해봐", "사용해봐", "테스트해봐", "돌려봐", "확인해봐" 등 실사용 테스트 의도가 보이면 사용. 특정 라우트를 인자로 받을 수 있다 (예: "/use /chat", "/use /viewer"). 에이전트끼리 논의하며 개선점을 찾으라는 요청에도 사용.
왜 이 스킬이 필요한가
개발자는 코드 안에서 바깥을 본다 — "이 함수가 맞나?". 이 스킬은 바깥에서 안을 본다 — "사용자가 이걸 쓰면 어떤 경험인가?". 코드의 존재 ≠ 코드의 작동. @media (max-width: 768px)가 있어도 container 안에서 안 먹을 수 있다. 써봐야 나온다.
핵심 원리
관점 전환: 만드는 사람 → 쓰는 사람
삼각 검증: 브라우저 관찰 → 코드 조사 → 재분류 (오진 허용)
소비자 우회 = 인프라 TODO: 우회 코드가 있으면 OS에 빠진 기능
인자
인자
기본값
예시
URL/라우트
http://localhost:5173/
/chat, /viewer, /ui
페르소나
처음 접한 사용자
"관리자", "개발자", "디자이너"
깊이
surface (UI만)
deep — OS 아키텍트 에이전트 추가
실행 흐름
Step 1: 브라우저 탐색 (GIF 녹화)
↓
Step 2: 관찰 수집 + 코드 검증 → 재분류
↓
Step 3: /discuss — 진짜 문제 구조화
↓
Step 4 (deep만): OS 아키텍트 분석
↓
Step 5: /prd → /go 자율 완주
Step 1: 브라우저 탐색
mcp__claude-in-chrome__tabs_context_mcp로 브라우저 상태 확인
새 탭 생성 → 대상 URL로 이동
GIF 녹화 시작
페르소나 기반 시나리오 실행:
페르소나
탐색 항목
처음 접한 사용자
첫 화면 인상, 네비게이션 경로, 주요 CTA 클릭, 빈 상태
관리자
CRUD 작업, 편집 흐름, 프리뷰, 저장/취소
개발자
키보드 내비게이션, 접근성, 콘솔 에러, 반응형
각 시나리오에서:
스크린샷 촬영
클릭/키보드/스크롤 인터랙션
뷰포트 전환 (모바일/태블릿/데스크톱)
프리뷰/풀스크린 모드
에지 케이스 (빈 데이터, 긴 텍스트, 빠른 조작)
GIF 녹화 종료 + 다운로드
Step 2: 관찰 수집 + 코드 검증
브라우저에서 발견한 것을 오진 허용 목록으로 정리:
| # | 관찰 | 판정 | 근거 |
|---|------|------|------|
| 1 | 모바일에서 카드 잘림 | ⚠️ 확인 필요 | — |
| 2 | 인라인 편집 불가 | ? | 의도된 설계일 수 있음 |
그 다음 코드 조사 에이전트 디스패치:
관찰된 현상의 관련 코드 읽기
의도된 설계인지 vs 실제 버그인지 판정
기존 memory/feedback과 대조
관찰을 재분류:
✅ 의도된 설계 → 제외
⚠️ 진짜 문제 → /discuss로
📋 콘텐츠 문제 → 별도 추적
Step 3: /discuss
재분류된 진짜 문제들로 /discuss 호출. 12요소 이해도 테이블을 채워 구조화.
Step 4: OS 아키텍트 분석 (deep 모드)
deep 인자가 있을 때만 실행. 2개 에이전트를 병렬 디스패치:
에이전트 A — 소비자 우회 패턴 탐색:
대상 페이지의 코드에서 OS를 우회하는 패턴 찾기
addEventListener, querySelector, useState 직접 사용
하드코딩된 키맵, 인라인 스타일
반복되는 같은 로직
에이전트 B — OS 아키텍트 갭 분석:
현재 axis/plugin/pattern/ui 목록 파악
빠진 것 식별 (axis, plugin, pattern, ui 각각)
두 에이전트의 결과를 합성하여 OS core 개선 후보 도출.
Step 5: /prd → /go
discuss 결과로 /prd 작성 → /go 자율 실행. 일반적인 파이프라인.
탐색 체크리스트
매 탐색마다 아래 항목을 순회한다. 해당 없으면 스킵.
첫 화면 로드 — 빈 상태, 로딩, 에러
주요 CTA/버튼 클릭
키보드 내비게이션 (Tab, Arrow, Enter, Escape, F2)
CRUD (추가, 편집, 삭제, 복제, 순서 변경)
뷰포트 전환 (모바일 375px, 태블릿 768px, 데스크톱)
프리뷰/프레젠테이션 모드
빈 데이터 상태
콘솔 에러 확인
undo/redo (Cmd+Z / Cmd+Shift+Z)
주의
브라우저 도구가 없으면 이 스킬을 사용할 수 없다. mcp__claude-in-chrome__* 도구 필요.
제품이 localhost에서 실행 중이어야 한다. 실행 중이 아니면 사용자에게 pnpm dev를 요청.
