baseline-ui

The baseline-ui skill acts as a strict architectural guardian for frontend development, ensuring that UI implementations maintain high standards of accessibility, performance, and visual consistency. Designed for developers and AI agents working on modern React and Tailwind CSS projects, it enforces a systematic approach to component construction and interactive behaviors. By providing a standardized ruleset, it eliminates 'interface slop'—common issues like arbitrary spacing, inconsistent focus states, and poorly managed animation cycles—ensuring that all UI work aligns with industry-standard patterns.

• Enforces component primitive standards using Radix UI, Base UI, or React Aria for keyboard navigation and screen-reader compatibility.

• Implements strict animation guidelines, prioritizing compositor props (transform, opacity) and restricting animation layout properties to maintain 60fps performance.

• Standardizes class logic via the 'cn' utility (clsx + tailwind-merge) to avoid specificity conflicts and maintain clean CSS.

• Provides a command-line interface (/baseline-ui <file>) to automatically review code against defined constraints, identifying violations and offering concrete fixes.

• Mandates accessible design patterns, such as aria-label usage for icon-only buttons and proper error handling for user actions.

• Ensures responsive UI safety, requiring h-dvh over h-screen and proper adherence to safe-area-inset properties.

• Regulates typography and spacing by enforcing text-balance, text-pretty, and fixed z-index scales to prevent design drift.

• Ideal for managing UI development in complex Astro/React projects where consistent styling and performance are critical.

• Use the '/baseline-ui' command to apply constraints during interactive sessions and the '/baseline-ui <file>' command for specific code audits.

• Operates best when integrated with Tailwind CSS 4.x and Framer Motion; avoids custom easing or bloated layout animations.

• Ensures all interactive feedback remains within the 200ms latency threshold for optimal user experience.

• Strictly prohibits the use of 'useEffect' for logic that should be handled during the render phase to improve application performance.