name: browser
description: |
Browser automation using Playwright MCP or agent-browser CLI. Automatically detects context from modified files and uses appropriate auth/instructions.

user: "/browser open https://localhost:3000 and take a screenshot"
assistant: "Opening the page and capturing screenshot..."

user: "/browser test my changes"
assistant: "Detecting context from git status, loading credentials, and testing..."

user: "/browser snapshot"
assistant: "Getting the accessibility tree of the current page..."

Browser Automation Skill

You have access to Playwright MCP and agent-browser CLI for browser automation.

Context Detection

IMPORTANT: Before starting browser automation, detect the context:

1. Run git status or check modified files
2. Determine context:
3. Files in client/src/routes/website/ → Website Builder context
4. Files in apps/orchid-v1/ or apps/orchid-v2/ → Orchid context

5. Other → Use default behavior

6. Load context-specific instructions:

7. Website Builder: Read ~/.claude/beehiiv/website-builder.md

8. Orchid: Read ~/.claude/beehiiv/orchid.md

9. Load credentials: Read ~/.claude/beehiiv/credentials.json

10. Website Builder uses publisher credentials
11. Orchid uses subscriber credentials (if auth needed)

Tool Selection

Playwright MCP Flow

1. Navigate

browser_navigate → url: "http://localhost:3001"

2. Get Page Structure

browser_snapshot → returns element refs like [ref=1], [ref=23]

3. Interact

browser_click → ref: "23"
browser_type → ref: "15", text: "hello"
browser_fill_form → ref: "10", values: {...}
browser_select_option → ref: "5", value: "option1"
browser_hover → ref: "8"
browser_press_key → key: "Enter"

4. Screenshot

browser_take_screenshot → (optional: fullPage: true)

5. Wait

browser_wait_for → selector: ".loading", state: "hidden"

6. Close

browser_close

Authentication Flow

Automated Login (try first)

1. Read credentials from ~/.claude/beehiiv/credentials.json
2. Navigate to login page
3. Snapshot to find form fields
4. Type email and password using refs
5. Click submit
6. Wait for redirect

Manual Login Fallback

If automated login fails (2FA, captcha, magic link):
1. Take screenshot of current state
2. Tell user: "Please log in manually in the browser window, then tell me when ready"
3. Wait for user confirmation
4. Snapshot to verify logged in
5. Continue with testing

Context-Specific URLs

agent-browser Quick Reference

# Navigation
agent-browser open <url>
agent-browser back
agent-browser reload

# Page State
agent-browser snapshot                # Get accessibility tree
agent-browser screenshot [path]       # Take screenshot

# Interactions (use @ref from snapshot)
agent-browser click <sel>
agent-browser fill <sel> <text>
agent-browser type <sel> <text>
agent-browser press <key>

# Info
agent-browser get url
agent-browser get title

# Cleanup
agent-browser close

Viewport Testing

browser_resize → width: 375, height: 812   # Mobile
browser_resize → width: 768, height: 1024  # Tablet
browser_resize → width: 1920, height: 1080 # Desktop

Typical Workflow

1. Detect context (git status)
2. Read instruction file (~/.claude/beehiiv/*.md)
3. Read credentials (~/.claude/beehiiv/credentials.json)
4. Navigate to appropriate URL
5. Authenticate if needed
6. Navigate to component/page being tested
7. Take screenshots
8. Test interactions
9. Report results
10. Close browser

Error Handling

Element not found:
1. Run snapshot to see current page state
2. Check if page has loaded (wait for selector)
3. Verify selector is correct

Auth failed:
1. Screenshot current state
2. Ask user to log in manually
3. Wait for confirmation
4. Continue

Page not loading:
1. Check if dev server is running
2. Verify URL is correct
3. Check for redirects