What problem does it solve? Frontend designs often ship with vague visual flaws, accessibility violations, and inconsistent spacing or typography that are hard to diagnose without a structured review framework. This Skill turns subjective design feedback into specific, actionable findings grounded in Gestalt principles, WCAG AA criteria, and design token governance. ## Core Features & Use Cases - Six-Dimension Audit: Evaluates visual hierarchy, typography, color and contrast, spacing and layout, accessibility, and motion for any component or page. - Structured Audit Report: Separates critical issues from improvements and polish, with every finding citing the specific WCAG criterion or design principle violated. - Corrected Code Output: Rewrites provided JSX, HTML, or Tailwind code using design token variables with inline comments explaining each change. - Use Case: A developer pastes a React card component and asks why it feels off. The audit identifies a 3.8:1 contrast ratio failing WCAG 1.4.3, inconsistent 13px padding breaking the spacing scale, and a missing focus ring, then returns corrected code using tokens. ## Quick Start Ask the assistant to audit the attached UI screenshot or pasted component code for accessibility, spacing, and visual hierarchy issues.
