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

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