What is 'AI-generated interface slop'?

It refers to generic, unoptimized, or inaccessible UI code that LLMs often produce by default, such as missing ARIA labels, arbitrary z-indexes, or poor layout practices.

Which UI frameworks does Baseline UI support?

It is optimized for Tailwind CSS, motion/react (formerly Framer Motion), and accessible primitives like Radix UI, Base UI, and React Aria.

Why does the skill limit animation types?

To ensure high performance, it restricts animations to compositor properties like transform and opacity, preventing layout shifts that can degrade user experience.

Does this skill help with web accessibility?

Yes, it mandates the use of accessible primitives for interactive elements and requires aria-labels for icon-only buttons to ensure keyboard and screen-reader compatibility.

How do I check an existing file for UI violations?

You can use the command '/baseline-ui ' to have Claude review the specific file against the baseline's strict performance and design constraints.

Baseline UI

Name: Baseline UI
Author: xiaxingxiaowei1983

byxiaxingxiaowei1983

0•

Design Tools

Enforces an opinionated, high-quality UI baseline to prevent generic AI-generated interface patterns and ensure accessible, performant frontend code.

Baseline UI is a specialized capability for Claude Code designed to eliminate 'AI slop'—the generic, unoptimized, and often inaccessible UI code typically generated by LLMs. It enforces a strict set of standards covering the Tailwind CSS stack, accessible primitives like Radix and Base UI, and performance-minded animations. By applying these constraints, developers ensure that every component generated or reviewed meets modern production standards for accessibility, layout precision, and interaction design without requiring tedious manual auditing.

Key Features

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

020 GitHub stars

03Audits existing UI code for violations against opinionated design and performance constraints.

04Enforces Tailwind CSS best practices and utility-first logic.

05Optimizes animations to use compositor properties and respect performance limits.

06Standardizes typography using modern CSS features like text-balance and tabular-nums.

Use Cases

01Preventing the introduction of common AI-generated anti-patterns like arbitrary z-indexes or layout animations.

02Auditing legacy React components to align them with modern Tailwind and accessibility standards.

03Generating new UI features that must strictly follow high-performance animation and layout specs.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/openclaw baseline-ui

For use in Claude.ai and ChatGPT

Key Features

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

020 GitHub stars

03Audits existing UI code for violations against opinionated design and performance constraints.

04Enforces Tailwind CSS best practices and utility-first logic.

05Optimizes animations to use compositor properties and respect performance limits.

06Standardizes typography using modern CSS features like text-balance and tabular-nums.

Use Cases

01Preventing the introduction of common AI-generated anti-patterns like arbitrary z-indexes or layout animations.

02Auditing legacy React components to align them with modern Tailwind and accessibility standards.

03Generating new UI features that must strictly follow high-performance animation and layout specs.