design-system-patterns

This skill provides a comprehensive framework for engineering robust, scalable design systems. It is intended for frontend engineers, UI architects, and design system maintainers who need to bridge the gap between Figma design assets and production-ready code. By focusing on token-driven development, it enables teams to maintain visual consistency across large-scale web and mobile applications while significantly reducing technical debt through standardized component architecture.

The skill covers the entire lifecycle of a design system, from the initial definition of primitive tokens to the implementation of complex multi-theme switching infrastructures. It integrates modern industry standards such as Style Dictionary for multi-platform token generation and utilizes React patterns like compound components and headless UI to ensure that components are both flexible and accessible. Whether you are building a system from scratch or refactoring an existing component library to support dark mode and dynamic theming, this skill provides the architectural patterns necessary for success.

• Primitive, semantic, and component-level token definition strategies for granular visual control

• Implementation of dynamic theme switching using CSS custom properties, system preference detection, and persistent storage

• Architectural patterns for component libraries, including polymorphic components, slot-based composition, and headless UI patterns

• Automated design-to-code pipelines utilizing Figma-to-code synchronization and CI/CD integration

• Advanced theming capabilities such as multi-brand support, reduced motion, and high-contrast accessibility modes

• Use of class-variance-authority (CVA) and modern CSS architectures to manage complex variant and size systems

• Ideal for projects requiring cross-platform consistency across iOS, Android, and Web

• Provides templates for token hierarchies, theme context providers, and component variant management

• Recommended for teams establishing design-to-code workflows or migrating to token-based style systems

• Useful for implementing design system documentation and maintaining consistent developer experience (DX)

• Constraints: Best utilized in environments with modern build tools (Vite, Webpack) and CSS-in-JS or CSS-module workflows