Specification
- Skill ID
- josiahsiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems
- Publisher
- josiahsiegel
- Repository
- claude-plugin-marketplace
- Installs
- 0
- Files
- 1
- Synced
- Sep 23, 2026
How to use it
Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.
josiahsiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systemsInstalls these files- SKILL.md
What this skill tells the agent
Tailwind CSS Advanced Design Systems
Building Design Tokens with @theme
Complete Design Token System
@import "tailwindcss";
@theme {
/* ===== COLOR SYSTEM ===== */
/* Disable all defaults for full control */
--color-*: initial;
/* Semantic color tokens */
--color-surface-primary: oklch(1 0 0);
--color-surface-secondary: oklch(0.98 0.002 250);
--color-surface-tertiary: oklch(0.95 0.004 250);
--color-surface-inverse: oklch(0.15 0.02 250);
--color-text-primary: oklch(0.15 0.02 250);
--color-text-secondary: oklch(0.4 0.02 250);
--color-text-tertiary: oklch(0.55 0.015 250);
--color-text-inverse: oklch(0.98 0 0);
--color-text-disabled: oklch(0.7 0.01 250);
--color-border-default: oklch(0.85 0.01 250);
--color-border-subtle: oklch(0.92 0.005 250);
--color-border-strong: oklch(0.7 0.02 250);
/* Brand colors with full scale */
--color-brand-50: oklch(0.97 0.02 250);
--color-brand-100: oklch(0.93 0.04 250);
--color-brand-200: oklch(0.87 0.08 250);
--color-brand-300: oklch(0.78 0.12 250);
--color-brand-400: oklch(0.68 0.16 250);
--color-brand-500: oklch(0.58 0.2 250);
--color-brand-600: oklch(0.5 0.2 250);
--color-brand-700: oklch(0.42 0.18 250);
--color-brand-800: oklch(0.35 0.15 250);
--color-brand-900: oklch(0.28 0.12 250);
--color-brand-950: oklch(0.2 0.08 250);
/* Status colors */
--color-success: oklch(0.6 0.18 145);
--color-success-subtle: oklch(0.95 0.04 145);
--color-warning: oklch(0.75 0.18 85);
--color-warning-subtle: oklch(0.95 0.06 85);
--color-error: oklch(0.55 0.22 25);
--color-error-subtle: oklch(0.95 0.04 25);
--color-info: oklch(0.6 0.18 250);
--color-info-subtle: oklch(0.95 0.04 250);
/* ===== TYPOGRAPHY SYSTEM ===== */
--font-*: initial;
--font-display: "Cal Sans", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;
/* Type scale (Major Third - 1.25) */
--text-xs: 0.64rem;
--text-sm: 0.8rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
--text-4xl: 3.052rem;
--text-5xl: 3.815rem;
/* Line heights */
--leading-none: 1;
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* Letter spacing */
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* ===== SPACING SYSTEM ===== */
--spacing-*: initial;
/* 4px base unit */
--spacing-0: 0;
--spacing-px: 1px;
--spacing-0_5: 0.125rem;
--spacing-1: 0.25rem;
--spacing-1_5: 0.375rem;
--spacing-2: 0.5rem;
--spacing-2_5: 0.625rem;
--spacing-3: 0.75rem;
--spacing-3_5: 0.875rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
--spacing-11: 2.75rem;
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
--spacing-44: 11rem;
--spacing-48: 12rem;
--spacing-52: 13rem;
--spacing-56: 14rem;
--spacing-60: 15rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
/* ===== EFFECTS ===== */
--shadow-*: initial;
--shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
--shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
--shadow-inner: inset 0 2px 4px 0 oklch(0 0 0 / 0.05);
/* Colored shadows */
--shadow-brand: 0 4px 14px 0 oklch(0.58 0.2 250 / 0.3);
--shadow-success: 0 4px 14px 0 oklch(0.6 0.18 145 / 0.3);
--shadow-error: 0 4px 14px 0 oklch(0.55 0.22 25 / 0.3);
--radius-*: initial;
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-default: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-full: 9999px;
/* ===== MOTION ===== */
--ease-*: initial;
--animate-*: initial;
--ease-linear: linear;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--duration-75: 75ms;
--duration-100: 100ms;
--duration-150: 150ms;
--duration-200: 200ms;
--duration-300: 300ms;
--duration-500: 500ms;
--duration-700: 700ms;
--duration-1000: 1000ms;
/* ===== BREAKPOINTS ===== */
--breakpoint-*: initial;
--breakpoint-xs: 475px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
--breakpoint-3xl: 1920px;
/* ===== Z-INDEX ===== */
--z-auto: auto;
--z-0: 0;
--z-10: 10;
--z-20: 20;
--z-30: 30;
--z-40: 40;
--z-50: 50;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
--z-toast: 800;
}Dark Mode Design Tokens
Automatic Dark Mode with CSS Variables
@import "tailwindcss";
@theme {
/* Light mode tokens (default) */
--color-surface: oklch(1 0 0);
--color-surface-raised: oklch(0.98 0 0);
--color-text: oklch(0.15 0 0);
--color-text-muted: oklch(0.45 0 0);
--color-border: oklch(0.9 0 0);
}
/* Dark mode overrides using native CSS */
@media (prefers-color-scheme: dark) {
:root {
--color-surface: oklch(0.12 0.02 260);
--color-surface-raised: oklch(0.18 0.02 260);
--color-text: oklch(0.95 0 0);
--color-text-muted: oklch(0.65 0 0);
--color-border: oklch(0.28 0.02 260);
}
}
/* Selector-based dark mode */
@custom-variant dark (&:where(.dark, .dark *));
.dark {
--color-surface: oklch(0.12 0.02 260);
--color-surface-raised: oklch(0.18 0.02 260);
--color-text: oklch(0.95 0 0);
--color-text-muted: oklch(0.65 0 0);
--color-border: oklch(0.28 0.02 260);
}Usage
<!-- These classes work in both light and dark automatically -->
<div class="bg-[var(--color-surface)] text-[var(--color-text)]">
<p class="text-[var(--color-text-muted)]">Muted text</p>
<div class="border border-[var(--color-border)]">Bordered</div>
</div>
<!-- Or create semantic utility classes -->@utility bg-surface {
background-color: var(--color-surface);
}
@utility bg-surface-raised {
background-color: var(--color-surface-raised);
}
@utility text-default {
color: var(--color-text);
}
@utility text-muted {
color: var(--color-text-muted);
}
@utility border-default {
border-color: var(--color-border);
}Multi-Theme Systems
Theme Switching with Data Attributes
@import "tailwindcss";
@custom-variant theme-ocean (&:where([data-theme="ocean"], [data-theme="ocean"] *));
@custom-variant theme-forest (&:where([data-theme="forest"], [data-theme="forest"] *));
@custom-variant theme-sunset (&:where([data-theme="sunset"], [data-theme="sunset"] *));
@theme {
/* Default theme */
--color-primary: oklch(0.6 0.2 250);
--color-secondary: oklch(0.7 0.15 200);
--color-accent: oklch(0.75 0.18 30);
}
[data-theme="ocean"] {
--color-primary: oklch(0.55 0.2 220);
--color-secondary: oklch(0.65 0.15 200);
--color-accent: oklch(0.7 0.18 180);
}
[data-theme="forest"] {
--color-primary: oklch(0.5 0.18 145);
--color-secondary: oklch(0.6 0.12 120);
--color-accent: oklch(0.75 0.15 85);
}
[data-theme="sunset"] {More from josiahsiegel
Use this skill in a project
Open any RiverX project, search the Skills panel for josiahsiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems, and install it in one click.