Files
Kieran Klaassen 4b0f058f2c refactor: Reduce core to 4 commands, extract workflow-automation and plugin-dev plugins
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>
2025-12-15 17:15:12 -08:00

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

# 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