CBrowser offers two different skills for two different platforms. Make sure you install the right one.

Claude.ai Skill (Web Interface)

For: Users of claude.ai in a web browser. Works on all paid plans.

The Claude.ai Skill is a lightweight knowledge package that gives Claude context about CBrowser tools, pricing, workflows, and best practices. It works alongside the MCP connector.

What's Included

cbrowser-claudeai.skill
├── SKILL.md                     # Tool tiers, pricing, workflows, key concepts
├── scripts/
│   ├── quick-audit.md           # Step-by-step site audit workflow
│   ├── competitive-analysis.md  # Competitor comparison workflow
│   └── persona-testing.md       # Multi-persona testing workflow
├── references/
│   ├── persona-index.md         # All 21 personas with traits and use cases
│   ├── ctc-guide.md             # CTC score interpretation guide
│   └── tool-categories.md       # All 120 tools organized by category
└── assets/
    └── example-prompts.md       # Ready-to-use prompts for common tasks

Installation

Add the MCP connector: Customize → Connectors → "Add custom connector"
Paste: https://demo.cbrowser.ai/mcp
Download the CBrowser Skill (.skill)
Go to Customize → Skills → Upload the zip
Start a new conversation and test your site

This is NOT the Claude Code skill. The Claude.ai Skill is a knowledge file for the web interface. It does not include CLI tools, workflow routing, or persistent memory. For the Claude Code terminal app, see below.

Claude Code Skill (CLI Terminal App)

For: Users of Claude Code, the terminal CLI app. Not for Claude.ai web.

The Claude Code Skill is a full CLI integration with workflow routing, TypeScript tools, constitutional safety, persistent memory, and session management.

Installation Methods

Method 1: curl Script (Recommended)

One-line installation that downloads all skill files:

curl -fsSL https://raw.githubusercontent.com/alexandriashai/cbrowser/main/scripts/install-skill.sh | bash

Method 2: npx Command

If you already have npm installed:

npx cbrowser install-skill

Method 3: Manual Installation

Clone the repo and copy the skill directory:

git clone https://github.com/alexandriashai/cbrowser.git /tmp/cbrowser
cp -r /tmp/cbrowser/skill ~/.claude/skills/CBrowser

Post-Installation Setup

1. Register the Skill

Add CBrowser to your skill index at ~/.claude/skills/skill-index.json:

{
  "CBrowser": "~/.claude/skills/CBrowser/SKILL.md"
}

If the file doesn't exist, create it:

mkdir -p ~/.claude/skills
echo '{"CBrowser": "~/.claude/skills/CBrowser/SKILL.md"}' > ~/.claude/skills/skill-index.json

2. Install npm Package

The skill requires the cbrowser npm package:

npm install -g cbrowser

3. Install Playwright Browsers

# Install all browsers (recommended for cross-browser testing)
npx playwright install

# Or just Chromium
npx playwright install chromium

Skill Structure

After installation, ~/.claude/skills/CBrowser/ contains:

~/.claude/skills/CBrowser/
│
├── SKILL.md                    # Main skill file (entry point)
│   └── Workflow routing, trigger phrases, CLI reference
│
├── Context Files (loaded on demand)
│   ├── Philosophy.md           # Constitutional safety principles
│   │   └── Action zones (Green/Yellow/Red/Black)
│   ├── AIVision.md             # AI selector documentation
│   │   └── Natural language, visual, ARIA, semantic modes
│   ├── SessionManagement.md    # Session persistence
│   │   └── Cookies, localStorage, URL restoration
│   ├── Credentials.md          # Credential vault
│   │   └── Encrypted storage, 2FA/TOTP support
│   └── Personas.md             # Persona framework
│       └── Built-in + custom personas, cognitive traits
│
├── Workflows/                  # Task-specific workflows
│   ├── Navigate.md             # Smart navigation with AI wait detection
│   ├── Interact.md             # AI-guided click, fill, submit
│   ├── Extract.md              # Intelligent data extraction
│   ├── Authenticate.md         # Login handling with credential vault
│   ├── Test.md                 # Test scenarios and assertions
│   └── Journey.md              # Autonomous persona exploration
│
├── Tools/
│   └── CBrowser.ts             # TypeScript CLI wrapper
│       └── Invokes npx cbrowser with skill integration
│
└── .memory/                    # Persistent storage (survives sessions)
    ├── sessions/               # Saved browser sessions
    │   └── {name}.json         # Cookies + localStorage + URL
    ├── selectors/              # Learned selector mappings
    │   └── Self-healing selector cache
    ├── personas/               # Custom personas
    │   └── {name}.json         # Persona definitions
    ├── scenarios/              # Test scenarios
    │   └── {name}.txt          # NL test scripts
    └── audit/                  # Action audit logs
        └── Constitutional safety audit trail

Architecture Diagram

┌────────────────────────────────────────────────────────────────────┐
│                        Claude Code                                  │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │  User: "Test checkout as elderly user"                       │  │
│  └──────────────────────────────────────────────────────────────┘  │
│                              │                                      │
│                              ▼                                      │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │  SKILL.md (Entry Point)                                      │  │
│  │  └── Trigger: "journey", "run as", "simulate"                │  │
│  │      └── Route to: Workflows/Journey.md                      │  │
│  └──────────────────────────────────────────────────────────────┘  │
│                              │                                      │
│                              ▼                                      │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │  Workflows/Journey.md                                        │  │
│  │  └── Load: Personas.md → elderly-user                        │  │
│  │  └── Invoke: npx cbrowser cognitive-journey                  │  │
│  └──────────────────────────────────────────────────────────────┘  │
│                              │                                      │
└──────────────────────────────│──────────────────────────────────────┘
                               │
                               ▼
┌────────────────────────────────────────────────────────────────────┐
│                     CBrowser npm Package                            │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │  Cognitive User Simulation                                    │  │
│  │  ├── patience, frustration, confusion tracking               │  │
│  │  ├── Abandonment detection                                   │  │
│  │  └── Constitutional safety verification                      │  │
│  └──────────────────────────────────────────────────────────────┘  │
│                              │                                      │
│                              ▼                                      │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │  Playwright (Browser Automation)                             │  │
│  │  └── Chromium / Firefox / WebKit                             │  │
│  └──────────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────────────┘

Using CBrowser as a Claude Code Skill

Once installed, you can use CBrowser in Claude Code with natural language:

Workflow Triggers

Trigger Phrase	Workflow	Action
"navigate to", "go to", "open"	Navigate	Smart navigation with AI wait detection
"extract", "scrape", "get content"	Extract	Intelligent data extraction
"click", "fill", "submit"	Interact	AI-guided interactions
"login", "authenticate", "sign in"	Authenticate	Handle login flows
"test", "run test", "validate"	Test	Run test scenarios
"journey", "run as", "simulate"	Journey	Autonomous persona exploration

Examples

User: "Navigate to example.com and click the login button"
→ CBrowser Navigate workflow → Interact workflow

User: "Test the checkout flow as an elderly user"
→ CBrowser Journey workflow with elderly-user persona

User: "Compare the staging and production sites visually"
→ CBrowser A/B comparison workflow

Updating the Skill

To update to the latest version:

# Re-run the installer (it will ask to update)
curl -fsSL https://raw.githubusercontent.com/alexandriashai/cbrowser/main/scripts/install-skill.sh | bash

# Update the npm package
npm update -g cbrowser

Troubleshooting

Skill Not Recognized

Check that the skill index is correct:

cat ~/.claude/skills/skill-index.json

Should contain:

{"CBrowser": "~/.claude/skills/CBrowser/SKILL.md"}

CLI Commands Not Working

Verify the npm package is installed globally:

which cbrowser
# Should output a path, e.g., /usr/local/bin/cbrowser

npx cbrowser --version
# Should output the current version number

Browser Not Starting

Install Playwright browsers:

npx playwright install

Permission Issues

The skill directory should be owned by your user:

ls -la ~/.claude/skills/CBrowser/
# Should show your user, not root

# Fix if needed:
sudo chown -R $(whoami) ~/.claude/skills/CBrowser/

Claude Skill Installation