design-system-patterns

To build a scalable design system, use this skill to implement theming infrastructure via CSS custom properties and React context, and structure component architecture using compound and polymorphic patterns for maintainable UI development.

Manage design tokens by defining primitive, semantic, and component tokens for colors, typography, and spacing. This skill systematically applies these token hierarchies to ensure consistency across multiple product lines and platforms.

The best way to implement light and dark theme switching is by generating CSS custom properties mapped to your primitive color tokens. This skill provides the infrastructure to dynamically toggle these themes within your UI.

Yes, you need an existing understanding of CSS custom properties, React context, and component composition patterns like compound and polymorphic components to effectively build and maintain robust design systems with this skill.

Use compound and polymorphic components when establishing a new design system for large organizations requiring flexible UI development. This skill leverages these patterns to ensure component reusability across multiple product lines.

Using semantic and component level design tokens bridges the gap between design and development by mapping primitive values to contextual meanings. This ensures maintainability and multi-platform support across your UI components.