baseline-ui

Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.

1.74x

Quality

82%

Does it follow best practices?

Impact

96%

1.74x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

90%

52%

Analytics Dashboard Page

Typography, layout, and design constraints

Criteria

Without context

With context

text-balance on headings

100%

text-pretty on body

100%

tabular-nums for numbers

100%

Skeleton loading state

55%

100%

Empty state action

100%

cn utility usage

75%

No gradients

100%

No h-screen

100%

No arbitrary z-index

100%

size-* for square elements

100%

Truncate/line-clamp in dense areas

Tailwind color tokens only

100%

30%

User Account Settings Page

Accessible components, form interactions, and destructive actions

Criteria

Without context

With context

AlertDialog for delete

100%

Accessible primitive for dialog

100%

No hand-rolled keyboard behavior

100%

No mixed primitive systems

100%

aria-label on icon-only buttons

100%

Inline error display

100%

Paste not blocked

100%

cn utility for class logic

100%

No glow affordances

100%

No h-screen

100%

No arbitrary z-index

100%

43%

In-App Notification Toast System

Animation constraints and performance

Criteria

Without context

With context

motion/react package

100%

Compositor props only

100%

No layout property animation

100%

Entrance uses ease-out

100%

Duration ≤ 200ms

100%

prefers-reduced-motion

100%

No will-change outside animation

100%

No useEffect for render logic

100%

No custom easing curves

100%

No glow or gradient decorations

100%

Notification limit behavior

100%

tw-animate-css for CSS entrance

100%

Repository: ibelick/ui-skills
Commit: 95d0e08

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Analytics Dashboard Page User Account Settings Page In-App Notification Toast System

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.