dev-browser

Dev Browser Skill

Browser automation skill for verifying UI stories. Essential for Ralph's autonomous workflow when implementing frontend features.

Based on SawyerHood/dev-browser - adapted for Claude Code.

Purpose

When Ralph implements UI stories, this skill enables:

• Visual verification that changes work correctly
• Form testing and interaction
• Screenshot capture for documentation
• Detection of UI bugs before committing

Prerequisites

# Install Playwright
npm install -D playwright
npx playwright install chromium

# Or use Bun (recommended)
bun add -D playwright
bunx playwright install chromium

Usage

Quick Verification

For simple UI verification during Ralph iterations:

// verify-ui.ts
import { chromium } from 'playwright';

const BASE_URL = process.env.BASE_URL || 'http://localhost:3000';

async function verify() {
  const browser = await chromium.launch({ headless: false, slowMo: 100 });
  const page = await browser.newPage();
  
  try {
    await page.goto(BASE_URL);
    
    // Your verification logic here
    console.log('✅ Page loaded successfully');
    console.log('Title:', await page.title());
    
    // Take screenshot
    await page.screenshot({ path: 'tmp/verification.png' });
    
  } catch (error) {
    console.error('❌ Verification failed:', error);
    await page.screenshot({ path: 'tmp/error.png' });
    throw error;
  } finally {
    await browser.close();
  }
}

verify();

Run with:

npx tsx verify-ui.ts
# or
bun run verify-ui.ts

Common Patterns

1. Detect Dev Server

Before running tests, detect what's running:

import { execSync } from 'child_process';

function detectDevServers(): { port: number; url: string }[] {
  const ports = [3000, 3001, 5173, 8080, 4000];
  const servers: { port: number; url: string }[] = [];
  
  for (const port of ports) {
    try {
      execSync(`lsof -i:${port} -P -n | grep LISTEN`, { stdio: 'pipe' });
      servers.push({ port, url: `http://localhost:${port}` });
    } catch {
      // Port not in use
    }
  }
  
  return servers;
}

const servers = detectDevServers();
console.log('Found servers:', servers);