mirror of
https://github.com/EveryInc/compound-engineering-plugin.git
synced 2026-06-19 15:41:46 +02:00
4b0f058f2c
Based on PR feedback that 14 commands in core was too many: - **compound-engineering-core** (14 agents, 4 commands, 5 skills) - Only 4 workflow commands: /workflows:plan, /workflows:review, /workflows:work, /workflows:compound - All code review agents stay in core (referenced by /workflows:review) - **workflow-automation** (3 agents, 7 commands, 1 skill) - NEW - /resolve_pr_parallel, /plan_review, /resolve_parallel, /resolve_todo_parallel - /reproduce-bug, /triage, /changelog - bug-reproduction-validator, pr-comment-resolver, every-style-editor agents - **plugin-dev** (3 commands, 2 skills) - NEW - /generate_command, /heal-skill, /create-agent-skill - skill-creator, create-agent-skills skills All READMEs updated with "Works Best With" philosophy emphasizing that core provides the foundation but real power comes from combining plugins. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1.6 KiB
1.6 KiB
frontend-design
Design implementation, iteration, and Figma sync.
Installation
# Install with core (recommended)
claude /plugin install compound-engineering-core frontend-design
# Full frontend stack
claude /plugin install compound-engineering-core typescript-dev frontend-design workflow-automation
What's Included
Agents (3)
figma-design-sync- Sync implementation with Figma designsdesign-iterator- Iterative design improvement (5x, 10x iterations)design-implementation-reviewer- Review design implementation accuracy
Skills (1)
frontend-design- Frontend design patterns and best practices
MCP Servers
- playwright - Browser automation for screenshots and visual comparison
Usage
Figma Sync
Compare your implementation with a Figma design:
# Claude will take screenshots and compare with Figma
claude "Sync this component with the Figma design at [figma-url]"
Design Iteration
When design isn't coming together, use iterative refinement:
# Run 10 iterations of design improvement
claude "Iterate on the hero section 10 times to improve the visual balance"
Design Review
After implementing a design, verify it matches specs:
claude "Review if this implementation matches the Figma design"
Requirements
- Node.js (for Playwright MCP)
- Playwright is installed automatically via
npx
Works Best With
| Plugin | Why |
|---|---|
compound-engineering-core |
Base workflow |
typescript-dev |
TypeScript/JS review for frontend code |
workflow-automation |
Batch operations |