baseline-ui

Invoke the skill with a target file path to audit it against all baseline constraints. The output lists each violation with the exact offending snippet, a one-sentence explanation of why it matters, and a concrete code-level fix.

Use accessible primitives like Base UI, Radix, or React Aria for anything with keyboard or focus behavior. Prefer the project's existing primitives first, never mix primitive systems on 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 avoid animating paint properties except for small local UI like text and icons.

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

Only add animation when explicitly requested. Keep interaction feedback under 200ms, use ease-out on entrances, pause looping animations off-screen, and respect prefers-reduced-motion settings.