Guidance for effective browser automation with dev-browser plugin. Use for testing local development, verifying UI changes, debugging visual issues, and automating browser tasks.
Automates browser testing and UI verification using the dev-browser plugin for local development.
/plugin marketplace add ken-cavanagh-glean/fieldkit/plugin install browser-automation@fieldkitThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Guidance for effective browser automation in Claude Code. Complements the dev-browser plugin.
This skill provides guidance for using browser automation. Requires the dev-browser plugin to be installed:
/plugin marketplace add sawyerhood/dev-browser
/plugin install dev-browser@sawyerhood/dev-browser
Good use cases:
Poor use cases:
Dev-browser maintains page state across interactions. Use this for multi-step workflows:
1. Navigate once to the page
2. Inspect → identify elements
3. Interact → click, type, verify
4. Don't reload unless necessary
Use DOM snapshots over screenshots when possible:
Pattern:
snapshot → identify element refs → interact with refs
When exploring unknown pages:
1. Take snapshot to understand structure
2. Identify interactive elements
3. Take one action
4. Verify result with new snapshot
5. Repeat
When you know the exact flow:
1. Write complete interaction sequence
2. Execute in one script
3. Verify final state
browser_navigate - Go to URLbrowser_navigate_back - Go backbrowser_snapshot - Get page structure (preferred)browser_take_screenshot - Visual capturebrowser_click - Click element by refbrowser_type - Type into elementbrowser_fill_form - Fill multiple fieldsbrowser_select_option - Select from dropdownbrowser_press_key - Keyboard inputbrowser_wait_for - Wait for text/element/timebrowser_console_messages - Check for errorsbrowser_network_requests - Inspect API callsAlways use element refs from snapshots, not CSS selectors:
snapshot → find ref="btn-42" → click ref="btn-42"
After actions that cause page changes:
click → wait_for text="Success" → continue
If an action fails:
Use browser_fill_form for multiple fields:
fill_form([
{name: "email", type: "textbox", ref: "...", value: "..."},
{name: "password", type: "textbox", ref: "...", value: "..."}
])
After completing a flow:
1. Take final snapshot or screenshot
2. Verify expected elements present
3. Check console for errors
4. Report success/failure with evidence
Testing a login flow:
1. browser_navigate("http://localhost:3000/login")
2. browser_snapshot() → identify form elements
3. browser_fill_form([
{name: "email", ref: "input-1", value: "test@example.com"},
{name: "password", ref: "input-2", value: "testpass"}
])
4. browser_click(ref: "submit-btn")
5. browser_wait_for(text: "Dashboard")
6. browser_snapshot() → verify logged in state
7. Report: "Login successful - dashboard loaded"
Skill version: 1.0.0 Requires: dev-browser plugin -- Axon | 2026-01-01
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.