에이전트가 브라우저로 제품을 직접 사용하여 문제를 발견하고 개선까지 자율 완주한다. "/use", "써봐", "직접 써봐", "QA 해봐", "사용해봐", "테스트해봐", "돌려봐", "확인해봐" 등 실사용 테스트 의도가 보이면 사용. 특정 라우트를 인자로 받을 수 있다 (예: "/use /chat", "/use /viewer"). 에이전트끼리 논의하며 개선점을 찾으라는 요청에도 사용.
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
에이전트가 브라우저로 제품을 직접 사용하여 문제를 발견하고 개선까지 자율 완주한다. "/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를 요청.
