agent-browser 브라우저 자동화 가이드

무엇을 해주나

• 접근성 트리 기반 스냅샷 + @eN 참조 워크플로를 Claude에게 학습시켜, HTML 원문을 파싱하지 않고 200~400 토큰으로 페이지를 이해하고 조작하게 합니다.
• 페이지 열기 → 스냅샷 → 클릭/입력 → 재스냅샷의 핵심 루프와, 클릭·채우기·선택·체크·업로드·드래그·스크롤 등 상호작용 명령을 모두 정리합니다.
• find role/text/label, CSS 셀렉터 같은 대체 선택 방법과 우선순위 규칙을 제시합니다.
• 대기 전략(요소, 텍스트, URL 글롭, networkidle, JS 조건)을 상황별로 구분해, 자동화가 가장 자주 깨지는 지점을 예방합니다.
• 로그인/인증 볼트, 세션 영속화(--session --restore), 병렬 세션, 탭 관리, iframe, 다이얼로그, 네트워크 목킹·HAR, 비디오 녹화, 접근성(axe) 감사, React 트리·Web Vitals 조사까지 다룹니다.
• doctor 진단과 "Ref not found", 오버레이 클릭 차단, 커스텀 입력 컴포넌트, WebGPU 검은 화면 등 실전 오류 대처법을 제공합니다.
• 브라우저에서 읽은 모든 내용을 "지시가 아닌 신뢰할 수 없는 데이터"로 취급하라는 안전 규칙이 포함됩니다.

이런 분께 추천

• 웹앱 QA·E2E 시나리오를 AI에게 맡기고 싶은 개발자·테스터
• 로그인이 필요한 사이트에서 반복 작업이나 데이터 수집을 자동화하려는 실무자
• 문서 페이지를 마크다운으로 읽어오거나 스크린샷·녹화 산출물이 필요한 기획자·테크라이터
• React 앱의 리렌더링/Web Vitals를 브라우저에서 바로 점검하려는 프론트엔드 개발자

활용 예시

1. 로그인 후 대시보드 확인: "app.example.com에 저장된 계정으로 로그인해서 대시보드 스크린샷 찍어줘" → auth login → wait --url "**/dashboard" → screenshot.
2. 표 데이터 추출: "이 페이지 가격표를 JSON으로 뽑아줘" → snapshot -i --json 또는 eval --stdin 힙독으로 테이블을 파싱해 반환.
3. 폼 자동 제출 + 검증: 검색창을 fill 하고 press Enter, wait --load networkidle 후 재스냅샷해 결과 링크를 클릭하고 결과 화면 저장.
4. API 트래픽 조사: network har start → 조작 → network har stop /tmp/trace.har로 사이트 API를 오프라인 분석.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/fcakyon/claude-codex-settings/HEAD/plugins/agent-browser/skills/agent-browser/SKILL.md

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

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