How do I audit an existing file with this skill?

You can use the command '/baseline-ui ' to have Claude review the code against specific constraints and provide exact snippets for fixes.

How does it handle animations?

It enforces strict performance rules, such as only animating transform and opacity, respecting prefers-reduced-motion, and capping durations at 200ms.

What is 'AI-generated interface slop'?

It refers to inconsistent, unoptimized, or inaccessible UI code often produced by AI, such as arbitrary z-indexes, poor contrast, and inefficient layout animations.

Does this skill work with any CSS framework?

This skill is opinionated and optimized for Tailwind CSS, enforcing the use of default tokens and specific utilities like 'cn' for class merging.

Which component libraries does Baseline UI favor?

The skill prioritizes accessible primitives like Base UI, Radix, and React Aria to ensure keyboard and screen reader compatibility without manual rebuilding.

Baseline UI

Name: Baseline UI
Author: seflless

byseflless

0•

デザインツール

Enforces opinionated design standards and accessibility constraints to eliminate inconsistent AI-generated interface patterns.

Baseline UI is a specialized capability designed to prevent 'interface slop' by enforcing a strict set of high-quality design and implementation rules. It guides Claude to use modern frontend best practices, such as accessible primitives (Radix, Base UI), optimized Tailwind CSS patterns, and performance-focused animations. By applying these constraints, developers ensure that AI-generated code is not only functional but also professional, accessible, and performant right out of the box.

主な機能

01Performance-optimized animation rules limited to compositor properties.

02Automated UI auditing to detect and fix design system violations in existing files.

030 GitHub stars

04Accessibility-first component requirements using Radix, Base UI, and React Aria.

05Typography and layout constraints including text-balance and dynamic viewport units.

06Strict Tailwind CSS enforcement using default scales and 'cn' utility logic.

ユースケース

01Auditing legacy or AI-generated components to align them with modern UI best practices.

02Scaffolding new React features with built-in keyboard accessibility and focus management.

03Standardizing animation and interaction feedback to ensure consistent 200ms response times.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add seflless/dot-agents baseline-ui

For use in Claude.ai and ChatGPT

Download Skill