{"enrichment":{"faq":[{"a":"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.","q":"What is tailwindcss-advanced-design-systems and what does it do?"},{"a":"tailwindcss-advanced-design-systems guides you through structuring semantic tokens\u2014naming conventions tied to intent rather than color values\u2014and 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.","q":"How do I build a complete design system with semantic tokens and @theme?"},{"a":"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.","q":"Can tailwindcss-advanced-design-systems help with fluid typography and spacing using clamp()?"},{"a":"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.","q":"What tailwind dark mode tokens setup does this skill provide?"},{"a":"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.","q":"How can I set up multi-brand or multi-theme support with CSS variables?"},{"a":"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.","q":"Does this skill cover syncing design tokens from Figma to Tailwind?"}],"shadow_tags":["token-management","design-system-architecture","color-space-oklch","responsive-scaling","theme-switching","semantic-naming","component-composition","cross-brand-theming","token-documentation","design-tool-integration"],"summary_rewrite":"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."},"files":[{"bytes":16063,"path":"plugins/tailwindcss-master/skills/tailwindcss-advanced-design-systems/SKILL.md","sha256":"7885c2b7ea587de61baee0961f5ad9fa076f0a22f17e0828617713a71dc28faf","url":"https://skillfed.io/files/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems/5386e6e9/SKILL.md"}],"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems","links":{"html":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems","md":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems.md","repo":"https://github.com/JosiahSiegel/claude-plugin-marketplace"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"Shell","last_updated":"2026-06-18","license":"MIT","name":"tailwindcss-advanced-design-systems","publisher":"JosiahSiegel","stars":49},"relations":{"similar":[{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"Pixel-Process-UG/superkit-agents/ui-design-system"},{"id":"jjyaoao/HelloAgents/frontend-design"},{"id":"AnswerZhao/agent-skills/frontend-design"},{"id":"giuseppe-trisciuoglio/developer-kit/tailwind-design-system"},{"id":"yonatangross/orchestkit/design-system-tokens"},{"id":"deveshpunjabi/modern-frontend-skill/modern-frontend-design"},{"id":"s-hiraoku/synapse-a2a/frontend-design"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-layouts"},{"id":"xobotyi/cc-foundry/tailwindcss"}]},"slug":{"owner":"JosiahSiegel","repo":"claude-plugin-marketplace","skill":"tailwindcss-advanced-design-systems"},"version":"5386e6e9"}