Why does it prefer h-dvh over h-screen?

The h-dvh (dynamic viewport height) utility provides a more consistent experience on mobile devices by accounting for browser UI bars that shift.

Can I use this to fix existing UI issues?

Yes, by running the command `/baseline-ui `, the skill will identify specific violations and provide code-level suggestions to fix them.

What frameworks does Baseline UI support?

Baseline UI is specifically optimized for React projects using Tailwind CSS and animation libraries like motion/react (formerly Framer Motion).

Does it support custom design systems?

It respects your project's existing Tailwind theme and component primitives first, applying its opinionated baseline only where patterns are missing or broken.

How does it improve web accessibility?

It enforces the use of established primitives like Radix or React Aria for complex components and mandates ARIA labels for icon-only buttons.

Baseline UI

Name: Baseline UI
Author: ibelick

byibelick

•

913

•

Design Tools

Enforces design consistency, accessibility standards, and performance optimizations for Tailwind CSS and React projects.

Baseline UI is a specialized skill designed to polish and standardize interfaces built by AI agents, ensuring they meet professional production standards. It enforces an opinionated set of rules for Tailwind CSS, focusing on accessibility, optimal animation performance, typography scaling, and modern layout patterns. By integrating this skill, developers can automatically audit their UI code for common anti-patterns—such as inefficient animations, lack of keyboard accessibility, or improper viewport units—resulting in cleaner, more performant, and more reliable user interfaces that avoid typical AI-generated interface slop.

Key Features

01Typography Scaling: Automatically enforces text-balance, text-pretty, and tabular-nums for data-heavy UI.

02913 GitHub stars

03Tailwind CSS Optimization: Enforces standard utility usage and modern classes like h-dvh and size-*.

04Accessibility Compliance: Ensures the use of accessible primitives like Radix or Base UI and proper ARIA labeling.

05Animation Auditing: Validates durations, easing curves, and compositor-only properties using motion/react.

06Performance Guardrails: Prevents expensive paint operations, improper useEffect usage, and layout-shifting animations.

Use Cases

01Auditing AI-generated React components to ensure they follow professional design system constraints.

02Enforcing consistent accessibility and keyboard interaction patterns across a Tailwind project.

03Polishing micro-interactions and animations to stay within the 200ms interaction threshold.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ibelick/ui-skills baseline-ui

For use in Claude.ai and ChatGPT

Download Skill