Browserbase Skill Test

Demo repository for testing Claude Code with Browserbase browser automation skills.

What This Does

This repo contains:

1. An intentionally broken web scraper (broken-automation/scraper.ts)
2. Browserbase skills for Claude Code (.claude/skills/browserbase/)
3. A GitHub Action that runs Claude Code to automatically fix the broken scraper

The Bug

The broken-automation/scraper.ts file has incorrect CSS selectors:

Broken Selector	Correct Selector
.story-row	.athing
.story-title .story-link	.titleline > a
.story-score	.score
.story-author	.hnuser

How It Works

flowchart LR
    A[Trigger Action] --> B[Install CLIs]
    B --> C[Claude Code reads broken file]
    C --> D[Uses /fix skill]
    D --> E[Updates selectors]
    E --> F[Opens PR with fix]

Loading

1. Trigger: Manual dispatch or push to main
2. Setup: Installs Node.js, Chrome, browse CLI, Claude Code
3. Analysis: Claude Code reads the broken scraper
4. Fix: Uses the /fix skill to identify and correct selectors
5. PR: Creates a pull request with the changes

Required Secrets

Secret	Description
ANTHROPIC_API_KEY	Claude API key for Claude Code
BROWSERBASE_API_KEY	Browserbase API key
BROWSERBASE_PROJECT_ID	Browserbase project ID

Running the Demo

1. Go to Actions tab
2. Select "Claude Code Auto-Fix Demo"
3. Click "Run workflow"
4. Wait for completion
5. Check the Pull Requests tab for the fix

Local Testing

# Install browse CLI
npm install -g @browserbasehq/browse-cli

# Verify the correct selectors
browse goto https://news.ycombinator.com
browse snapshot

# You'll see elements like:
# [@0-1] .athing - story row
# [@0-2] .titleline > a - story title/link
# [@0-3] .score - points
# [@0-4] .hnuser - author

Project Structure

.
├── .claude/
│   └── skills/
│       └── browserbase/       # Pre-installed skills
│           ├── SKILL.md       # Main skill
│           ├── scripts/       # Setup scripts
│           └── skills/        # Sub-skills (auth, create, fix, functions)
├── .github/
│   └── workflows/
│       └── claude-code-fix.yml
├── broken-automation/
│   ├── scraper.ts             # Intentionally broken
│   ├── expected-fix.ts        # Reference
│   └── package.json
└── README.md

Skills Included

Skill	Purpose
/fix	Debug and fix failing automations
/auth	Handle login flows
/create	Create new automations
/functions	Deploy serverless functions

License

MIT