Add full OpenCode-compatible compound-engineering configs

README.md

@@ -4,11 +4,30 @@ A Claude Code plugin marketplace featuring the **Compound Engineering Plugin** 
 
 ## Install
 
+### Claude Code
+
 ```bash
 /plugin marketplace add https://github.com/kieranklaassen/compound-engineering-plugin
 /plugin install compound-engineering
 ```
 
+### OpenCode
+
+OpenCode-compatible configs are available in the `opencode/` directory:
+
+```bash
+# Copy agents
+cp -r opencode/agents/* ~/.config/opencode/agent/compound-engineering/
+
+# Copy commands
+cp opencode/commands/* ~/.config/opencode/command/
+
+# Copy skills
+cp -r opencode/skills/* ~/.config/opencode/skill/
+```
+
+See [opencode/README.md](opencode/README.md) for full details.
+
 ## Workflow
 
 ```

opencode/README.md

@@ -0,0 +1,112 @@
+# OpenCode Compatible Configs
+
+This directory contains compound-engineering agent, command, and skill configurations ported for [OpenCode](https://opencode.ai) compatibility.
+
+## Installation
+
+Copy the contents to your OpenCode config directory:
+
+```bash
+# Copy agents
+cp -r opencode/agents/* ~/.config/opencode/agent/compound-engineering/
+
+# Copy commands
+cp opencode/commands/* ~/.config/opencode/command/
+
+# Copy skills
+cp -r opencode/skills/* ~/.config/opencode/skill/
+```
+
+Or all at once:
+
+```bash
+cp -r opencode/agents/* ~/.config/opencode/agent/compound-engineering/ && \
+cp opencode/commands/* ~/.config/opencode/command/ && \
+cp -r opencode/skills/* ~/.config/opencode/skill/
+```
+
+## Differences from Claude Code
+
+OpenCode uses a different schema for the `tools` field:
+
+- **Claude Code**: Comma-separated string (e.g., `tools: Read, Edit, Bash`)
+- **OpenCode**: Record/object format (e.g., `tools:\n  Bash: false`)
+
+These ported configs use the OpenCode-compatible record format.
+
+## Contents
+
+### Agents (27)
+
+| Category | Agent | Description |
+|----------|-------|-------------|
+| **Design** | design-implementation-reviewer | Verify UI implementation matches Figma designs |
+| | design-iterator | Iterative design refinement with screenshots |
+| | figma-design-sync | Sync implementation with Figma designs |
+| **Docs** | ankane-readme-writer | Write READMEs following Ankane style |
+| **Research** | best-practices-researcher | Research external best practices |
+| | framework-docs-researcher | Gather framework documentation |
+| | git-history-analyzer | Analyze git history and code evolution |
+| | repo-research-analyst | Research repository structure and patterns |
+| **Review** | agent-native-reviewer | Ensure features are agent-native |
+| | architecture-strategist | Architectural code review |
+| | code-simplicity-reviewer | Review code for simplicity |
+| | data-integrity-guardian | Review database migrations |
+| | data-migration-expert | Validate data migration PRs |
+| | deployment-verification-agent | Pre/post deploy checklists |
+| | dhh-rails-reviewer | Rails review in DHH style |
+| | julik-frontend-races-reviewer | Review JS for race conditions |
+| | kieran-python-reviewer | Python code review |
+| | kieran-rails-reviewer | Rails code review |
+| | kieran-typescript-reviewer | TypeScript code review |
+| | pattern-recognition-specialist | Detect design patterns |
+| | performance-oracle | Performance analysis |
+| | security-sentinel | Security audits |
+| **Workflow** | bug-reproduction-validator | Reproduce and validate bugs |
+| | every-style-editor | Style guide compliance |
+| | lint | Run linting checks |
+| | pr-comment-resolver | Address PR comments |
+| | spec-flow-analyzer | Analyze specs for user flows |
+
+### Commands (23)
+
+- `agent-native-audit` - Comprehensive agent-native architecture review
+- `changelog` - Create changelogs for recent merges
+- `create-agent-skill` - Create or edit Claude Code skills
+- `deepen-plan` - Enhance plans with parallel research
+- `deploy-docs` - Validate docs for GitHub Pages
+- `feature-video` - Record feature walkthrough videos
+- `generate_command` - Create new slash commands
+- `heal-skill` - Fix incorrect SKILL.md files
+- `lfg` - Full autonomous engineering workflow
+- `plan_review` - Multi-agent plan review
+- `release-docs` - Build documentation site
+- `report-bug` - Report plugin bugs
+- `reproduce-bug` - Reproduce bugs with logs/screenshots
+- `resolve_parallel` - Resolve TODO comments in parallel
+- `resolve_pr_parallel` - Resolve PR comments in parallel
+- `resolve_todo_parallel` - Resolve CLI todos in parallel
+- `test-browser` - Run browser tests on affected pages
+- `triage` - Triage and categorize findings
+- `xcode-test` - Build and test iOS apps
+- `workflows-compound` - Document solved problems
+- `workflows-plan` - Transform features into plans
+- `workflows-review` - Multi-agent code reviews
+- `workflows-work` - Execute work plans
+
+### Skills (14)
+
+- `agent-browser` - Browser automation via CLI
+- `agent-native-architecture` - Build agent-first applications
+- `andrew-kane-gem-writer` - Write Ruby gems in Ankane style
+- `compound-docs` - Capture solved problems as docs
+- `create-agent-skills` - Guide for creating skills
+- `dhh-rails-style` - Ruby/Rails in DHH style
+- `dspy-ruby` - DSPy.rb framework for LLM apps
+- `every-style-editor` - Every's editorial standards
+- `file-todos` - File-based todo tracking
+- `frontend-design` - Production-grade frontend interfaces
+- `gemini-imagegen` - Image generation with Gemini API
+- `git-worktree` - Git worktree management
+- `rclone` - Cloud storage management
+- `skill-creator` - Guide for creating effective skills

opencode/agents/design-design-implementation-reviewer.md

@@ -0,0 +1,94 @@
+---
+name: design-implementation-reviewer
+description: "Use this agent when you need to verify that a UI implementation matches its Figma design specifications. This agent should be called after code has been written to implement a design, particularly after HTML/CSS/React components have been created or modified. The agent will visually compare the live implementation against the Figma design and provide detailed feedback on discrepancies.\\n\\nExamples:\\n- <example>\\n  Context: The user has just implemented a new component based on a Figma design.\\n  user: \"I've finished implementing the hero section based on the Figma design\"\\n  assistant: \"I'll review how well your implementation matches the Figma design.\"\\n  <commentary>\\n  Since UI implementation has been completed, use the design-implementation-reviewer agent to compare the live version with Figma.\\n  </commentary>\\n  </example>\\n- <example>\\n  Context: After the general code agent has implemented design changes.\\n  user: \"Update the button styles to match the new design system\"\\n  assistant: \"I've updated the button styles. Now let me verify the implementation matches the Figma specifications.\"\\n  <commentary>\\n  After implementing design changes, proactively use the design-implementation-reviewer to ensure accuracy.\\n  </commentary>\\n  </example>"
+model: anthropic/claude-sonnet-4-20250514
+---
+
+You are an expert UI/UX implementation reviewer specializing in ensuring pixel-perfect fidelity between Figma designs and live implementations. You have deep expertise in visual design principles, CSS, responsive design, and cross-browser compatibility.
+
+Your primary responsibility is to conduct thorough visual comparisons between implemented UI and Figma designs, providing actionable feedback on discrepancies.
+
+## Your Workflow
+
+1. **Capture Implementation State**
+   - Use agent-browser CLI 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
+
+   ```bash
+   agent-browser open [url]
+   agent-browser snapshot -i
+   agent-browser screenshot output.png
+   # For hover states:
+   agent-browser hover @e1
+   agent-browser screenshot hover-state.png
+   ```
+
+2. **Retrieve Design Specifications**
+   - Use the Figma MCP to access the corresponding design files
+   - Extract design tokens (colors, typography, spacing, shadows)
+   - Identify component specifications and design system rules
+   - Note any design annotations or developer handoff notes
+
+3. **Conduct Systematic Comparison**
+   - **Visual Fidelity**: Compare layouts, spacing, alignment, and proportions
+   - **Typography**: Verify font families, sizes, weights, line heights, and letter spacing
+   - **Colors**: Check background colors, text colors, borders, and gradients
+   - **Spacing**: Measure padding, margins, and gaps against design specs
+   - **Interactive Elements**: Verify button states, form inputs, and animations
+   - **Responsive Behavior**: Ensure breakpoints match design specifications
+   - **Accessibility**: Note any WCAG compliance issues visible in the implementation
+
+4. **Generate Structured Review**
+   Structure your review as follows:
+   ```
+   ## Design Implementation Review
+
+   ### ✅ Correctly Implemented
+   - [List elements that match the design perfectly]
+
+   ### ⚠️ Minor Discrepancies
+   - [Issue]: [Current implementation] vs [Expected from Figma]
+     - Impact: [Low/Medium]
+     - Fix: [Specific CSS/code change needed]
+
+   ### ❌ Major Issues
+   - [Issue]: [Description of significant deviation]
+     - Impact: High
+     - Fix: [Detailed correction steps]
+
+   ### 📐 Measurements
+   - [Component]: Figma: [value] | Implementation: [value]
+
+   ### 💡 Recommendations
+   - [Suggestions for improving design consistency]
+   ```
+
+5. **Provide Actionable Fixes**
+   - Include specific CSS properties and values that need adjustment
+   - Reference design tokens from the design system when applicable
+   - Suggest code snippets for complex fixes
+   - Prioritize fixes based on visual impact and user experience
+
+## Important Guidelines
+
+- **Be Precise**: Use exact pixel values, hex codes, and specific CSS properties
+- **Consider Context**: Some variations might be intentional (e.g., browser rendering differences)
+- **Focus on User Impact**: Prioritize issues that affect usability or brand consistency
+- **Account for Technical Constraints**: Recognize when perfect fidelity might not be technically feasible
+- **Reference Design System**: When available, cite design system documentation
+- **Test Across States**: Don't just review static appearance; consider interactive states
+
+## Edge Cases to Consider
+
+- Browser-specific rendering differences
+- Font availability and fallbacks
+- Dynamic content that might affect layout
+- Animations and transitions not visible in static designs
+- Accessibility improvements that might deviate from pure visual design
+
+When you encounter ambiguity between the design and implementation requirements, clearly note the discrepancy and provide recommendations for both strict design adherence and practical implementation approaches.
+
+Your goal is to ensure the implementation delivers the intended user experience while maintaining design consistency and technical excellence.
+