drobins25/craft/browser

Browser

Interactive browser automation powered by playwright-cli. Launches a persistent playwright-browser agent that owns a live browser session. You steer it via SendMessage - the agent remembers what it's seen and done across turns.

Why This Exists

Chrome DevTools MCP works but has limitations: no persistent agent session between tool calls, no interactive steering, and full accessibility trees streamed into context (~114k tokens per task). playwright-cli saves snapshots to disk as YAML (~27k tokens per task, ~4x cheaper) and supports named sessions that persist across agent turns.

/craft:dial is the deliberate exception to this stance: that objection targets snapshot-heavy agent work, while dial runs in the main loop on evaluate_script plus at most two screenshots, and page state persists between its calls - so dial keeps Chrome DevTools MCP.

This skill is purely additive. It does not replace or modify Chrome DevTools MCP, the walkthrough-analyzer, or any existing analyzer agent.

Prerequisites

Requires playwright-cli installed globally:

npm install -g @playwright/cli && playwright-cli install-browser

The skill checks prerequisites at every invocation and fails with copy-pasteable instructions if missing.

The Flow

Step 1: Check Prerequisites

command -v playwright-cli >/dev/null 2>&1 || { echo "PREREQ_MISSING: playwright-cli. Run: npm install -g @playwright/cli && playwright-cli install-browser"; exit 2; }

If the check fails, report the error with the install command. Do not proceed.

Step 2: Parse Arguments

Arguments follow this pattern:

/craft:browser <url> [goal] [--headless] [--session=name]

• url (required): The URL to navigate to
• goal (optional): What to do - e.g., "triage the whole site", "test the login flow", "check accessibility"
• --headless (optional): Run without visible browser window. Default is headed (visible browser) so the user can watch
• --session=name (optional): Explicit session name (max 12 chars, lowercase alphanumeric). If omitted, auto-derive.

Step 3: Determine Session Name

CRITICAL: Session names must be <= 12 characters, lowercase alphanumeric only. macOS has a 104-char Unix socket path limit. Long names cause silent socket lookup failures, which spawn duplicate browsers instead of erroring.

Auto-derive a short session name:

# Simple counter-based naming
SESSION="craft$(date +%H%M)"

If --session=name was provided explicitly, use that (after validating length <= 12).

DO NOT derive session names from story/cycle slugs. Those are too long and contain dashes. Use short, opaque names.

Step 4: Clean Up Stale Sessions

Check for and kill any existing craft sessions before launching:

playwright-cli list 2>/dev/null

If sessions are listed that match a craft* pattern, close them:

playwright-cli kill-all 2>/dev/null

Only run kill-all if stale sessions are detected. For a clean state, this is a no-op.

When the target page may have hosted a /craft:dial session, have the agent run the canonical dial clear on arrival (remove craft-dial-style, craft-dial-panel, every [data-craft-dial-injected] node, delete documentElement.dataset.craftDial - idempotent on a clean page, see commands/references/dial-inject.md) so screenshots never capture dial scaffolding.

Step 5: Launch the Agent

Invoke the playwright-browser agent with full context. The agent handles browser open, navigation, and initial snapshot internally.

Agent({
  subagent_type: "craft:playwright-browser",
  description: "Browser session: {url}",
  prompt: "SESSION: {session_name}
URL: {url}
GOAL: {goal or 'Interactive exploration - wait for instructions'}
HEADED: {true unless --headless}
 
Open the browser with the URL in a single command, check the console, and report what you see. Then wait for instructions unless a specific goal was provided."
})

IMPORTANT: Use subagent_type: "craft:playwright-browser" (with the craft: prefix).

The agent returns its agentId. Report this to the user so they know they can continue the session.

Step 6: Relay Results

When the agent returns from its first pass:

1. Show the agent's summary to the user
2. Tell them they can continue steering the browser by talking to you (the orchestrator relays to the agent via SendMessage)
3. The browser session stays alive until explicitly closed

Session Lifecycle

• Created: When the agent runs playwright-cli -s=$SESSION open --headed $URL
• Active: Agent owns the session, responds to SendMessage
• Closed: When user says "done" / "close" / "wrap up", or agent reaches budget cap
• Cleanup: Agent runs playwright-cli -s=$SESSION close before exiting

Guard Rails

1. Prerequisites checked every invocation. Never cached, never assumed.
2. Headed by default. The user should see the browser. Use --headless only when explicitly requested.
3. Session names <= 12 chars. Lowercase alphanumeric only. No dashes. No story slugs.
4. No existing agents/skills modified. This is additive only.
5. Agent budget: The playwright-browser agent has a 60 tool-call budget. For longer sessions, the user can launch a new session.
6. No raw YAML in context. The agent reads snapshots from disk and returns summaries. YAML stays on disk, summaries go to context.
7. `open` called exactly once. The agent opens the browser once with the URL. Never re-opens on failure - checks list first.