Automation Skills

브라우저 자동화, 스크린샷 기반 상호작용, 요청 라우팅 기능을 제공하는 스킬입니다. 이 스킬들은 CLI-JAW가 CDP를 통해 Chrome을 제어하고, 스크린샷에서 UI 요소를 클릭하며, 웹 요청을 프로그래밍 방식으로 라우팅할 수 있게 합니다.

browser

Chrome DevTools Protocol(CDP)을 통한 Chrome 브라우저 제어 스킬입니다. 페이지 열기, 탐색, 참조 스냅샷 촬영, 요소 클릭, 텍스트 입력, 콘텐츠 추출, 스크린샷 캡처 기능을 제공합니다. cli-jaw 브라우저 서버가 실행 중이어야 합니다.

기능

사용 예시

# Open a page and take a screenshot
/browser open https://example.com
/browser screenshot

# Click a button by selector
/browser click "#submit-btn"

# Type into an input field
/browser type "#search-input" "CLI-JAW documentation"

# Extract text content from an element
/browser extract ".main-content" text

# Execute JavaScript in the page
/browser eval "document.title"

CDP 연결

browser 스킬은 CDP WebSocket 연결을 관리하는 cli-jaw 브라우저 서버를 통해 Chrome에 연결됩니다. 브라우저 명령을 사용하기 전에 서버를 먼저 시작해야 합니다.

# Start the browser server (runs on a dedicated port)
jaw browser serve

# The skill auto-connects when invoked
# Connection is reused across commands in the same session

vision-click

비전 모델을 사용한 스크린샷 기반 UI 상호작용 스킬입니다. DOM 선택자에 의존하는 대신, 스크린샷을 촬영하고 UI 요소를 시각적으로 식별한 후 정확한 좌표를 클릭합니다. 브라우저에 한정되지 않고 화면에 보이는 모든 애플리케이션에서 작동합니다.

작동 방식

1. 캡처 -- 현재 화면 또는 지정된 영역의 스크린샷 촬영
2. 분석 -- 비전 모델에 스크린샷을 전송하여 대상 요소 식별
3. 위치 파악 -- 모델이 클릭할 요소의 픽셀 좌표를 반환
4. 실행 -- 식별된 좌표에서 클릭(또는 기타 동작) 수행

사용 예시

# Click a button described by its visual label
/vision-click "the blue Submit button"

# Click on a specific icon
/vision-click "the gear icon in the top-right corner"

# Right-click on a file in Finder
/vision-click --right "the README.md file"

# Describe what is currently visible
/vision-click --describe

vision-click과 browser 선택 기준

web-routing

프로그래밍 방식의 HTTP 요청 라우팅 및 인터셉션 스킬입니다. 웹 트래픽을 리디렉션, 재작성, 차단 또는 변환할 수 있는 요청 핸들러를 구성합니다. 로컬 개발 프록시, API 모킹, 트래픽 셰이핑에 유용합니다.

라우팅 규칙

사용 예시

# Redirect API calls to local dev server
/web-routing add /api/* -> http://localhost:8080/api/*

# Mock a specific endpoint with a JSON response
/web-routing mock GET /api/users '[{"id":1,"name":"Test"}]'

# Block tracking requests
/web-routing block *.analytics.com

# Add auth header to all outgoing API requests
/web-routing transform /api/* --header "Authorization: Bearer $TOKEN"

# List active routing rules
/web-routing list

# Remove a routing rule
/web-routing remove /api/*

패턴 매칭

라우트 패턴은 글로브 구문을 지원하며 경로, 호스트, 메서드, 헤더를 기준으로 매칭할 수 있습니다.

# Glob patterns
/api/*                    # matches /api/users, /api/posts/1, etc.
/api/users/:id            # named parameter capture
*.example.com             # subdomain wildcard

# Method-specific routes
GET /api/users            # only match GET requests
POST /api/users           # only match POST requests

# Header-based matching
/api/* [Content-Type: application/json]   # match by header

스킬 비교

작업에 적합한 자동화 스킬을 선택하세요.

일반적인 패턴

스크래핑 및 추출

browser 스킬과 콘텐츠 추출을 결합하여 웹 페이지에서 구조화된 데이터를 가져옵니다.

# Open the target page
/browser open https://news.example.com

# Extract all article titles
/browser eval "Array.from(document.querySelectorAll('h2.title')).map(el => el.textContent)"

# Take a screenshot for reference
/browser screenshot

폼 자동화

입력 및 클릭 명령을 연결하여 폼을 작성하고 제출합니다.

# Navigate to login page
/browser open https://app.example.com/login

# Fill in credentials
/browser type "#email" "user@example.com"
/browser type "#password" "secretpassword"

# Submit the form
/browser click "#login-btn"

# Wait for navigation and verify
/browser wait "nav.dashboard"
/browser screenshot

데스크톱 앱 + 브라우저 조합

하이브리드 워크플로우에서 데스크톱 앱 요소에는 vision-click을, 웹 콘텐츠에는 browser를 사용합니다.

# Click "Open in Browser" in a desktop app
/vision-click "the Open in Browser button"

# Switch to browser skill for DOM-level control
/browser wait ".main-content"
/browser extract ".main-content" text