Does this skill work with any CSS framework?

Baseline UI is opinionated and optimized for Tailwind CSS, requiring specific utilities like the 'cn' function (clsx + tailwind-merge) for class logic.

Can I use this for mobile-first development?

Yes, it explicitly enforces mobile-friendly patterns like 'h-dvh' instead of 'h-screen' and 'safe-area-inset' for fixed elements to ensure layouts work across all devices.

Which animation library does it support?

It mandates the use of 'motion/react' (formerly Framer Motion) for JavaScript animations and 'tw-animate-css' for Tailwind-based micro-animations.

How do I review a specific file with this skill?

Use the command '/baseline-ui ' to trigger a deep audit of your component against all design, accessibility, and performance constraints.

What is 'AI-generated interface slop'?

It refers to common low-quality patterns AI often generates, such as unnecessary gradients, poor accessibility, layout-breaking animations, and inconsistent spacing.

Baseline UI

Name: Baseline UI
Author: r1cA18

byr1cA18

•

Design Tools

Enforces a rigorous, opinionated UI design system to eliminate AI-generated interface inconsistencies and low-quality patterns.

Baseline UI is a specialized Claude Code skill designed to prevent 'AI slop' in frontend development by enforcing high-quality design standards, accessibility requirements, and performance best practices. It acts as a linting and generation layer that ensures AI-produced code follows modern conventions like using accessible primitives (Radix, Base UI), optimized animations (compositor-only), and responsive layout utilities like dynamic viewport heights. This skill is essential for developers who want Claude to produce production-ready React and Tailwind CSS code that feels intentional, accessible, and performant.

Key Features

01Enforces accessible component primitives like Radix, Base UI, and React Aria

02Optimizes animations using compositor-only properties and duration limits

03Improves typography with modern CSS features like text-balance and tabular-nums

041 GitHub stars

05Automates UI reviews to identify and fix violations against best practices

06Standardizes Tailwind CSS usage with dynamic viewport units and cn utilities

Use Cases

01Refactoring AI-style code into production-grade Tailwind CSS and Framer Motion logic

02Generating new, high-fidelity React interfaces that adhere to professional design standards

03Reviewing existing UI components for accessibility and performance bottlenecks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add r1ca18/dotfiles baseline-ui

For use in Claude.ai and ChatGPT

Download Skill