design-system

Apply curated visual styles using design tokens—this Skill manages 50+ predefined aesthetics (brutalist, cyberpunk, art-deco) through token-based theming via style-dictionary, ensuring consistency and eliminating hard-coded styling across components like dashboards, cards, and forms.

Yes, style blending combines multiple visual aesthetics with custom ratios—for example, blend japandi with scandinavian at 80/20—so you can create hybrid design systems without manually reconciling conflicting token values.

This Skill enforces accessibility through validation hooks and axe-core integration, automatically checking styled components against WCAG 2.1 AA before deployment to catch contrast, semantic, and interaction issues.

Use curated, distinctive visual styles instead of defaults—this Skill's 50+ hand-crafted aesthetics replace generic patterns, ensuring your interfaces stand out while maintaining design consistency through automated token application.

Yes, the sd-tailwindcss-transformer dependency bridges design tokens and Tailwind, letting you generate styled components that adhere to your active design system while leveraging Tailwind's utility-first approach.

Progressive token loading is supported through the CLAUDE design-system workflow, enabling staged application of design tokens so you can manage performance and phased style rollouts across components.