From bd4a659f35b96da32b57df65a38aec57adeeaca2 Mon Sep 17 00:00:00 2001 From: Kieran Klaassen Date: Mon, 24 Nov 2025 14:02:07 -0800 Subject: [PATCH] [2.1.0] Add Playwright MCP server and replace Puppeteer references MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Bundle @playwright/mcp for browser automation across all plugin users - Replace all Puppeteer references with Playwright in agents and commands: - bug-reproduction-validator - design-iterator - design-implementation-reviewer - figma-design-sync - generate_command - Document Playwright tools: browser_navigate, browser_take_screenshot, browser_click, browser_fill_form, browser_snapshot, browser_evaluate 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../.claude-plugin/plugin.json | 17 +++++++++++++---- plugins/compounding-engineering/CHANGELOG.md | 15 +++++++++++++++ plugins/compounding-engineering/README.md | 17 +++++++++++++++++ .../design/design-implementation-reviewer.md | 2 +- .../agents/design/design-iterator.md | 2 +- .../agents/design/figma-design-sync.md | 4 ++-- .../workflow/bug-reproduction-validator.md | 2 +- .../commands/generate_command.md | 2 +- 8 files changed, 51 insertions(+), 10 deletions(-) diff --git a/plugins/compounding-engineering/.claude-plugin/plugin.json b/plugins/compounding-engineering/.claude-plugin/plugin.json index 4bb9b17..3369bbb 100644 --- a/plugins/compounding-engineering/.claude-plugin/plugin.json +++ b/plugins/compounding-engineering/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "compounding-engineering", - "version": "2.0.2", - "description": "AI-powered development tools. 24 agents (organized by category: review, research, design, workflow, docs), 15 commands, 11 skills for code review, research, design, and workflow automation.", + "version": "2.1.0", + "description": "AI-powered development tools. 24 agents (organized by category: review, research, design, workflow, docs), 15 commands, 11 skills, 1 MCP server for code review, research, design, and workflow automation.", "author": { "name": "Kieran Klaassen", "email": "kieran@every.to", @@ -20,6 +20,15 @@ "python", "typescript", "knowledge-management", - "image-generation" - ] + "image-generation", + "playwright", + "browser-automation" + ], + "mcpServers": { + "playwright": { + "command": "npx", + "args": ["-y", "@playwright/mcp@latest"], + "env": {} + } + } } diff --git a/plugins/compounding-engineering/CHANGELOG.md b/plugins/compounding-engineering/CHANGELOG.md index 19509e8..7736bc1 100644 --- a/plugins/compounding-engineering/CHANGELOG.md +++ b/plugins/compounding-engineering/CHANGELOG.md @@ -5,6 +5,21 @@ All notable changes to the compounding-engineering plugin will be documented in The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [2.1.0] - 2024-11-24 + +### Added + +- **Playwright MCP Server** - Bundled `@playwright/mcp` for browser automation across all projects using this plugin. Provides screenshot, navigation, click, fill, and evaluate tools. + +### Changed + +- Replaced all Puppeteer references with Playwright across agents and commands: + - `bug-reproduction-validator` agent + - `design-iterator` agent + - `design-implementation-reviewer` agent + - `figma-design-sync` agent + - `generate_command` command + ## [2.0.2] - 2024-11-24 ### Changed diff --git a/plugins/compounding-engineering/README.md b/plugins/compounding-engineering/README.md index fb2445d..959bd70 100644 --- a/plugins/compounding-engineering/README.md +++ b/plugins/compounding-engineering/README.md @@ -9,6 +9,7 @@ AI-powered development tools that get smarter with every use. Make each unit of | Agents | 24 | | Commands | 15 | | Skills | 11 | +| MCP Servers | 1 | ## Agents @@ -130,6 +131,22 @@ Access via `/workflows:command`: - `GEMINI_API_KEY` environment variable - Python packages: `google-genai`, `pillow` +## MCP Servers + +| Server | Description | +|--------|-------------| +| `playwright` | Browser automation via `@playwright/mcp` | + +**Playwright tools provided:** +- `browser_navigate` - Navigate to URLs +- `browser_take_screenshot` - Take screenshots +- `browser_click` - Click elements +- `browser_fill_form` - Fill form fields +- `browser_snapshot` - Get accessibility snapshot +- `browser_evaluate` - Execute JavaScript + +MCP servers start automatically when the plugin is enabled. + ## Installation ```bash diff --git a/plugins/compounding-engineering/agents/design/design-implementation-reviewer.md b/plugins/compounding-engineering/agents/design/design-implementation-reviewer.md index 1f61a7c..3ed41fc 100644 --- a/plugins/compounding-engineering/agents/design/design-implementation-reviewer.md +++ b/plugins/compounding-engineering/agents/design/design-implementation-reviewer.md @@ -11,7 +11,7 @@ Your primary responsibility is to conduct thorough visual comparisons between im ## Your Workflow 1. **Capture Implementation State** - - Use the Puppeteer MCP to capture screenshots of the implemented UI + - Use the Playwright MCP 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 diff --git a/plugins/compounding-engineering/agents/design/design-iterator.md b/plugins/compounding-engineering/agents/design/design-iterator.md index d76dc05..ccd39ca 100644 --- a/plugins/compounding-engineering/agents/design/design-iterator.md +++ b/plugins/compounding-engineering/agents/design/design-iterator.md @@ -10,7 +10,7 @@ You are an expert UI/UX design iterator specializing in systematic, progressive For each iteration cycle, you must: -1. **Take Screenshot**: Capture the current state of the component using puppeteer_screenshot +1. **Take Screenshot**: Capture the current state of the component using browser_take_screenshot 2. **Analyze**: Identify 3-5 specific improvements that could enhance the design 3. **Implement**: Make those targeted changes to the code 4. **Document**: Record what was changed and why diff --git a/plugins/compounding-engineering/agents/design/figma-design-sync.md b/plugins/compounding-engineering/agents/design/figma-design-sync.md index 5b6b931..61ef0fd 100644 --- a/plugins/compounding-engineering/agents/design/figma-design-sync.md +++ b/plugins/compounding-engineering/agents/design/figma-design-sync.md @@ -11,7 +11,7 @@ You are an expert design-to-code synchronization specialist with deep expertise 1. **Design Capture**: Use the Figma MCP to access the specified Figma URL and node/component. Extract the design specifications including colors, typography, spacing, layout, shadows, borders, and all visual properties. Also take a screenshot and load it into the agent. -2. **Implementation Capture**: Use the Puppeteer MCP to navigate to the specified web page/component URL and capture a high-quality screenshot of the current implementation. +2. **Implementation Capture**: Use the Playwright MCP to navigate to the specified web page/component URL and capture a high-quality screenshot of the current implementation. 3. **Systematic Comparison**: Perform a meticulous visual comparison between the Figma design and the screenshot, analyzing: @@ -148,7 +148,7 @@ Common Tailwind values to prefer: - **Missing Figma URL**: Request the Figma URL and node ID from the user - **Missing Web URL**: Request the local or deployed URL to compare -- **MCP Access Issues**: Clearly report any connection problems with Figma or Puppeteer MCPs +- **MCP Access Issues**: Clearly report any connection problems with Figma or Playwright MCPs - **Ambiguous Differences**: When a difference could be intentional, note it and ask for clarification - **Breaking Changes**: If a fix would require significant refactoring, document the issue and propose the safest approach - **Multiple Iterations**: After each run, suggest whether another iteration is needed based on remaining differences diff --git a/plugins/compounding-engineering/agents/workflow/bug-reproduction-validator.md b/plugins/compounding-engineering/agents/workflow/bug-reproduction-validator.md index 20f1ae5..65a417a 100644 --- a/plugins/compounding-engineering/agents/workflow/bug-reproduction-validator.md +++ b/plugins/compounding-engineering/agents/workflow/bug-reproduction-validator.md @@ -19,7 +19,7 @@ When presented with a bug report, you will: - Set up the minimal test case needed to reproduce the issue - Execute the reproduction steps methodically, documenting each step - If the bug involves data states, check fixtures or create appropriate test data - - For UI bugs, consider using Puppeteer MCP if available to visually verify + - For UI bugs, consider using Playwright MCP if available to visually verify - For backend bugs, examine logs, database states, and service interactions 3. **Validation Methodology**: diff --git a/plugins/compounding-engineering/commands/generate_command.md b/plugins/compounding-engineering/commands/generate_command.md index 46dd8fb..fc7aa7a 100644 --- a/plugins/compounding-engineering/commands/generate_command.md +++ b/plugins/compounding-engineering/commands/generate_command.md @@ -27,7 +27,7 @@ Create a new slash command in `.claude/commands/` for the requested task. **Web & APIs:** - WebFetch, WebSearch - research documentation - GitHub (gh cli) - PRs, issues, reviews -- Puppeteer - browser automation, screenshots +- Playwright - browser automation, screenshots **Integrations:** - AppSignal - logs and monitoring