browser-tools
OrchestKit security wrapper for browser automation. Adds URL blocklisting, rate limiting, robots.txt enforcement, and ethical scraping guardrails on top of the upstream agent-browser skill. Use when automating browser workflows that need safety guardrails.
git clone --depth 1 https://github.com/yonatangross/orchestkit /tmp/browser-tools && cp -r /tmp/browser-tools/plugins/ork/skills/browser-tools ~/.claude/skills/browser-toolsSKILL.md
# Browser Tools — Security Wrapper OrchestKit security wrapper for `agent-browser`. **For command reference and usage patterns, use the upstream `agent-browser` skill directly.** This skill adds safety guardrails only. > **Command docs**: Refer to the upstream `agent-browser` skill for the full command reference (50+ commands: interaction, wait, capture, extraction, storage, semantic locators, tabs, debug, mobile, network, cookies, state, vault). ## Decision Tree ```bash # Fallback decision tree for web content # 1. Try WebFetch first (fast, no browser overhead) # 2. If empty/partial -> Try Tavily extract/crawl # 3. If SPA or interactive -> use agent-browser # 4. If login required -> authentication flow + state save # 5. If dynamic -> wait @element or wait --text ``` ## Local Dev URLs Use **Portless** (`npm i -g portless`) for stable local dev URLs instead of guessing ports. When Portless is running, navigate to `myapp.localhost:1355` instead of `localhost:3000`. Our safety hook already allows `*.localhost` subdomains via `ORCHESTKIT_AGENT_BROWSER_ALLOW_LOCALHOST`. ```bash # With Portless: stable, named URLs agent-browser open "http://myapp.localhost:1355" # Without: fragile port guessing agent-browser open "http://localhost:3000" # which app is this? ``` ## New in 2026-04 → 2026-05 (agent-browser 0.23 → 0.27.0) **React introspection + perf observability (0.27):** - **`react tree` / `react inspect <fiberId>` / `react renders start|stop` / `react suspense`** — first-class React DevTools integration via a vendored MIT-licensed hook embedded in the binary (zero runtime deps). Component-tree visibility, per-fiber props/hooks/state inspection, render profiling with mount/re-render counts and change details, Suspense boundary classification with root-cause grouping. Hook treats fiber state dumps as sensitive — gitignore captures. - **`vitals [url]`** — reports Core Web Vitals (LCP, CLS, TTFB, FCP, INP) plus React hydration phases for any page. Useful for perf gates in CI. - **`pushstate <url>`** — client-side SPA navigation without a full page load. Pairs with `react renders` to measure SPA route transitions without resetting profiling state. - **`--init-script <path>` (repeatable, env `AGENT_BROWSER_INIT_SCRIPTS`)** + **`--enable <feature>` (repeatable, env `AGENT_BROWSER_ENABLE`)** — register scripts before first navigation; `--enable react-devtools` is built-in. Hook treats arbitrary init scripts as code-execution surface — same trust model as `skills get`. - **`network route --resource-type <csv>`** — filter intercepted requests by CDP resource type (document, script, xhr, fetch, image, ...). Lets you mock only API calls without breaking page assets. - **`cookies set --curl <file>`** — auto-detects JSON, cURL, and Cookie-header formats for bulk cookie import. Hook still treats cookie-set as auth-state injection. - **Dashboard behind a reverse proxy** — observability dashboard now works from proxied origins via same-origin proxy. Enables path-based routing for shared dev environments. - Fixed `doctor` generating duplicate check IDs when invoked multiple times in the same process. - npm publishing moved to GitHub Actions OIDC trusted publishing — no manually managed npm tokens upstream. **Diagnostic tooling + stable IDs (0.26):** - `agent-browser doctor` — one-shot environment + Chrome + daemon + config + security + provider + network check. Flags: `--offline`, `--quick`, `--fix`, `--json`. Run before opening an issue to attach a structured snapshot. - **Stable tab identifiers** — tabs now use stable string IDs (`t1`, `t2`, ...) with optional memorable labels via `--label`. Survives daemon restart; replaces brittle index-based references. - **`core` skill expanded** — comprehensive built-in usage guide covering snapshot-ref-act loops, reading, interaction, waiting, and troubleshooting. - **Config JSON Schema** — `$schema` reference enables IDE auto-completion and validation against `https://agent-browser.dev/schema.json`. - Fixed `--state` flag not loading saved cookies/localStorage at launch; `--help` now leads with the skills section. **Skill discovery & chat (0.25):** - `agent-browser skills list/get <name>` — discover and install capability packs on-demand. Hook treats first-party skills as trusted; warns on arbitrary third-party skill fetches. - `agent-browser chat` — single-shot or REPL natural-language driving over the same daemon. Hook pipes transcripts through the same URL/rate/robots checks as scripted commands. **Accessibility-first locators (0.24):** - `find` / `getByRole` — semantic locator via CDP accessibility tree (role + name) instead of brittle CSS/ref selectors. Prefer these in new scripts; they survive markup churn and are the locator path assumed by `chat`. - `snapshot --urls` — emits resolved URLs alongside refs, removing a round-trip for link-extraction flows. - `--annotate` — overlays ref IDs / role labels on screenshots for debugging. **Cloud providers (0.25):** - `--provider agentcore` — AWS Bedrock AgentCore cloud browser. Hook treats remote providers as egress surfaces — same URL/robots rules apply, but network routing is disabled (remote scope). - Browserless + AgentCore both honor `AGENT_BROWSER_PROVIDER` env var. **Dashboard (0.25):** - Embedded dashboard bundled with the binary — no separate install. Open via `agent-browser dashboard` or the `inspect` CDP link. Still flagged as local-proxy attack surface by the hook. **Auto-dialog dismissal (0.23.1):** - alert / beforeunload dialogs auto-dismissed by default. Opt out with `--no-auto-dialog` when a test needs to assert dialog content. ## What's New (v0.17 → v0.22.2) **Breaking changes** — update scripts now: - `--full` / `-f` moved from global to command-level (v0.21): use `screenshot --full`, NOT `--full screenshot` - Auth encryption format changed (v0.17): saved auth states from v0.16.x may not load - Auto-dialog dismissal (v0.23.1): alert/beforeunload dialogs are auto-dismissed by default
Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring. Use when implementing screen reader support, keyboard navigation, ARIA patterns, focus traps, accessible component libraries, reduced motion, or cognitive accessibility.
Agent orchestration patterns for agentic loops, multi-agent coordination, alternative frameworks, and multi-scenario workflows. Use when building autonomous agent loops, coordinating multiple agents, evaluating CrewAI/AutoGen/Swarm, or orchestrating complex multi-step scenarios.
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality assurance. Use when generating UI components with AI tools, rendering multi-surface MCP visual output, reviewing AI-generated code, or integrating AI output into design systems.
Queries local analytics across OrchestKit projects for agent usage, skill frequency, hook timing, team activity, session replay, cost estimation, and model delegation trends. Privacy-safe with hashed project IDs. Supports time-range filtering and comparative analysis. Use when reviewing performance, estimating costs, or understanding usage patterns.
Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion.
API design patterns for REST/GraphQL framework design, versioning strategies, and RFC 9457 error handling. Use when designing API endpoints, choosing versioning schemes, implementing Problem Details errors, or building OpenAPI specifications.
Use this skill when documenting significant architectural decisions. Provides ADR templates following the Nygard format with sections for context, decision, consequences, and alternatives. Use when writing ADRs, recording decisions, or evaluating options.
Architecture validation and patterns for clean architecture, backend structure enforcement, project structure validation, test standards, and context-aware sizing. Use when designing system boundaries, enforcing layered architecture, validating project structure, defining test standards, or choosing the right architecture tier for project scope.