feat: Replace Playwright MCP with agent-browser CLI

- Remove Playwright MCP server from plugin
- Add new agent-browser skill for CLI-based browser automation
- Rename /playwright-test to /test-browser command
- Update all commands and agents to use agent-browser CLI
- Update README and plugin.json

agent-browser is Vercel's headless browser CLI designed for AI agents.
It uses ref-based selection (@e1, @e2) from accessibility snapshots
and provides a simpler CLI interface compared to MCP tools.

Key benefits:
- No MCP server required
- Simpler Bash-based workflow
- Same ref-based element selection
- Better for quick automation tasks

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

plugins/compound-engineering/commands/feature-video.md

@@ -13,7 +13,7 @@ argument-hint: "[PR number or 'current'] [optional: base URL, default localhost:
 <role>Developer Relations Engineer creating feature demo videos</role>
 
 This command creates professional video walkthroughs of features for PR documentation:
-- Records browser interactions using Playwright video capture
+- Records browser interactions using agent-browser CLI
 - Demonstrates the complete user flow
 - Uploads the video for easy sharing
 - Updates the PR description with an embedded video
@@ -22,12 +22,26 @@ This command creates professional video walkthroughs of features for PR document
 
 <requirements>
 - Local development server running (e.g., `bin/dev`, `rails server`)
-- Playwright MCP server connected
+- agent-browser CLI installed
 - Git repository with a PR to document
 - `ffmpeg` installed (for video conversion)
 - `rclone` configured (optional, for cloud upload - see rclone skill)
 </requirements>
 
+## Setup
+
+**Check installation:**
+```bash
+command -v agent-browser >/dev/null 2>&1 && echo "Installed" || echo "NOT INSTALLED"
+```
+
+**Install if needed:**
+```bash
+npm install -g agent-browser && agent-browser install
+```
+
+See the `agent-browser` skill for detailed usage.
+
 ## Main Tasks
 
 ### 1. Parse Arguments
@@ -118,26 +132,9 @@ Does this look right?
 mkdir -p tmp/videos
 ```
 
-**Start browser with video recording using Playwright MCP:**
+**Recording approach: Use browser screenshots as frames**
 
-Note: Playwright MCP's browser_navigate will be used, and we'll use browser_run_code to enable video recording:
-
-```javascript
-// Enable video recording context
-mcp__plugin_compound-engineering_pw__browser_run_code({
-  code: `async (page) => {
-    // Video recording is enabled at context level
-    // The MCP server handles this automatically
-    return 'Video recording active';
-  }`
-})
-```
-
-**Alternative: Use browser screenshots as frames**
-
-If video recording isn't available via MCP, fall back to:
-1. Take screenshots at key moments
-2. Combine into a GIF using ffmpeg
+agent-browser captures screenshots at key moments, then combine into video using ffmpeg:
 
 ```bash
 ffmpeg -framerate 2 -pattern_type glob -i 'tmp/screenshots/*.png' -vf "scale=1280:-1" tmp/videos/feature-demo.gif
@@ -152,32 +149,32 @@ ffmpeg -framerate 2 -pattern_type glob -i 'tmp/screenshots/*.png' -vf "scale=128
 Execute the planned flow, capturing each step:
 
 **Step 1: Navigate to starting point**
-```
-mcp__plugin_compound-engineering_pw__browser_navigate({ url: "[base-url]/[start-route]" })
-mcp__plugin_compound-engineering_pw__browser_wait_for({ time: 2 })
-mcp__plugin_compound-engineering_pw__browser_take_screenshot({ filename: "tmp/screenshots/01-start.png" })
+```bash
+agent-browser open "[base-url]/[start-route]"
+agent-browser wait 2000
+agent-browser screenshot tmp/screenshots/01-start.png
 ```
 
 **Step 2: Perform navigation/interactions**
-```
-mcp__plugin_compound-engineering_pw__browser_click({ element: "[description]", ref: "[ref]" })
-mcp__plugin_compound-engineering_pw__browser_wait_for({ time: 1 })
-mcp__plugin_compound-engineering_pw__browser_take_screenshot({ filename: "tmp/screenshots/02-navigate.png" })
+```bash
+agent-browser snapshot -i  # Get refs
+agent-browser click @e1    # Click navigation element
+agent-browser wait 1000
+agent-browser screenshot tmp/screenshots/02-navigate.png
 ```
 
 **Step 3: Demonstrate feature**
-```
-mcp__plugin_compound-engineering_pw__browser_snapshot({})
-// Identify interactive elements
-mcp__plugin_compound-engineering_pw__browser_click({ element: "[feature element]", ref: "[ref]" })
-mcp__plugin_compound-engineering_pw__browser_wait_for({ time: 1 })
-mcp__plugin_compound-engineering_pw__browser_take_screenshot({ filename: "tmp/screenshots/03-feature.png" })
+```bash
+agent-browser snapshot -i  # Get refs for feature elements
+agent-browser click @e2    # Click feature element
+agent-browser wait 1000
+agent-browser screenshot tmp/screenshots/03-feature.png
 ```
 
 **Step 4: Capture result**
-```
-mcp__plugin_compound-engineering_pw__browser_wait_for({ time: 2 })
-mcp__plugin_compound-engineering_pw__browser_take_screenshot({ filename: "tmp/screenshots/04-result.png" })
+```bash
+agent-browser wait 2000
+agent-browser screenshot tmp/screenshots/04-result.png
 ```
 
 **Create video/GIF from screenshots:**
@@ -189,17 +186,14 @@ mkdir -p tmp/videos tmp/screenshots
 # Create MP4 video (RECOMMENDED - better quality, smaller size)
 # -framerate 0.5 = 2 seconds per frame (slower playback)
 # -framerate 1 = 1 second per frame
-ffmpeg -y -framerate 0.5 -pattern_type glob -i '.playwright-mcp/tmp/screenshots/*.png' \
+ffmpeg -y -framerate 0.5 -pattern_type glob -i 'tmp/screenshots/*.png' \
   -c:v libx264 -pix_fmt yuv420p -vf "scale=1280:-2" \
   tmp/videos/feature-demo.mp4
 
 # Create low-quality GIF for preview (small file, for GitHub embed)
-ffmpeg -y -framerate 0.5 -pattern_type glob -i '.playwright-mcp/tmp/screenshots/*.png' \
+ffmpeg -y -framerate 0.5 -pattern_type glob -i 'tmp/screenshots/*.png' \
   -vf "scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse" \
   -loop 0 tmp/videos/feature-demo-preview.gif
-
-# Copy screenshots to project folder for easy access
-cp -r .playwright-mcp/tmp/screenshots tmp/
 ```
 
 **Note:**