baseline-ui

Overview

Baseline UI is a Claude Code skill that enforces an opinionated set of UI constraints to prevent common quality issues in AI-generated interfaces. It reviews code against rules covering Tailwind CSS usage, accessible component primitives, animation performance, typography, layout, and design consistency, then outputs specific violations with concrete fixes.

Key Features

• Comprehensive UI rule set — covers stack requirements (Tailwind CSS, motion/react, cn utility), accessible component primitives (Base UI, React Aria, Radix), animation constraints, typography, and layout standards
• File-level review mode — run /baseline-ui <file> to get exact violation locations, explanations of why each matters, and code-level fix suggestions
• Animation performance guardrails — enforces compositor-only property animation, 200ms max for interaction feedback, reduced-motion respect, and prohibits animating layout properties
• Typography and layout best practices — requires text-balance for headings, tabular-nums for data, fixed z-index scales, and proper viewport units (h-dvh instead of h-screen)

Who is this for?

This skill is for developers using Claude Code to build or iterate on user interfaces who want to maintain consistent, performant, and accessible UI output. It is especially valuable for teams that use Tailwind CSS and want automated enforcement of design system conventions during AI-assisted development.