Verified:GitHub

verify-ui

Verify UI implementation against Figma designs and GitHub ticket requirements.

Updated Feb 2, 2026

Search Tags:#visual regression #ui verification #responsive testing #figma comparison #acceptance criteria testing #ticket validation

Ready to run

npx skills add https://github.com/HuynhLy230296/cursor-agent --skill verify-ui-huynhly230296

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: verify-ui
Source: https://github.com/HuynhLy230296/cursor-agent/tree/main/.cursor/skills/verify-ui
Command: npx skills add https://github.com/HuynhLy230296/cursor-agent --skill verify-ui-huynhly230296

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill bridges the gap between design and implementation, ensuring that user interfaces accurately reflect Figma designs and meet ticket requirements, preventing visual bugs and inconsistencies.

Core Features & Use Cases

Figma-to-App Verification: Compares live UI elements against Figma designs for pixel-perfect accuracy, including layout, colors, typography, and states.
Ticket-Based Testing: Derives test cases from GitHub issue acceptance criteria and reproduction steps to validate implementation.
Use Case: After a developer implements a new feature based on a Figma design, use this Skill to verify that the implemented UI matches the design precisely, including how it looks and behaves on both desktop and mobile.

Quick Start

Use the verify-ui skill to check if the latest UI changes on the homepage match the provided Figma design.

Frequently Asked Questions about verify-ui

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

FAQPage Schema

How do I verify my UI implementation matches Figma designs?▼

To verify UI implementation against Figma designs, compare live UI elements for pixel-perfect accuracy in layout, colors, typography, and states. This visual regression process ensures implemented interfaces precisely reflect design requirements across breakpoints.

Can I derive test cases from GitHub ticket acceptance criteria?▼

Yes, you can derive test cases from GitHub ticket acceptance criteria and reproduction steps. This ticket-driven validation workflow checks state correctness and responsive behavior to confirm the implementation meets the defined requirements.

Does visual regression testing work for responsive behavior across breakpoints?▼

Visual regression testing supports responsive testing across breakpoints by verifying UI state correctness on both desktop and mobile. It ensures the implemented UI maintains visual accuracy and proper behavior regardless of screen dimensions.

What do I need to perform Figma comparison and ticket validation?▼

To perform Figma comparison and ticket validation, you need browser interaction tools to inspect live UI elements and Figma context retrieval to access design specifications. These tools enable automated visual verification workflows.

When should I skip design system elements during UI verification?▼

You should skip design system elements during UI verification to focus exclusively on custom work and new components. This targeted visual regression approach prevents redundant checks on established, pre-verified UI elements.

What is the best way to prevent visual bugs between design and implementation?▼

The best way to prevent visual bugs between design and implementation is running visual regression checks after feature development. This bridges the gap by validating visual accuracy and state correctness against Figma designs and ticket requirements.