Enforces professional frontend standards and opinionated design patterns to prevent AI-generated interface slop.
Baseline UI is a specialized skill for Claude Code that prevents the common pitfalls of AI-generated frontend code by enforcing a strict, high-quality design baseline. It ensures your project maintains consistency across Tailwind CSS implementation, accessibility primitives (Radix, Base UI), and performance-first animations. By using specific constraints on layout, typography, and interaction, this skill helps developers build production-grade interfaces that avoid unnecessary bloat, layout shifts, and non-standard styling patterns.
Key Features
01Strict Tailwind CSS enforcement including utility-first best practices.
02Automated UI review command to identify and fix styling violations in specific files.
03Accessibility auditing for ARIA labels and focus-friendly component primitives.
04Performance-optimized animation constraints using motion/react and compositor props.
05Standardized typography and layout rules for consistent cross-platform rendering.
06187 GitHub stars
Use Cases
01Auditing existing frontend components for styling inconsistencies or performance bottlenecks.
02Scaffolding new accessible UI components using Radix or Base UI primitives.
03Preventing AI from introducing 'slop' like custom easing curves and layout-shifting animations.
