design-system-patterns

Name: design-system-patterns
Availability: InStock
Author: jhabbig

Design scalable design system foundations with tokens, theming, and component architecture.

Updated Apr 5, 2026

Search Tags:#theming #react #design systems #design tokens #component architecture #css variables #ui foundations

Ready to run

npx skills add https://github.com/Jhabbig/Habbig --skill design-system-patterns-jhabbig

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/Jhabbig/Habbig/tree/main/.claude/plugins/wshobson/ui-design/skills/design-system-patterns
Command: npx skills add https://github.com/Jhabbig/Habbig --skill design-system-patterns-jhabbig

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams create a coherent UI foundation so colors, spacing, typography, themes, and components stay consistent as products grow.

Core Features & Use Cases

Design Tokens: Define primitive, semantic, and component-level tokens for a maintainable visual language.
Theming Infrastructure: Implement light, dark, system, and multi-brand theme switching with CSS custom properties and React providers.
Component Architecture: Build compound, polymorphic, headless, slot-based, and variant-driven components that scale across teams.
Use Case: A product team can use this Skill to turn an inconsistent dashboard UI into a reusable design system with shared tokens, documented component APIs, and reliable theme support.

Quick Start

Ask for a design system architecture plan that defines tokens, theming, and reusable component patterns for your product UI.

Frequently Asked Questions about design-system-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure design tokens for a scalable UI system?▼

You can structure design tokens by defining primitive, semantic, and component-level layers to create a maintainable visual language. This approach separates raw values from contextual UI meanings, allowing teams to manage colors, spacing, and typography predictably across a growing product.

What is the best way to implement light and dark mode theming with CSS variables?▼

The best way to implement light and dark mode theming is by mapping semantic design tokens to CSS custom properties and toggling their values via a React theme provider. This infrastructure supports system, multi-brand, and explicit theme switching without rewriting component-level styles.

How do I build polymorphic and headless React components for a design system?▼

You build polymorphic and headless React components by establishing a variant-driven component architecture that separates visual logic from structural behavior. This allows UI elements to scale across teams through compound, slot-based, and accessible APIs while maintaining consistent design token adherence.

Does this design system architecture support multi-brand styling in React?▼

Yes, this design system architecture supports multi-brand styling in React by utilizing CSS custom properties combined with theme providers. It applies semantic token hierarchies that can be swapped dynamically, allowing a single component API to render entirely different brand visual languages.

When do I need semantic token hierarchies in my component architecture?▼

You need semantic token hierarchies when your UI platform requires consistent contextual styling across multiple themes or brands. By mapping primitive tokens to semantic roles, components consume intent-based values like surface-background instead of raw hex codes, ensuring scalable and maintainable styling.