baseline-ui

Invoke the Skill with a file path, for example /baseline-ui followed by the filename. It checks the file against all constraints and returns each violation with the exact snippet, a one-sentence rationale, and a concrete code-level fix.

Use accessible primitives such as Base UI, Radix, or React Aria for anything with keyboard or focus behavior. Prefer your project's existing primitives first, never mix primitive systems in one surface, and choose Base UI for new primitives when compatible.

Animate only compositor properties: transform and opacity. Never animate layout properties like width, height, top, left, margin, or padding, and keep interaction feedback under 200ms with ease-out timing on entrances.

Use h-dvh instead of h-screen. The dynamic viewport height unit accounts for mobile browser chrome, and fixed elements must also respect safe-area-inset values for proper display on modern devices.

Only add animation when explicitly requested. When used, respect prefers-reduced-motion, pause looping animations when off-screen, avoid animating large blur or backdrop-filter surfaces, and never introduce custom easing curves unless asked.