UI Verification

UI Verification

This skill provides criteria and guidelines for verifying that UI implementations match approved design specifications. It defines what to verify, severity levels, and acceptable tolerances.

When to Use

• When verifying UI implementation against approved design specifications
• When performing self-verification before code review
• When reviewing frontend changes that involve visual elements
• When determining if a difference is a bug or acceptable variance

Verification Categories

Structure (CRITICAL - never ignore)

Structure differences are automatic failures. Always verify:

Layout (CRITICAL - never ignore)

Dimensions (CRITICAL - never ignore)

CRITICAL: If a card/container in the design is narrow and centered, but implementation shows it wider or full-width, this MUST be reported.

Visual

Components

Severity Definitions

Tolerance Rules

CRITICAL: Never Guess - Always Ask

If you are unsure about ANYTHING, STOP and ask the user.

Check your available tools for a way to ask the user questions (e.g., a tool that allows user interaction or questions). Use it to get the missing information before continuing.

This skill requires comparing the actual implementation against the expected design. If you cannot reliably get either side of that comparison, you cannot do your job. Do not guess. Do not assume. Do not continue hoping it will work out.

The rule is simple:

• If something is missing → ask
• If something is broken → ask
• If something is unexpected → ask
• If you're not 100% sure you're looking at the right thing → ask

Never:

• Continue working based on assumptions
• Make up data you couldn't retrieve
• Skip steps because something didn't work
• "Work around" missing information

Pre-Verification Checklist

Before starting verification:

• Design specification available for the component/view
• Dev server is running
• Page fully loaded (no skeleton states)
• Correct viewport size set

Structure Verification Checklist

Before reporting PASS, verify:

• Verified ENTIRE page (scrolled from top to bottom)
• All sections from the design are present in implementation
• Container hierarchy matches design layers
• Flex/grid direction is correct
• Alignment (justify/align) matches design
• Element order matches design
• No extra wrapper elements that change layout
• No missing container elements
• Spacing between elements matches design

Common Mistakes to Catch

Verification Report Format

## Verification Result: [PASS | FAIL]

### Component: [name]

**Confidence:** [HIGH | MEDIUM | LOW]

- HIGH: Both tools returned complete data, comparison is reliable
- MEDIUM: Some values could not be extracted, manual review recommended
- LOW: Tool errors occurred, treat as incomplete verification

### Structural Issues (CRITICAL)

| Issue   | Expected (Design Spec) | Actual (Implementation) |
| ------- | ---------------- | ----------------------- |
| [issue] | [expected]       | [actual]                |

### Dimension/Visual Differences

**Differences found:** [count]

| Property | Expected (Design Spec) | Actual (Implementation) | Severity               |
| -------- | ---------------- | ----------------------- | ---------------------- |
| [prop]   | [expected]       | [actual]                | [Critical/Major/Minor] |

### Recommended Fixes

- [specific fix with exact values]

Confidence Levels

Connected Skills

• frontend-implementation - for implementing fixes following design system patterns
• technical-context-discovery - for understanding project's design token conventions