Agent Skills: design-implementation-reviewer

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 butto...

ID: ratacat/claude-skills/design-implementation-reviewer

Install this agent skill to your local

npx skills add ratacat/claude-skills --skill design-implementation-reviewer

Skill Files

The files that make up design-implementation-reviewer.

Download Skill

More agent skills