mirror of
https://github.com/EveryInc/compound-engineering-plugin.git
synced 2026-09-27 17:01:59 +02:00
Kieran KlaassenandClaude Opus 4.5
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>
71 lines
1.6 KiB
Markdown
71 lines
1.6 KiB
Markdown
# frontend-design
|
|
|
|
Design implementation, iteration, and Figma sync.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
# 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 designs
|
|
- `design-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:
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
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 |
|