john/claude-engineering-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix YAML parsing errors in agent description fields (#74)

Browse Source
This commit is contained in:
CodePoet
2026-01-10 00:40:33 +09:00
committed by GitHub
parent 60b06424e7
commit fe3f19f220
26 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/compound-engineering/agents/design/design-implementation-reviewer.md
View File

@@ -1,6 +1,6 @@
---
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>
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: inherit
---

2
plugins/compound-engineering/agents/design/design-iterator.md
View File

@@ -1,6 +1,6 @@
---
name: design-iterator
description: Use this agent PROACTIVELY when design work isn't coming together on the first attempt. If you've made 1-2 design changes and the result still feels off, suggest using this agent with 5x or 10x iterations for deeper refinement. This agent takes screenshots, analyzes what's not working, implements improvements, and repeats N times to systematically fix design issues. Perfect when colors feel wrong, layouts aren't balanced, or the overall aesthetic needs work that single changes can't achieve. <example>Context: User asks to change button color but result still looks off. user: "Change the button to blue" assistant: [makes change, takes screenshot] "The button is now blue, but I notice the overall color balance still feels off. Would you like me to use the design-iterator agent with 5 iterations to systematically improve the color harmony and visual balance?" <commentary>PROACTIVE USE: After a simple change doesn't fully resolve the design issue, suggest the design-iterator to do deeper work.</commentary></example> <example>Context: User's design request leads to something that doesn't look right. user: "Make the hero section more modern" assistant: [makes initial changes] "I've added some modern elements, but the result isn't quite coming together. This looks like it needs iterative refinement. Let me use the design-iterator agent with 10 iterations to systematically improve typography, spacing, colors, and visual hierarchy until it feels polished." <commentary>PROACTIVE USE: When initial design work produces mediocre results, automatically suggest or use the design-iterator for comprehensive improvement.</commentary></example> <example>Context: User wants explicit iterative refinement. user: "The features section looks boring, iterate on it 10 times" assistant: "I'll use the design-iterator agent to systematically refine your features section through 10 iterations of visual improvements" <commentary>User explicitly requests iteration, use design-iterator directly.</commentary></example> <example>Context: Design task requires research and multiple passes. user: "Look at how Stripe does their pricing page and make mine better" assistant: "I'll launch the design-iterator agent with 8 iterations to research Stripe's design patterns and progressively apply those insights to your pricing page" <commentary>Competitor research combined with iterative refinement benefits from the systematic approach.</commentary></example>
description: "Use this agent PROACTIVELY when design work isn't coming together on the first attempt. If you've made 1-2 design changes and the result still feels off, suggest using this agent with 5x or 10x iterations for deeper refinement. This agent takes screenshots, analyzes what's not working, implements improvements, and repeats N times to systematically fix design issues. Perfect when colors feel wrong, layouts aren't balanced, or the overall aesthetic needs work that single changes can't achieve. <example>Context: User asks to change button color but result still looks off. user: \"Change the button to blue\" assistant: [makes change, takes screenshot] \"The button is now blue, but I notice the overall color balance still feels off. Would you like me to use the design-iterator agent with 5 iterations to systematically improve the color harmony and visual balance?\" <commentary>PROACTIVE USE: After a simple change doesn't fully resolve the design issue, suggest the design-iterator to do deeper work.</commentary></example> <example>Context: User's design request leads to something that doesn't look right. user: \"Make the hero section more modern\" assistant: [makes initial changes] \"I've added some modern elements, but the result isn't quite coming together. This looks like it needs iterative refinement. Let me use the design-iterator agent with 10 iterations to systematically improve typography, spacing, colors, and visual hierarchy until it feels polished.\" <commentary>PROACTIVE USE: When initial design work produces mediocre results, automatically suggest or use the design-iterator for comprehensive improvement.</commentary></example> <example>Context: User wants explicit iterative refinement. user: \"The features section looks boring, iterate on it 10 times\" assistant: \"I'll use the design-iterator agent to systematically refine your features section through 10 iterations of visual improvements\" <commentary>User explicitly requests iteration, use design-iterator directly.</commentary></example> <example>Context: Design task requires research and multiple passes. user: \"Look at how Stripe does their pricing page and make mine better\" assistant: \"I'll launch the design-iterator agent with 8 iterations to research Stripe's design patterns and progressively apply those insights to your pricing page\" <commentary>Competitor research combined with iterative refinement benefits from the systematic approach.</commentary></example>"
color: violet
model: inherit
---

2
plugins/compound-engineering/agents/design/figma-design-sync.md
View File

@@ -1,6 +1,6 @@
---
name: figma-design-sync
description: Use this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences. This agent should be used iteratively until the implementation matches the design.\n\n<example>\nContext: User has just implemented a new component and wants to ensure it matches the Figma design.\nuser: "I've just finished implementing the hero section component. Can you check if it matches the Figma design at https://figma.com/file/abc123/design?node-id=45:678"\nassistant: "I'll use the figma-design-sync agent to compare your implementation with the Figma design and fix any differences."\n<uses Task tool to launch figma-design-sync agent with the Figma URL and local URL>\n</example>\n\n<example>\nContext: User is working on responsive design and wants to verify mobile breakpoint matches design.\nuser: "The mobile view doesn't look quite right. Here's the Figma: https://figma.com/file/xyz789/mobile?node-id=12:34"\nassistant: "Let me use the figma-design-sync agent to identify the differences and fix them."\n<uses Task tool to launch figma-design-sync agent>\n</example>\n\n<example>\nContext: After initial fixes, user wants to verify the implementation now matches.\nuser: "Can you check if the button component matches the design now?"\nassistant: "I'll run the figma-design-sync agent again to verify the implementation matches the Figma design."\n<uses Task tool to launch figma-design-sync agent for verification>\n</example>\n\n<example>\nContext: User mentions design inconsistencies proactively during development.\nuser: "I'm working on the navigation bar but I'm not sure if the spacing is right."\nassistant: "Let me use the figma-design-sync agent to compare your implementation with the Figma design and identify any spacing or other visual differences."\n<uses Task tool to launch figma-design-sync agent>\n</example>
description: "Use this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences. This agent should be used iteratively until the implementation matches the design.\\n\\n<example>\\nContext: User has just implemented a new component and wants to ensure it matches the Figma design.\\nuser: \\\"I've just finished implementing the hero section component. Can you check if it matches the Figma design at https://figma.com/file/abc123/design?node-id=45:678\\\"\\nassistant: \\\"I'll use the figma-design-sync agent to compare your implementation with the Figma design and fix any differences.\\\"\\n<uses Task tool to launch figma-design-sync agent with the Figma URL and local URL>\\n</example>\\n\\n<example>\\nContext: User is working on responsive design and wants to verify mobile breakpoint matches design.\\nuser: \\\"The mobile view doesn't look quite right. Here's the Figma: https://figma.com/file/xyz789/mobile?node-id=12:34\\\"\\nassistant: \\\"Let me use the figma-design-sync agent to identify the differences and fix them.\\\"\\n<uses Task tool to launch figma-design-sync agent>\\n</example>\\n\\n<example>\\nContext: After initial fixes, user wants to verify the implementation now matches.\\nuser: \\\"Can you check if the button component matches the design now?\\\"\\nassistant: \\\"I'll run the figma-design-sync agent again to verify the implementation matches the Figma design.\\\"\\n<uses Task tool to launch figma-design-sync agent for verification>\\n</example>\\n\\n<example>\\nContext: User mentions design inconsistencies proactively during development.\\nuser: \\\"I'm working on the navigation bar but I'm not sure if the spacing is right.\\\"\\nassistant: \\\"Let me use the figma-design-sync agent to compare your implementation with the Figma design and identify any spacing or other visual differences.\\\"\\n<uses Task tool to launch figma-design-sync agent>\\n</example>"
model: inherit
color: purple
---