interface-design

Run a domain exploration before any visual work: list product-domain concepts, colors that exist in that world, one signature element, and the defaults you are rejecting. Then enforce hierarchy through type weight and color, a single focal point, and a consistent spacing and depth system.

It targets product UI: dashboards, admin panels, SaaS apps, tools, settings pages, and data interfaces. It explicitly excludes landing pages, marketing sites, campaigns, and brand-only work, which need a marketing or frontend design skill instead.

Prefer native HTML first, then a headless primitive such as Radix UI, React Aria, Ark, Headless UI, Vaul, or cmdk for stateful controls like selects, dialogs, and popovers. Hand-roll only as a last resort, and then you must implement keyboard navigation, focus management, ARIA, and click-outside yourself.

Yes. It instructs you to use the project's existing design system such as shadcn Button variants, bind styles to semantic tokens like bg-card and text-muted-foreground instead of hardcoded values, and extract repeated utility strings into components.

Actions repeated over 100 times a day, like keyboard shortcuts and command palettes, should have no animation because it makes them feel slow. Keep UI motion under 300ms, animate only transform and opacity, and respect prefers-reduced-motion.

After completing a task, the skill offers to save direction, depth strategy, spacing base, hierarchy decisions, and reusable component patterns to .interface-design/system.md. Future sessions read that file and hold to its values for consistency.