ui visual consistency checker

The problem

UI drift happens when multiple developers build features without strict token adherence, leading to fragmented spacing, inconsistent typography, and "magic" hex codes. Manual visual QA is slow, subjective, and often misses subtle variations in component states or alignment logic.

What it does

• Analyzes screenshots, HTML, and CSS to inventory visual primitives like colors, font scales, and spacing intervals.
• Distinguishes between intentional hierarchy and accidental inconsistency across components.
• Clusters typography and color roles to infer candidate design tokens for normalization.
• Generates prioritized visual QA checklists based on evidence confidence and implementation effort.
• Audits alignment, container logic, and component anatomy for systemic drift.

Why this beats prompting it yourself

Generic prompts often hallucinate design facts or recommend "fixing" intentional state changes, like hover or disabled styles. This skill uses a structured decision model to separate raw primitives from semantic roles, ensuring recommendations don't break functional hierarchy or accessibility.

Use cases

• Reviewing a new feature implementation against existing design system references.
• Auditing a legacy codebase to extract a baseline set of design tokens.
• Performing a visual regression check after a major CSS refactor or framework migration.
• Preparing a developer handoff audit to ensure component consistency before a release.

Known limitations

Cannot prove runtime interaction behavior, browser-specific rendering bugs, or screen-reader accessibility from static screenshots alone. Requires clear source-of-truth constraints for high-confidence audits.