ImL1s UI Verification
Strict verification flow for comparing Flutter UI against Figma or reference designs on real devices. This exists because Claude has a pattern of guessing at UI changes and claiming they match when they don't — this skill forces actual evidence-based comparison.
Before any UI change
- Confirm branch: Run
git branch --show-current— do NOT proceed if on the wrong branch - Get the reference: Load the Figma design (via Figma MCP
get_design_context) or reference screenshot the user provides - Screenshot current state: Take a device screenshot using Mobile MCP or Dart MCP
Making changes
- List every difference between current state and reference — be specific: padding values, colors, font sizes, alignment, element positions
- Fix ALL differences in one pass — do not fix one thing and declare success
- Build and deploy to the target device
After changes
- Screenshot the result on device
- Compare side-by-side against the reference — go through each difference from step 4 and confirm it's resolved
- Only declare done when every difference is addressed and you have screenshot evidence
Rules
- Never say "this should match" — confirm it DOES match with a screenshot
- Never guess at spacing, colors, or sizes — measure from the reference
- If you can't tell from the screenshot, say so — don't fake confidence
- If the user says it doesn't match, they're right — look again more carefully
Related skills
verify-ui-auto— DISAMBIGUATION: verify-ui is manual screenshot comparison and iteration. verify-ui-auto is automated golden-file visual regression testing. Use verify-ui for initial implementation verification; use verify-ui-auto for CI-based regression prevention.visual-verdict— JSON-structured verdict format for screenshot-to-reference comparison output. Use as the output spec whenverify-ui/verify-ui-autoproduce verdicts consumed by downstream tooling.