browser-act skills

Name: browser-act skills (Claude Skill)
Author: browser-act

왜 쓰나요

핵심 기능

스키마 기반 추출 — JSON Schema를 전달하면 일치하는 데이터를 얻음
스크린샷-LLM 루프보다 빠르고 저렴
멀티 단계 흐름 (폼 작성 → 클릭 → 결과 스크래핑)
합리적인 기본값: 속도 제한, 재시도, 정중한 UA
실제 SPA에서 높은 신뢰성

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "browser-act-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "browser-act-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/browser-act/skills",
          "~/.claude/skills/browser-act"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add browser-act-skill -- git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: browser-act skills

JS 중심 SPA에서 타입화된 목록 추출

👤 API가 없는 사이트에서 일회성 데이터가 필요한 개발자 ⏱ ~25 min intermediate

언제 쓸까: 필요한 데이터가 JS 실행 후에만 렌더링되는 사이트; 일반 페치는 아무것도 반환 안 함.

사전 조건

Skill 설치 — git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act

흐름

스키마 정의

Use browser-act. Schema: items[]{title:str, price:number, available:bool}.✓ 복사됨

→ 스키마 수락됨
방문 + 추출

Open <url>; wait for the product grid; extract matching the schema.✓ 복사됨

→ 타입화된 JSON 목록
이상값 확인

Spot-check 3 random rows by re-fetching their detail page; check parsing is correct.✓ 복사됨

→ 스팟 체크 통과; 또는 수정할 파서 버그 발견

결과: 수동 클릭 없는 신뢰할 수 있는 타입화된 데이터.

함정

50건 요청 후 봇 감지로 차단 — 동시성 낮추기; UA 교체; robots.txt 준수 또는 작업 건너뜀

함께 쓰기: filesystem

데이터에 도달하기 위한 멀티 단계 폼 흐름 실행

👤 로그인이나 마법사 뒤의 데이터를 스크래핑하는 개발자 ⏱ ~40 min intermediate

언제 쓸까: '국가 선택 → 연도 선택 → 보기 클릭' 흐름 뒤에 숨겨진 공개 데이터셋.

흐름

흐름 계획

Use browser-act. Steps: pick country=US, year=2025, click 'View'. Then extract the table.✓ 복사됨

→ 흐름 계획 수락됨
실행

Run the flow for 50 country/year combinations.✓ 복사됨

→ 50개 모두에 대한 타입화된 행
저장

Write each combo to /data/<country>-<year>.json.✓ 복사됨

→ /data/에 파일들

결과: 수동 작업 없이 클릭 많은 UI 뒤의 대량 데이터.

함정

사이트가 단계를 추가하거나 버튼 레이블을 변경하면 흐름 중단 — Skill이 감지하고 일시 정지; 50번이 아닌 한 번만 흐름을 다시 기록

함께 쓰기: filesystem

페이지 변경 모니터링 및 알림

👤 상태 페이지 / 가용성 추적기를 감시하는 모든 분 ⏱ ~15 min beginner

언제 쓸까: 슬롯이 열리거나, 가격이 떨어지거나, 문서가 업데이트될 때 알고 싶을 때.

흐름

감시 정의

Use browser-act. Watch <url> selector '.availability-banner' every 10 minutes. Alert if text changes.✓ 복사됨

→ 감시 활성
알림 경로 정의

Alert via: write to ~/inbox/alerts.txt + notify webhook https://<my-webhook>.✓ 복사됨

→ 변경 시 둘 다 실행됨

결과: 특정 신호에 대한 핸즈프리 모니터링.

함정

너무 공격적인 감시 = 차단됨 — 대부분의 사이트에서 ≥5분 간격 유지; 429에 응답

조합

다른 MCP와 조합해 10배 효율

browser-act-skill + filesystem

스크래핑된 데이터를 구조화된 경로에 저장

Save extraction outputs to /data/<source>/<date>.json with provenance metadata.✓ 복사됨

browser-act-skill + duckduckgo-mcp

먼저 검색으로 페이지를 찾은 다음 구조화된 추출

Search via duckduckgo-mcp for the data source; pass the URL into browser-act for typed extraction.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
extract_typed	url, schema, wait_for?	페이지에서 구조화된 데이터 추출	Browser run + LLM tokens
run_flow	steps[], schema?	멀티 단계 탐색	Multi-step browser cost
watch	url, selector, interval, action	장기 실행 변경 감지	Per-poll cost
screenshot	url, full_page?	시각적 디버깅	Browser run

비용 및 제한

운영 비용

API 쿼터: 제공자에 따라 다름; 일부 흐름은 번들 브라우저로 무료
호출당 토큰: 스키마 기반 추출이 raw 스크린샷-생각보다 저렴
금액: 무료 skill; 추출에 LLM token
팁: 항상 스키마 전달 — 스키마 없는 추출은 노이즈에 token 낭비

보안

권한, 시크릿, 파급범위

최소 스코프: Outbound HTTPS

자격 증명 저장: 사이트 로그인 시 비밀 키는 환경 변수로; 일회성 스크래핑 후 교체

데이터 외부 송신: 대상 사이트 + LLM 제공자

절대 부여 금지: skill의 작업 공간에 저장된 영속 로그인 token

대상 사이트의 robots.txt와 이용 약관 준수; skill은 도구이지 정책 무시 라이선스가 아님

문제 해결

자주 발생하는 오류와 해결

추출이 빈 결과 반환

셀렉터 대기 시간 늘리기; 사이트가 클릭 후 XHR을 통해 데이터를 로드할 수 있음

확인: Use screenshot tool to verify page state

사이트 봇 감지

동시성 낮추기; UA 교체; 사이트가 스크래핑을 허용하는지 고려

스키마 불일치

타입 완화 (string vs number); 사이트가 엄격한 타입을 깨는 형식을 사용할 수 있음

감시가 외형적 변경에 반복적으로 발화

셀렉터를 더 타이트하게 고정; 또는 HTML diff 대신 텍스트 기반 diff로 전환

대안