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.
95
Does it follow best practices?
Validation for skill structure
Evaluation results
90%
52%Analytics Dashboard Page
Typography, layout, and design constraints
text-balance on headings
0%
100%
text-pretty on body
0%
100%
tabular-nums for numbers
0%
100%
Skeleton loading state
55%
100%
Empty state action
100%
100%
cn utility usage
0%
75%
No gradients
100%
100%
No h-screen
100%
100%
No arbitrary z-index
100%
100%
size-* for square elements
0%
100%
Truncate/line-clamp in dense areas
0%
0%
Tailwind color tokens only
0%
100%
Without context: $0.2460 · 1m 13s · 12 turns · 13 in / 4,335 out tokens
With context: $0.6691 · 2m 37s · 31 turns · 62 in / 9,093 out tokens
100%
30%User Account Settings Page
Accessible components, form interactions, and destructive actions
AlertDialog for delete
0%
100%
Accessible primitive for dialog
0%
100%
No hand-rolled keyboard behavior
100%
100%
No mixed primitive systems
100%
100%
aria-label on icon-only buttons
100%
100%
Inline error display
100%
100%
Paste not blocked
100%
100%
cn utility for class logic
0%
100%
No glow affordances
100%
100%
No h-screen
100%
100%
No arbitrary z-index
100%
100%
Without context: $0.3103 · 1m 25s · 17 turns · 17 in / 4,523 out tokens
With context: $0.7046 · 2m 44s · 32 turns · 33 in / 10,187 out tokens
100%
43%In-App Notification Toast System
Animation constraints and performance
motion/react package
0%
100%
Compositor props only
100%
100%
No layout property animation
100%
100%
Entrance uses ease-out
0%
100%
Duration ≤ 200ms
0%
100%
prefers-reduced-motion
0%
100%
No will-change outside animation
100%
100%
No useEffect for render logic
100%
100%
No custom easing curves
100%
100%
No glow or gradient decorations
100%
100%
Notification limit behavior
100%
100%
tw-animate-css for CSS entrance
0%
100%
Without context: $0.2429 · 59s · 13 turns · 13 in / 3,680 out tokens
With context: $0.6463 · 2m 50s · 32 turns · 30 in / 9,151 out tokens
- Evaluated
- Agent
- Claude Code
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.