What problem does it solve? Design system compliance checks that automated scripts cannot perform — such as interaction states, data states, and misuse of custom components instead of native HTML primitives — often go unreviewed, letting inconsistent UI slip into production. ## Core Features & Use Cases - Native Primitive Detection: Flags reinvented components (e.g., a <div>-based modal) and recommends native replacements like <dialog>, <details>, or popover that handle focus, keyboard, and Escape natively. - Interaction & Data State Review: Verifies default, hover, active, and disabled states, plus the four data states (loading skeleton, empty with CTA, error with retry, success) on every data-loading view. - Theme & Hierarchy Checks: Confirms both light and data-theme="dark" themes use tokens correctly and that visual hierarchy communicates importance through spacing and typography. - Use Case: Ask whether a settings view follows your design system, and receive a pass/fail list with file:line references and concrete fixes, such as Modal.tsx:12 — <div role="dialog"> without focus trap; use <dialog>. ## Quick Start Ask the assistant to audit a specific view or component against the design system, for example by requesting a review of whether the settings page follows the design guidelines.
