[2.1.0] Add Playwright MCP server and replace Puppeteer references

- 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 <noreply@anthropic.com>

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": {}
+    }
+  }
 }

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

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

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

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

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

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**:

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