← ClaudeAtlas

ui-consistency-checklisted

Runs a structured visual/UI design-system consistency check across a project's web and/or mobile frontend — design token usage (colors, spacing, typography scale, border-radius, shadows) sourced from a single system rather than hardcoded per component, component reuse vs. visually inconsistent duplicate implementations (buttons, modals, form fields, cards, badges), typography and font-family consistency, spacing/layout-grid and responsive-breakpoint consistency, semantic color and dark-mode/theme-token consistency, interaction-state (hover/focus/active/disabled) and iconography consistency, design-system-to-code drift (Storybook/Figma/style-guide vs. shipped implementation), cross-platform (web/iOS/Android) token consistency, motion/animation timing consistency, and empty/loading/error-state pattern consistency — then reports the results as one table (check, area, status, evidence, recommendation). Explicitly does not cover color-contrast ratios, focus-indicator visibility, or other accessibility-specific vis
finnley07/AI-SKILLHUB · ★ 0 · Web & Frontend · score 72
Install: claude install-skill finnley07/AI-SKILLHUB
# UI Consistency Check A structured, evidence-based check of a project's visual design against its own design system — does the shipped UI actually look and behave like one coherent product, or has it drifted into a patchwork of near-duplicate components, one-off magic values, and per-screen reinventions of the same pattern. This is a **visual/UX consistency** review — the question throughout is "would a user browsing multiple screens notice this looks/feels inconsistent," not "is this code clean." It is a peer to two other skills and deliberately does not re-cover their ground: - **accessibility-check** owns color-contrast ratios, focus-indicator visibility, and every other accessibility-specific visual requirement. If a color/contrast issue surfaces while you're looking at semantic color usage here, note that it exists in one line and point the user at `accessibility-check` rather than computing a contrast ratio here. - **code-review** / **architecture-review** own code-level duplication and maintainability — is the *implementation* of two similar components copy-pasted, hard to change safely, badly factored. This skill's lane is the parallel but distinct problem: two independently-built versions of "the same" UI element that render *differently* (different padding, corner radius, color, font) so a user perceives the product as inconsistent, even if the underlying code were perfectly clean. When a finding could be filed either way (e.g. a duplicated Button