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.

Install with Tessl CLI

npx tessl i github:Dicklesworthstone/pi_agent_rust --skill tailwind-design-system

What are skills?

Review — 78%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 10 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

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%

Without context: $0.2620 · 4m 12s · 11 turns · 81 in / 4,469 out tokens

With context: $0.5592 · 3m 24s · 18 turns · 365 in / 5,563 out tokens

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%

Without context: $0.5418 · 5m 32s · 21 turns · 161 in / 8,896 out tokens

With context: $0.6849 · 5m 9s · 25 turns · 428 in / 7,136 out tokens

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%

Without context: $0.5859 · 6m 6s · 17 turns · 155 in / 12,099 out tokens

With context: $0.8486 · 7m 19s · 25 turns · 477 in / 11,582 out tokens

Evaluated: about 16 hours ago
Agent: Claude Code

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.