skill-browser-agent

Browser Agent

Use this skill when an agent must inspect or operate a web interface. Keep planning, decision-making, execution, and validation separate.

For web-experience work, it can open public references, inspect visual structure and behavior, validate the project page, test navigation and conversion flows, and collect only the public information necessary for the task. It remains a browser-agent skill: it reports observable evidence and does not make art-direction decisions or replace skill-premium-web-experience.

Operating contract

Represent the page as a compact state before asking a model to act:

{
  "page": { "url": "...", "title": "...", "loading": false, "modalOpen": false },
  "elements": [
    { "id": "e42", "role": "button", "name": "Comprar", "enabled": true, "visible": true }
  ]
}

Include only actionable or context-bearing elements. Prefer accessibility roles, accessible names, labels, placeholders, links, form relationships, enabled state, visibility, and stable test IDs. Include coordinates only as a fallback.

Do not inject sequential IDs into every DOM node as the primary strategy. IDs become stale after re-rendering and are unreliable across frames, modals, and virtualized lists. If temporary IDs are needed, bind them to a fresh snapshot, retain the locator metadata, and revalidate immediately before execution.

Decision and execution

The model must return schema-validated actions, never raw browser code:

{ "action": "CLICK", "elementId": "e42", "reason": "Adicionar o produto ao carrinho." }

Supported baseline actions: NAVIGATE, CLICK, TYPE, SELECT, CHECK, SCROLL, PRESS, WAIT, and DONE. Reject unknown actions, missing targets, cross-origin navigation outside the approved scope, and destructive actions without explicit authorization.

The executor should use semantic Playwright locators first, then stable test IDs, then a validated temporary locator. Never let the model execute JavaScript or construct arbitrary selectors directly.