interface-kit

Match animation to usage frequency: high-frequency actions get no animation, occasional actions get 150-300ms transitions with custom cubic-bezier easing. Animate only transform and opacity, avoid transition: all, and respect prefers-reduced-motion.

Define HSL semantic tokens like --background and --foreground in :root, then override them in a .dark class with desaturated, lighter tonal variants rather than inverting colors. Test contrast ratios separately in dark mode since passing values in light mode may fail.

WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular and above). UI components and graphical objects need 3:1. Verify with Chrome DevTools or axe-core, and never convey information by color alone.

Nested elements need concentric border radius: outer radius equals inner radius plus padding. If a card has 8px padding and an inner element has 8px radius, the card should use 16px. Identical radii on parent and child look bloated.

Yes, the component patterns reference covers shadcn/ui setup, CVA variant definitions, React Hook Form with Zod validation, and Radix-based dialogs, selects, sheets, and toasts, including their built-in accessibility behaviors like focus trapping.

Skip animation entirely for actions performed 100+ times per day like keyboard shortcuts and tab switches. Reduce to 50-100ms for tens-of-daily actions like hovers. Also avoid ease-in for UI, never animate from scale(0), and gate hover effects behind a hover media query.