john/claude-engineering-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[2.1.0] Add Playwright MCP server and replace Puppeteer references

Browse Source 
- 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>
This commit is contained in:
Kieran Klaassen
2025-11-24 14:02:07 -08:00
parent 5a7bcc5afb
commit bd4a659f35
8 changed files with 51 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/compounding-engineering/agents/design/design-implementation-reviewer.md
View File

@@ -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

2
plugins/compounding-engineering/agents/design/design-iterator.md
View File

@@ -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

4
plugins/compounding-engineering/agents/design/figma-design-sync.md
View File

@@ -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