design-system-patterns

What problem does it solve?

This Skill provides a comprehensive framework and patterns for building robust, scalable, and maintainable design systems from the ground up.

Core Features & Use Cases

• Design Tokens: Define and manage primitive and semantic design tokens for colors, typography, spacing, and effects.
• Theming: Implement dynamic theming, including light/dark modes and multi-brand support, using CSS custom properties and React context.
• Component Architecture: Utilize patterns like compound components, polymorphic components, and slot patterns for flexible and reusable UI elements.
• Use Case: A team needs to establish a consistent visual language across multiple web applications and ensure easy theming for different clients. This Skill provides the blueprints for tokens, theming infrastructure, and component patterns to achieve this.

Quick Start

Use the design-system-patterns skill to generate foundational design tokens for a new project.