What problem does it solve? Frontend projects accumulate animation, accessibility, and performance defects that are hard to spot manually. This Skill provides a systematic, grep-driven audit checklist that scans a codebase for missing animations, WCAG violations, layout thrashing, and inconsistent motion tokens before shipping. ## Core Features & Use Cases - Motion Gap Analysis: Detects conditional renders without AnimatePresence, hover states without transitions, lists without stagger, and entries without exit animations using targeted grep patterns. - Accessibility Audit: Verifies prefers-reduced-motion handling across Web, SwiftUI, and Compose, checks contrast ratios, focus-visible styles, clickable divs, and aria-hidden on decorative animations. - Performance & Consistency Audit: Flags layout-property animations, excessive will-change, oversized animation libraries, setTimeout-based animation loops, and scattered duration/easing values. - Use Case: Before releasing a React dashboard, run the audit to find that several modals lack exit animations, two buttons use outline:none without focus replacements, and 14 unique duration values need consolidation into motion tokens. ## Quick Start Run the design audit skill against my src directory and report all critical accessibility and motion issues found.
