Ux Design Systems

This gives you the scaffolding for building actual design systems: design tokens as CSS variables or TypeScript objects, component variants using class-variance-authority, and theme switching patterns for dark mode. It's useful when you're setting up a component library from scratch or standardizing an existing UI. The button component example shows the CVA pattern pretty clearly, which is nice if you're tired of prop drilling classNames everywhere. Worth noting it assumes you're in a React/TypeScript world and leans on Tailwind conventions. If you're implementing design tokens or building themeable components, this gets you past the "how should I structure this" phase quickly.

skills.sh installs: 270
GitHub stars: 296
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hoodini/ai-agents-skills --skill ux-design-systems --agent claude-code

Installs into .claude/skills of the current project.

Files

UX Design Systems

Build consistent, maintainable design systems with tokens, components, and theming.

Design Tokens

CSS Variables

:root {
  /* Colors */
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly