Tailwindcss Advanced Design Systems
Define a full Tailwind v4 design token system with @theme for semantic colors, surfaces, typography, and spacing in a maintainable UI layer.
Overview
Tailwind CSS Advanced Design Systems is an agent skill for the Build phase that teaches Tailwind v4 @theme design tokens for semantic colors, typography, and spacing.
Install
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-advanced-design-systemsWhat is this skill?
- Complete @theme design token system with semantic surface, text, and border roles
- Brand color scales using modern oklch definitions and disabled default color wildcard
- Structured sections for color, typography, spacing, radius, and shadow tokens
- Advanced Tailwind CSS v4 @import tailwindcss setup for design-system control
- Reference patterns for inverse surfaces, disabled text, and strong/subtle borders
Adoption & trust: 536 installs on skills.sh; 42 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Tailwind project relies on ad-hoc colors and classes with no shared semantic token system for surfaces, text, and brand scales.
Who is it for?
Indie devs on Tailwind CSS v4 who are defining or rebuilding a design system before shipping a web app UI.
Skip if: Teams not using Tailwind, pure Figma-only design with no CSS implementation, or backend-only tasks.
When should I use this skill?
Implementing or extending Tailwind CSS v4 @theme design tokens, semantic color roles, and brand scales for a web UI.
What do I get? / Deliverables
You get a documented @theme token architecture with semantic and brand color roles ready to wire into components and dark-mode variants.
- @theme token block for colors and semantics
- Brand scale definitions
- Design token documentation embedded in CSS
Recommended Skills
Journey fit
Build/frontend is where design tokens and Tailwind @theme configuration are authored before ship and grow iterations on the same system. Frontend subphase matches CSS token architecture and component styling foundations, not backend APIs or launch SEO work.
How it compares
Skill-driven token recipes for Tailwind @theme—not a separate component library or MCP design server.
Common Questions / FAQ
Who is tailwindcss-advanced-design-systems for?
Solo builders and frontend-focused agents implementing Tailwind v4 who need semantic design tokens and oklch brand scales in CSS.
When should I use tailwindcss-advanced-design-systems?
During Build/frontend when scaffolding globals.css, refactoring legacy Tailwind config to @theme, or before Ship when you need consistent UI tokens for review.
Is tailwindcss-advanced-design-systems safe to install?
See the Security Audits panel on this Prism page; the skill supplies CSS patterns you should review for accessibility contrast and license fit in your marketplace plugin.
SKILL.md
READMESKILL.md - Tailwindcss Advanced Design Systems
# Tailwind CSS Advanced Design Systems ## Building Design Tokens with @theme ### Complete Design Token System ```css @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)