tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
88
82%
Does it follow best practices?
Impact
100%
1.13xAverage score across 3 eval scenarios
Passed
No findings from the security scan
The canonical home for this skill is tailwind-design-system in wshobson/agents
Evaluation results
100%
4%Animated Tooltip and Notification Toast
Native v4 animations and custom utilities
Keyframes inside @theme
100%
100%
Animate token variables
100%
100%
No tailwindcss-animate
100%
100%
@starting-style used
100%
100%
Native transition property
100%
100%
@utility custom utilities
100%
100%
Correct v4 import
100%
100%
Multiple keyframe types
100%
100%
Animation classes applied
50%
100%
ANIMATION_GUIDE documents approach
100%
100%
100%
28%Component Library: Badge and Icon Button
CVA components with semantic tokens
CVA usage
100%
100%
VariantProps type
100%
100%
cn() utility
100%
100%
cn() applied in components
100%
100%
No forwardRef
0%
100%
Semantic color tokens
50%
100%
No arbitrary color values
50%
100%
size-* shorthand
0%
100%
defaultVariants defined
100%
100%
Focus accessibility classes
100%
100%
Disabled state classes
100%
100%
100%
3%Design System Foundation Setup
CSS-first v4 configuration
Correct import syntax
100%
100%
Theme block used
100%
100%
No tailwind.config file
100%
100%
OKLCH color format
100%
100%
Semantic color tokens
100%
100%
Radius tokens
100%
100%
Custom dark variant
100%
100%
Dark mode overrides
100%
100%
Base layer styles
100%
100%
Semantic token usage in base
70%
100%
- Repository
- calesthio/OpenMontage
- Commit
0af32ce
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6
Table of Contents
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.