npx skills add ...
npx skills add browserbase/skills --skill safe-browser
npx skills add browserbase/skills --skill safe-browser
Build local constrained-browser agents with a safe_browser tool that owns CDP, enforces a domain allowlist with Fetch interception, and lets a runtime Claude Agent SDK agent complete browsing tasks without raw browser, shell, or CDP access. Use when the user wants an agent to browse or scrape while staying on approved domains, demo blocked off-domain navigation, or generate a safe browser client.
Build a local browser-agent demo where the generated runtime agent has exactly one browser capability: safe_browser. The tool owns the Playwright/CDP session, enables Fetch interception for all requests, and fails any request whose host is not allowlisted.
This skill is a builder guide. The skill itself is not the runtime boundary; the generated Claude Agent SDK app is.
Use the Claude Agent SDK local template:
To watch the local browser instead of running headless:
If Chromium is missing:
Expose constrained actions, not raw CDP:
goto: navigate to an absolute URL through Page.navigate.extract_front_page: return structured data for the Hacker News front page.extract_comments: return structured data for a Hacker News comments page.current_url: report the current page URL.audit_log: return CDP allow/block decisions.Do not expose { method, params } CDP passthrough. The agent must not be able to call Fetch.disable, create targets, attach new sessions, or run arbitrary shell/browser clients.
For the Hacker News demo, an accessibility snapshot is not necessary. Purpose-built extractors are easier to verify and harder to misuse than a broad page snapshot.
Always run the generated demo and show concrete output. A passing demo must prove:
safe_browser.https://news.ycombinator.com.Fetch.requestPaused for that URL.Fetch.failRequest.news.ycombinator.com.The template script already performs these assertions.
safe_browser.npx playwright install chromiumUser task
-> coding agent uses this skill to create a demo app
-> Claude Agent SDK runtime agent
-> only tool: safe_browser
-> local Chromium
-> CDP Fetch.enable({ urlPattern: "*" })
-> allowlist decision
-> Fetch.continueRequest for allowed hosts
-> Fetch.failRequest for blocked hosts