Can I use this for mobile-responsive design?

Absolutely. The skill mandates the use of dynamic viewport units like 'h-dvh' and 'safe-area-inset' to ensure layouts work perfectly on all mobile devices.

What is 'AI-generated interface slop'?

It refers to common, low-quality patterns AI models often output, such as poor accessibility, inefficient layout-shifting animations, and generic design choices that don't follow modern web standards.

Why does the skill restrict animations to 200ms?

This constraint ensures that the user interface feels snappy and responsive. Research shows that interaction feedback exceeding 200ms can feel sluggish to users.

Does this skill work with existing Tailwind CSS projects?

Yes, it is specifically designed to use your project's existing Tailwind defaults and component primitives while enforcing better usage patterns.

How does the audit command work?

By running '/baseline-ui ', Claude analyzes the specific file against a set of constraints and provides a list of violations, the reasoning behind them, and concrete code-level fixes.

Baseline UI Standards

Name: Baseline UI Standards
Author: xiaxingxiaowei1983

byxiaxingxiaowei1983

0•

デザインツール

Enforces professional UI/UX standards to eliminate generic AI-generated interface patterns and ensure accessible, high-performance code.

Baseline UI is an opinionated framework for Claude Code designed to prevent 'AI slop'—the common, low-quality design patterns often generated by large language models. This skill automates the application of rigorous frontend engineering standards, focusing on accessible primitives (Radix, Base UI), optimized Tailwind CSS configurations, and performance-first animations. By integrating this skill into your workflow, you ensure that AI-generated components are not only visually polished but also responsive, performant, and fully accessible without the need for manual correction of common AI design mistakes.

主な機能

01Strict enforcement of accessible component primitives like Radix, React Aria, and Base UI.

02Automated UI auditing to identify and fix non-standard CSS and accessibility violations.

03Optimized animation constraints using compositor-only properties for maximum frame rates.

04Proactive prevention of common AI pitfalls like arbitrary z-indexes and unnecessary gradients.

050 GitHub stars

06Modern typography and layout standards including text-balance and dynamic viewport units (h-dvh).

ユースケース

01Standardizing design system implementation across a team using Tailwind CSS and motion/react.

02Ensuring accessibility compliance (Aria-labels, focus management) during rapid UI prototyping.

03Auditing existing frontend components for performance bottlenecks and design inconsistencies.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/ai baseline-ui

For use in Claude.ai and ChatGPT