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.

1.48x

Quality

59%

Does it follow best practices?

Impact

92%

1.48x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./tests/ext_conformance/artifacts/agents-wshobson/frontend-mobile-development/skills/tailwind-design-system/SKILL.md

Evaluation results

100%

14%

Design System CSS Foundation

CSS-first design token configuration

Criteria

Without context

With context

Tailwind v4 import

100%

@theme block used

100%

No config file

100%

OKLCH color format

100%

Semantic color naming

100%

@custom-variant dark

100%

.dark overrides

100%

@keyframes inside @theme

100%

Animation token vars

100%

@layer base global styles

50%

100%

Radius tokens

100%

97%

38%

Reusable UI Component Library: Button and Badge

CVA components and React 19 ref pattern

Criteria

Without context

With context

CVA for variants

100%

cn() utility

100%

Semantic color tokens

50%

70%

size-* shorthand

100%

No forwardRef

100%

Ref as regular prop

100%

Radix Slot asChild

100%

No arbitrary values

100%

CVA defaultVariants

100%

VariantProps type export

100%

Disabled state utilities

100%

80%

37%

Animated Overlays and Design System Utilities

Native CSS animations and custom utilities

Criteria

Without context

With context

@keyframes in @theme

100%

--animate-* tokens

100%

No tailwindcss-animate

100%

@starting-style entry animation

@utility custom helpers

100%

color-mix() alpha variants

100%

Alpha variant in @theme

100%

allow-discrete transition

Data state animation classes

66%

100%

Semantic overlay color

100%

Repository: Dicklesworthstone/pi_agent_rust
Commit: 47823e3

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

Table of Contents

Design System CSS Foundation Reusable UI Component Library: Button and Badge Animated Overlays and Design System Utilities

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.