JavaScript is disabled. Some features may not work.
agent-browser — ★ 70.0K GitHub Stars — Install Guide | SkillsNav
🇺🇸 English🇨🇳 中文
SkillsNav
Home

agent-browser

★ 70K repouiN/AIntermediateClaude
🤖 AI Summary

`agent-browser` is a local-first browser automation tool for validating Open Design previews. It can inspect rendered state, perform click/type actions, capture screenshots, and responds to natural language requests about the currently selected browser tab (e.g., "extract the logo", "check a11y").

How to Install

Claude Code:
git clone --depth 1 https://github.com/nexu-io/open-design.git && cp open-design/skills/agent-browser ~/.claude/skills/agent-browser -r
# Agent Browser Use `agent-browser` for local Open Design preview validation: inspect rendered state, click/type when requested, and capture one screenshot when visual evidence matters. Keep the browser local-first unless the user explicitly asks for external browsing. When the run prompt contains selected workspace context, prefer the selected `browser` tab URL/title as the target. Treat user phrases like "this page", "the current browser", "right-side tab", "extract the logo", "get the palette", "take an element screenshot", or "check OG/a11y" as requests about that selected tab unless the user names another target. ## Requirements Verify the CLI before doing any browser work: ```bash command -v agent-browser ``` If missing, stop and tell the user to install it: ```bash npm i -g agent-browser agent-browser install ``` Do not replace the CLI with ad hoc browser scripts. ## Context Hygiene Never print full upstream guides into chat or tool output. Save them to temp files and extract only task-relevant lines: ```bash AGENT_BROWSER_CORE="${TMPDIR:-/tmp}/agent-browser-core.$$.md" agent-browser skills get core > "$AGENT_BROWSER_CORE" rg -n "cdp|connect|snapshot|screenshot|click|type|wait|get title|get url" "$AGENT_BROWSER_CORE" ``` Use `agent-browser skills get core --full` only when needed, and redirect it to a temp file the same way. ## Browser Context Extraction For selected Open Design browser tabs and browser-use/browser-harness-style tasks, collect the smallest useful evidence first: 1. Confirm the target with `agent-browser get title` and `agent-browser get url`. 2. Capture `agent-browser snapshot` before any extraction or click. 3. For visual evidence, save a page screenshot and, when the core guide exposes an element-screenshot command, capture the specific element instead of a cropped full page. 4. For logos, fonts, colors, images, motion code, OG metadata, page structure, and accessibility checks, prefer DOM/CSS/accessibility evidence from the attached browser over guessing from the rendered screenshot alone. 5. If the selected Open Design context only provided a URL/title and no browser automation tool is attached, say that directly and do not invent page internals. Save extracted design evidence as compact notes or assets in the project when the user is building from the reference. Do not paste full page HTML or large asset dumps into chat; summarize the relevant selectors, tokens, URLs, and screenshots. ## CDP Startup Contract `agent-browser` must attach to an existing CDP endpoint. Never run `agent-browser open` before `agent-browser connect`; doing so can make the CLI auto-launch Chrome and re-enter the crash path. Do not run Open Design's own daemon CLI as a browser automation tool. Commands such as `od browser snapshot`, `daemon-cli.mjs browser snapshot`, or `$OD_NODE_BIN $OD_BIN browser snapshot` are not valid browser tools; they can be misinterpreted as daemon startup and open an internal `127.

Details

Category Design → ui
Sourcenexu-io/open-design
SKILL.mdView on GitHub →
Repo Stars★ 70.0K
Est. per Skill503 (shared across 139 skills from this repo)
DifficultyIntermediate
Risk LevelN/A

Related Skills

Works Well With

Skills from the same repository — often designed to work together