design-system

Apply curated design styles to UI components using token-based theming with hierarchical memory and DTCG-compatible token definitions. This Skill offers 50+ professionally designed aesthetics—brutalist, cyberpunk, art-deco, and others—instantly applied to ensure brand consistency without generic output.

Style blending combines multiple aesthetics with weighted ratios to create unique visual combinations. For example, blend japandi with scandinavian at 80/20 to merge distinct design languages while maintaining coherence across your component system.

Generate new UI components pre-styled with active design system tokens. The Skill produces buttons, cards, navigation, and other components already styled with your selected aesthetic—neon colors, angular shapes, textures—ensuring consistent appearance from creation.

Yes, the Skill includes built-in accessibility validation against WCAG 2.1 AA standards. Token-based theming ensures color contrast, spacing, and interactive elements meet accessibility requirements across all 50+ curated styles.

The Skill uses DTCG-compatible token definitions for design tokens, enabling standardized format compatibility across web interfaces and design-token pipelines. This ensures tokens remain portable and interoperable with other design tools.

Load design context on demand using CLAUDE.md-driven context loading. This mechanism retrieves style definitions, token hierarchies, and component configurations as needed, reducing setup overhead and keeping your workflow flexible.