Use when comparing a frontend implementation against a reference design (Figma, mockup, screenshot). Performs pixel-level and structural analysis to identify discrepancies.
/plugin marketplace add manashmandal/claude-skills/plugin install manashmandal-skillcraft@manashmandal/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Compare your frontend implementation against a reference design to identify visual discrepancies, spacing inconsistencies, and structural mismatches.
Core principle: Every pixel matters. Systematic comparison reveals what eyeballing misses.
Use this skill when:
Announce: "I'll compare your implementation against the reference design using design-compare."
Obtain reference design
Capture implementation
Compare these elements systematically:
| Element | Check For |
|---|---|
| Layout | Grid alignment, container widths, flex/grid structure |
| Spacing | Margins, padding, gaps between elements |
| Typography | Font family, size, weight, line-height, letter-spacing |
| Colors | Background, text, borders, shadows |
| Components | Button styles, inputs, cards, icons |
| Hierarchy | Visual weight, heading levels, emphasis |
| Responsive | Breakpoint behavior if applicable |
Output format:
## Design Comparison Report
### Match Score: [X/10]
### Critical Discrepancies (Must Fix)
- [ ] Issue description | Location | Reference vs Implementation
### Minor Discrepancies (Should Fix)
- [ ] Issue description | Location | Reference vs Implementation
### Acceptable Variations
- Variation description | Reason acceptable
### Pixel-Perfect Elements
- Element that matches exactly
| Issue | Impact | Typical Cause |
|---|---|---|
| Inconsistent spacing | High | Missing design tokens |
| Wrong font weight | Medium | Default browser styles |
| Color off by shade | Low | Color space conversion |
| Different line-height | High | Framework defaults |
| Misaligned icons | Medium | Baseline alignment issues |
| Border radius mismatch | Low | Hardcoded values |
After comparison, offer:
Stop and clarify if:
Related skills:
design-audit - For identifying issues without referencedesign-report - For comprehensive expert analysisThis skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.