design-implementation-reviewer
CommunityPixel-perfect UI implementation review
Design & Creative#ui review#design fidelity#pixel perfect#implementation check#figma comparison#css verification
Authorgvkhosla
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill ensures that the live user interface precisely matches the intended design specifications in Figma, catching visual discrepancies before they impact user experience.
Core Features & Use Cases
- Visual Fidelity Comparison: Compares implemented UI components against Figma designs.
- Discrepancy Reporting: Identifies and details differences in layout, typography, colors, spacing, and interactive states.
- Actionable Feedback: Provides specific CSS and code suggestions for corrections.
- Use Case: After a developer implements a new button component, this Skill can be used to verify that its size, color, hover state, and spacing perfectly align with the approved Figma design.
Quick Start
Use the design-implementation-reviewer skill to compare the live implementation of the hero section at 'https://example.com/hero' against its Figma design.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-implementation-reviewer Download link: https://github.com/gvkhosla/compound-engineering-pi/archive/main.zip#design-implementation-reviewer Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.