skills.rest
ImL1s
ImL1sCOMMUNITY
Explore all skills by this author →
Website𝕏@l1s_aiGitHub

verify-ui-auto

Compare Flutter screenshots against Figma references using pixel-diff and auto-fix iterations.

6|Updated Apr 23, 2026
Search Tags:#automation#figma#ui-testing#flutter#pixel-diff#visual-verification#golden-tests
One-click install
npx skills add https://github.com/ImL1s/flutter-claude-skills --skill verify-ui-auto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: verify-ui-auto
Source: https://github.com/ImL1s/flutter-claude-skills/tree/main/skills/verify-ui-auto
Command: npx skills add https://github.com/ImL1s/flutter-claude-skills --skill verify-ui-auto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automated UI verification loop: Marionette screenshot -> Figma reference -> pixel-diff -> difference list -> auto-fix iteration. Solves the false-positive verification problem flagged in insights reports (UI claimed fixed without actually being compared against the reference).

Core Features & Use Cases

  • Automated visual regression testing across design-to-code pipelines (Figma reference comparison, pixel-diff, and auto-fix iterations).
  • Supports multiple paths: Flutter golden tests, ImageMagick diff, and cloud/testing services, to fit CI workflows.
  • Use Case: When a UI change is introduced, automatically verify it against a reference, list diffs, apply fixes, and re-verify until PASS.

Quick Start

Run the automated UI verification loop against the current app and its Figma reference, then iterate using pixel-diff results until the UI passes.

Frequently Asked Questions about verify-ui-auto

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

FAQPage Schema
How do I automate visual regression testing against a Figma reference?▼

You can automate visual regression testing by capturing screenshots, comparing them to a Figma reference using pixel-diff, and applying iterative auto-fixes until the UI passes. This loop ensures actual pixel-level verification against the design.

Can I use Flutter golden tests with Figma MCP references?▼

Yes, Flutter golden tests can be used with Figma MCP references. The automation loop captures screenshots from your Flutter app, compares them against the Figma design using pixel-diff, and iterates corrections until the golden test passes.

What do I need to set up automated UI pixel-diff verification?▼

Automated UI pixel-diff verification requires a configured Flutter development environment, access to Figma MCP references for design extraction, and testing tooling like alchemist or golden_test to execute the regression testing workflow.

What is the best way to handle false-positive UI verification claims?▼

The best way to handle false-positive UI verification is running an end-to-end visual verification loop. This captures screenshots, extracts Figma references, performs pixel-diff comparisons, lists differences, and applies auto-fix iterations to ensure the UI actually matches.

Does automated visual verification support ImageMagick diff for CI workflows?▼

Yes, automated visual verification supports ImageMagick diff and cloud testing services to fit CI workflows. It applies multiple paths including Flutter golden tests and pixel-diff comparisons to integrate seamlessly into continuous integration pipelines.

Related Skills

Explore More Software Engineering Skills→
telum-aitelum-ai
2

visual-testing-mobile-flutter

Automate Flutter visual regression testing with Golden Tests, Alchemist, and Fastlane.

Official
Intermediate
dotnetdotnet
23.3k

verify-tests-fail-without-fix

Automate MAUI UI test verification in CI workflows using PowerShell and Git.

Official
Advanced
guilhermemarketingguilhermemarketing
59

figma-implement-design

Translate Figma designs into production-ready UI code with design-token mapping.

Community
Advanced
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate