interface-kit

Use Radix UI primitives for focus trapping, ARIA attributes, and keyboard navigation, then style them with Tailwind and CVA variants. The component-patterns reference includes copy-paste implementations for buttons, dialogs, selects, sheets, toasts, and forms.

Match duration to usage frequency: high-frequency actions get no animation, occasional interactions like modals get 150-300ms, and rare moments like onboarding can use 300-500ms. Use custom cubic-bezier easing curves instead of built-in keywords.

Yes. If a DESIGN.md exists at the project root, its tokens and specifications override all defaults in the Skill. The implementation guidance on accessibility, motion, and component craft applies regardless of which design system is active.

Test contrast separately in dark mode using desaturated tonal variants rather than inverted colors. Normal text needs 4.5:1 and large text 3:1; verify with Chrome DevTools or axe-core since light-mode passing pairs often fail in dark.

Nested elements need concentric border radius: outer radius equals inner radius plus padding. Using the same radius on parent and child makes corners look bloated; the review checklist includes before-and-after values to verify the fix.

Skip animation entirely for actions performed 100+ times per day, such as keyboard shortcuts and tab switches. Also respect prefers-reduced-motion and gate hover effects behind a hover-capable media query for touch devices.