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