What problem does it solve? Building consistent, accessible UI in a Next.js project requires juggling multiple design guidelines (DADS tokens, HID 24 principles, Shadcn UI patterns, UX psychology). This Skill consolidates all of them into a single authoritative reference so every component follows the same visual style, accessibility requirements, and interaction rules. ## Core Features & Use Cases - Design Token Enforcement: Defines project colors (brand primary #007EFE, accent yellow focus rings), DADS typography tokens, border radius, and Tailwind v4 configuration rules via CSS variables. - Accessibility Compliance: Mandates WCAG 2.1 AA contrast (4.5:1), aria-disabled instead of disabled, focus-visible ring styles, and aria-describedby wiring for form errors. - UX Principle Guidelines: Provides the HID 24 principles (Fitts's Law, Hick's Law, error prevention, progressive disclosure) and UX psychology patterns (goal gradient, social proof, peak-end rule) with concrete code examples. - Use Case: When implementing a new form page, consult this Skill to get the correct DADS form field pattern with Label, SupportText, ErrorText, proper aria attributes, and project-standard focus styling. ## Quick Start Use the design-system skill to review my new settings page component and fix any accessibility or styling violations.
