browse

Files (1)

• SKILL.md

SKILL.md (first lines)

# Browse — Visual Feedback Browser Automation

You have a `Browser` tool with an action-based interface. This skill teaches you how to use it
effectively with a **screenshot → analyze → act → verify** loop that prevents blind clicking.

## Core Principle

Never act without seeing. Never assume an action worked. Always verify.

```
OBSERVE  →  DECIDE  →  ACT  →  VERIFY
(get_state   (analyze    (click/    (get_state
+ screenshot  elements)   type)     + screenshot
                                    + compare)
```

## Starting a Session

Every browser session starts the same way:

1. **Navigate** to the target URL
2. **Observe** the page with `get_state` — this returns the DOM with indexed interactive elements AND the page text
3. **Screenshot** to see the visual layout

```
Browser { action: "navigate", url: "https://example.com" }
Browser { action: "get_state" }
Browser { action: "screenshot" }
```

Read the screenshot to understand the visual layout. The `get_state` output gives you:
- URL and title
- Scroll position (how far down the page you are)
- Interactive element count (links, inputs, buttons)
- Indexed elements: `[0] <button> "Submit"`, `[1] <input:text> name="email"`
- Page text (first 3000 chars)

### JSON Format

For structured processing, use `format: "json"`:
```
Browser { action: "get_state", format: "json" }
```
Returns: `{ url, title, scroll, stats, elements: [{index, tag, text, ...}], text, session_id, active_tab_id }`

## Interacting with Elements

**Always prefer element indices over CSS selectors.** The indices come from `get_state` and are
reliable. CSS selectors can break if the page structure changes.

```
Browser { action: "click_element", index: 5 }
Browser { action: "type_element", index: 3, value: "hello@example.com" }
```

Fall back to CSS selectors only when:
- The element doesn't appear in the indexed list
- You need to target something very specific (like `input[name="csrf_token"]`)

```
Browser { action: "click", selector: "#submit-btn" }
Browser { action: "fill", selector: "input[name='email']", value: "test@example.com" }
```

## Keyboard Input (send_keys)

For named keys and key combinations:

```
Browser { action: "send_keys", keys: "Enter" }
Browser { action: "send_keys", keys: "Tab Tab Enter" }
Browser { action: "send_keys", keys: "Ctrl+a" }
Browser { action: "send_keys", keys: "Shift+Tab" }
```

Supported named keys: Enter, Tab, Escape, Backspace, Delete, Space, ArrowUp/Down/Left/Right, Home, End, PageUp, PageDown, F1-F12.
Modifiers: Ctrl, Alt, Shift, Meta/Cmd. Sequences: space-separated.

## File Upload

```
Browser { action: "upload_file", selector: "input[type='file']", file_path: "/path/to/file.pdf" }
```

## Dropdowns

```
Browser { action: "dropdown_options", selector: "#my-select" }
Browser { action: "select_dropdown", selector: "#my-select", value: "option_value" }
```

## Structured Data Extraction

Extract structured data from the page using CSS selectors:

```
Browser { action: "extract", schema: {"title": "h1", "price": ".price", "description": ".desc"} }
```

Returns JSON: `{"title": "Product Name", "price": "$29.99", "description": "..."}`

## Multi-Tab Workflows

Open, switch between, and close tabs for side-by-side comparison:

```
Browser { action: "navigate", url: "https://site-a.com" }
Browser { action: "new_tab", url: "https://site-b.com" }
Browser { action: "list_tabs" }
Browser { action: "switch_tab", tab_id: "PREVIOUS_TAB_ID" }
Browser { action: "close_tab", tab_id: "TAB_TO_CLOSE" }
```

Tab IDs are strings (CDP target IDs). Get them from `list_tabs`.

## Multi-Session Workflows

Use separate sessions for isolated browser instances (different profiles, auth states):

From SeifBenayed/cloclo, MIT.

More from SeifBenayed/cloclo