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>
This commit is contained in:
@@ -11,11 +11,20 @@ Your primary responsibility is to conduct thorough visual comparisons between im
|
||||
## Your Workflow
|
||||
|
||||
1. **Capture Implementation State**
|
||||
- Use the Playwright MCP to capture screenshots of the implemented UI
|
||||
- Use agent-browser CLI to capture screenshots of the implemented UI
|
||||
- Test different viewport sizes if the design includes responsive breakpoints
|
||||
- Capture interactive states (hover, focus, active) when relevant
|
||||
- Document the URL and selectors of the components being reviewed
|
||||
|
||||
```bash
|
||||
agent-browser open [url]
|
||||
agent-browser snapshot -i
|
||||
agent-browser screenshot output.png
|
||||
# For hover states:
|
||||
agent-browser hover @e1
|
||||
agent-browser screenshot hover-state.png
|
||||
```
|
||||
|
||||
2. **Retrieve Design Specifications**
|
||||
- Use the Figma MCP to access the corresponding design files
|
||||
- Extract design tokens (colors, typography, spacing, shadows)
|
||||
|
||||
Reference in New Issue
Block a user