tailwindcss-advanced-design-systems
This skill provides templates and patterns for constructing production-grade design systems with Tailwind CSS v4's @theme directive. It covers semantic token naming, color scales, typography systems, spacing grids, shadow and motion tokens, plus multi-brand theming and dark mode configuration.
Tailwind CSS Advanced Design Systems helps you build complete design systems with @theme configuration and semantic tokens.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-18
Tailwind CSS Advanced Design Systems helps you build complete design systems with @theme configuration and semantic tokens. This skill provides templates and patterns for constructing production-grade design systems with Tailwind CSS v4's @theme directive. It covers semantic token naming, color scales, typography systems, spacing grids, shadow and motion tokens, plus multi-brand theming and dark mode configuration.
Use it when
- tailwindcss-advanced-design-systems guides you through structuring semantic tokens—naming conventions tied to intent rather than color.
- Yes.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is tailwindcss-advanced-design-systems and what does it do?
tailwindcss-advanced-design-systems is an MIT-licensed skill for building production-grade design systems with Tailwind CSS v4's @theme directive. It provides templates and patterns for semantic token naming, color scales, typography systems, spacing grids, shadow and motion tokens, plus multi-brand theming and dark mode configuration.
How do I build a complete design system with semantic tokens and @theme?
tailwindcss-advanced-design-systems guides you through structuring semantic tokens—naming conventions tied to intent rather than color values—and leveraging Tailwind v4's @theme directive to define them centrally. This approach lets you map tokens like `--color-primary-action` to actual values, making theme switching and maintenance straightforward across your entire design system.
Can tailwindcss-advanced-design-systems help with fluid typography and spacing using clamp()?
Yes. tailwindcss-advanced-design-systems covers implementing fluid typography and spacing with CSS clamp() functions, allowing your type scales and spacing to scale responsively between viewport sizes without media queries. This creates smoother, more adaptive layouts that work elegantly across all screen sizes.
What tailwind dark mode tokens setup does this skill provide?
tailwindcss-advanced-design-systems includes patterns for creating dark mode and light mode token systems using CSS variables and Tailwind's theme configuration. You'll learn to define separate token values for each mode and toggle them via class selectors or data attributes, enabling seamless theme switching.
How can I set up multi-brand or multi-theme support with CSS variables?
tailwindcss-advanced-design-systems demonstrates multi-brand theming by organizing CSS variables hierarchically and using @theme to reference them. You can define brand-specific token overrides, swap entire token sets via data attributes or classes, and maintain a single codebase that supports multiple brand identities.
Does this skill cover syncing design tokens from Figma to Tailwind?
tailwindcss-advanced-design-systems includes patterns for design token sync workflows, showing how to export tokens from Figma or design tools and integrate them into your Tailwind configuration. This bridges the gap between design and development, keeping tokens consistent across both domains.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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:
(truncated - see the full file via the links below)
File tree — 1 file
plugins/tailwindcss-master/skills/tailwindcss-advanced-design-systems/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build a complete design system with semantic tokens and @theme”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master Tailwind CSS v4's CSS-first configuration model, Rust-powered engine, and modern setup across Vite and PostCSS. This skill covers installation methods, @theme-based theming, custom utilities and variants, plugin loading, and the shift from JavaScript config to pure CSS. Includes v3-to-v4 migration guidance and reference for new v4 utilities.
UI Design System guides you through building production-ready design systems from the ground up. It covers the complete workflow: establishing primitive, semantic, and component token layers; architecting atomic to organism-level components; and implementing light/dark theming with responsive patterns. Built for Tailwind CSS v4 and CSS custom properties.
Manage design tokens using the W3C Design Token Community Group specification with a three-tier hierarchy (global, alias, component) that enables theme switching without touching component definitions. Built-in support for OKLCH color spaces ensures perceptually uniform shade scales, while Style Dictionary integration transforms tokens into CSS variables, Tailwind themes, and platform-specific outputs. Includes guidance on contrast enforcement, dark mode implementation, versioning strategies, and design-to-code pipelines.
Master Tailwind CSS v4's utility-first approach with CSS-based theme configuration using @theme directives and design tokens. This skill covers class composition, responsive breakpoints, container queries, state variants, and custom utility creation—all without JavaScript config files.
Frontend Design guides you through building distinctive, polished web interfaces that escape generic AI aesthetics. It combines design thinking—purpose, style direction, constraints, and differentiation—with practical guidance on typography, color, animation, layout, and visual details. Use it when building web components, pages, dashboards, or complete applications that demand both functional code and memorable design.
Frontend Design teaches production-grade web UI development through a tokens-first methodology that balances systematic consistency with creative aesthetics. It covers design token systems, component architecture, accessibility compliance, and responsive patterns across React, Vue, and vanilla frameworks.
More skills design-tokens (Apache-2.0) · tailwindcss-advanced-layouts (MIT) · tailwind-design-system (MIT)