design-system-patterns

This skill provides a structured framework for architecting scalable, maintainable, and consistent design systems suitable for both web and mobile applications. It is designed for frontend engineers, UI architects, and design system leads who need to bridge the gap between design intent and production-ready code. By utilizing a layered approach to tokenization, it enables teams to move from raw primitives to semantic values and finally to component-specific tokens, ensuring that updates to core values ripple through the application without manual intervention.

• Multi-layer token architecture supporting primitive, semantic, and component-specific token hierarchies.

• Advanced theming infrastructure including CSS custom properties, system-level color scheme detection, and persistent React-based theme switching providers.

• Component composition strategies using compound patterns, polymorphic 'as' props, and headless UI structures for maximum flexibility.

• Automated token pipelines facilitating Figma-to-code synchronization using tools like Style Dictionary.

• Variant management and responsive style orchestration using modern libraries like CVA (class-variance-authority).

• Support for multi-brand and multi-platform theming systems, allowing for consistent UX across distinct product lines.

• Use this skill when establishing a new design system from scratch or refactoring an existing, fragmented UI library.

• Perfect for implementing light and dark mode switching, high contrast accessibility modes, and dynamic spacing systems.

• Effective for creating component libraries with consistent APIs, reduced bundle sizes, and improved developer experience (DX).

• Standardize your design-to-code workflow by defining clear constraints for colors, typography, shadows, and spacing.

• Expect outputs to include JSON or CSS-based token definitions, React context wrappers for theme management, and modular, variant-driven component architectures.

• Constraints include maintaining backward compatibility during system updates and ensuring that token hierarchies remain shallow enough to prevent CSS performance degradation.