Skills
.Work. You
Rest

visual-reviewer

Community

Ensure pixel-perfect UI matches design.

Software Engineering#design system#figma#ui review#visual testing#storybook#component validation
Authorkaelig
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill guarantees that the rendered UI components precisely match their design specifications, eliminating visual discrepancies and ensuring a high-quality user experience.

Core Features & Use Cases

  • Automated Visual Comparison: Compares screenshots of rendered components against design mockups across critical visual dimensions.
  • Iterative Fixes: Identifies and suggests targeted code modifications to resolve discrepancies.
  • Use Case: After a new button component is developed, this Skill automatically verifies its alignment, colors, typography, and spacing against the Figma design, flagging any deviations for immediate correction.

Quick Start

Verify the visual accuracy of the 'Button' component against its Figma design.

Dependency Matrix

Required Modules

None required

Components

references

💻 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: visual-reviewer
Download link: https://github.com/kaelig/react-craft/archive/main.zip#visual-reviewer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.