baseline-ui

Invoke the baseline before any UI work so the AI follows fixed constraints for Tailwind styling, accessible primitives, animation, and layout. You can also pass a specific file to get a violation report with quoted snippets and concrete fixes.

Use motion/react (formerly framer-motion) when JavaScript animation is required, and tw-animate-css for entrance and micro-animations in Tailwind. Animate only compositor properties like transform and opacity, and keep interaction feedback under 200ms.

All three provide accessible primitives for keyboard and focus behavior. Prefer your project's existing primitives first, never mix systems within one interaction surface, and choose Base UI for new primitives if compatible with your stack.

h-screen uses the static viewport height, which causes layout issues when mobile browser chrome appears or hides. h-dvh tracks the dynamic viewport height, and fixed elements should also respect safe-area-inset for notched devices.

Never add animation unless explicitly requested. When used, avoid animating layout properties like width or margin, avoid large blur or backdrop-filter surfaces, pause looping animations off-screen, and respect prefers-reduced-motion.