cloclo: Skill for Claude Code

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: "[email protected]" }

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: "[email protected]" }