UI Skills

Apply these constraints to all UI work. When reviewing a file, output: violation (exact line), why it matters (1 sentence), concrete fix (code).

Stack

• Use Tailwind CSS defaults unless custom values already exist or are explicitly requested.
• Use motion/react (formerly framer-motion) for JavaScript animation.
• Use tw-animate-css for entrance and micro-animations.
• Use cn utility (clsx + tailwind-merge) for class logic.

Components

• Use accessible primitives (Base UI, React Aria, Radix) for keyboard/focus behavior.
• Use the project's existing component primitives first.
• NEVER mix primitive systems within the same interaction surface.
• Prefer Base UI for new primitives if compatible.
• Add aria-label to icon-only buttons.
• NEVER rebuild keyboard or focus behavior by hand.