What problem does it solve? Frontend designs often ship with vague or inconsistent quality issues — poor contrast, broken spacing rhythm, missing focus states — that are hard to diagnose without a structured framework. This Skill turns subjective design feedback into a specific, actionable audit grounded in named principles and measurable criteria. ## Core Features & Use Cases - Six-Dimension Audit: Evaluates visual hierarchy, typography, color and contrast, spacing and layout, accessibility, and motion against concrete thresholds like 4.5:1 contrast ratios and 44×44px touch targets. - Structured Audit Report: Separates critical issues from improvements and polish, cites the exact WCAG criterion or Gestalt principle violated, and always includes a "What's Working" section. - Corrected Code Output: Rewrites provided JSX, HTML/CSS, or Tailwind components with all critical issues fixed, design token variables replacing raw values, and inline comments explaining every change. - Use Case: Paste a React component that "feels off" and receive a prioritized report identifying a 3.2:1 contrast failure (WCAG 1.4.3), inconsistent spacing off the 8px grid, and missing focus rings — plus the corrected code using a proposed token set. ## Quick Start Ask the AI to audit the attached component code or screenshot for accessibility, spacing, and visual hierarchy issues and return corrected code.
