skills.rest
kaelig
kaeligCOMMUNITY
Explore all skills by this author →
Website𝕏@kaeligGitHub

visual-reviewer

Compare rendered UI components against Figma design mockups across nine visual dimensions.

7|Updated Mar 11, 2026
Search Tags:#design system#figma#ui review#visual testing#storybook#component validation
One-click install
npx skills add https://github.com/kaelig/react-craft --skill visual-reviewer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-reviewer
Source: https://github.com/kaelig/react-craft/tree/main/react-craft/skills/visual-reviewer
Command: npx skills add https://github.com/kaelig/react-craft --skill visual-reviewer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about visual-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I compare rendered UI components against Figma design mockups?▼

To compare rendered UI components against Figma design mockups, this Skill automates screenshot comparisons across nine visual dimensions including layout, typography, colors, and spacing to identify deviations.

Do I need Storybook and Figma environments to run automated visual testing?▼

Yes, you need access to both Figma and Storybook environments to run automated visual testing, as these platforms provide the design mockups and rendered components required for accurate validation.

Can I automatically fix CSS discrepancies found during a UI review?▼

Yes, you can automatically fix CSS discrepancies found during a UI review, as the Skill applies iterative fixes for critical and moderate deviations using targeted CSS adjustments.

What visual dimensions are checked during component validation?▼

During component validation, the visual dimensions checked include layout, typography, colors, spacing, shadows, borders, border-radius, icons, and states to ensure pixel-perfect UI matches.

What's the best way to ensure pixel-perfect UI matches a design system?▼

The best way to ensure pixel-perfect UI matches a design system is by automating screenshot comparisons against design mockups and applying iterative targeted code modifications to resolve visual discrepancies.

Related Skills

Explore More Software Engineering Skills→
CJ-1981CJ-1981

moai-design-tools

Fetch Figma design context and export Pencil designs to React and Tailwind CSS code.

Community
Advanced
Andreicr1Andreicr1

figma-design-sync

Identify and fix visual discrepancies between web implementations and Figma designs.

Community
Advanced
modu-aimodu-ai
4

agency-design-system

Create brand-aligned design tokens, typography, layout rules, and component specs.

Official
Advanced
zinohomezinohome
1

visual-regression-tester

Capture and compare UI screenshots with Playwright and Chromatic.

Community
Advanced