skills.rest
duanbiao2000
duanbiao2000COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-patterns

Standardize design tokens, CSS theming, and component APIs for UI consistency.

3|1|Updated Feb 3, 2026
Search Tags:#theming#tokens#ui-patterns#design-systems#component-architecture#style-dictionary
One-click install
npx skills add https://github.com/duanbiao2000/obsidianDoc26 --skill design-system-patterns-duanbiao2000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/duanbiao2000/obsidianDoc26/tree/main/agents-main/plugins/ui-design/skills/design-system-patterns
Command: npx skills add https://github.com/duanbiao2000/obsidianDoc26 --skill design-system-patterns-duanbiao2000

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Standardize design tokens, theming, and component APIs to ensure scalable and consistent UI across products.

Core Features & Use Cases

  • Tokenization and token hierarchies (primitive, semantic, component) to create reusable design decisions.
  • Theming infrastructure with CSS custom properties and theme switching for light/dark or multi-brand setups.
  • Component architecture patterns for building flexible, composable UI libraries, including patterns like compound components, polymorphic components, and slots.
  • Token pipeline and best practices for maintaining design-system docs and governance.

Quick Start

Create a starter design system by defining primitive and semantic tokens, establish a CSS theming strategy, and build a basic component library.

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 component library?▼

Structure design tokens using a three-tier hierarchy of primitive, semantic, and component tokens to standardize reusable design decisions. This taxonomy enforces consistent UI variables and creates a clear design-system scaffold for web and mobile apps.

What is the best way to implement theming infrastructure for multi-brand design systems?▼

Implement theming infrastructure using CSS custom properties to enable theme switching for light, dark, or multi-brand setups. This strategy standardizes component APIs and ensures scalable visual consistency across different product brands.

How does a token pipeline work with style dictionaries for UI patterns?▼

A token pipeline processes design tokens through style dictionaries to generate standardized theming variables. This mechanism enforces token taxonomy and automates the transformation of primitive and semantic tokens into CSS properties.

Can I use compound and polymorphic components for flexible web and mobile architecture?▼

Yes, you can build flexible and composable UI libraries using compound components, polymorphic components, and slots. These component architecture patterns standardize APIs and ensure consistent UI across web and mobile applications.

Do I need a design-system scaffold to maintain token governance and documentation?▼

Yes, establishing a design-system scaffold is necessary to maintain token pipelines and enforce best practices for design-system docs and governance. It provides the structural foundation for your token taxonomy and theming strategy.

Related Skills

Explore More Design & Creative Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
zzoohubzzoohub

design-system

Standardize design tokens and component architecture across web and React Native.

Community
Advanced
yusufcmgyusufcmg
1

design-system-patterns

Provides patterns for building scalable design systems with tokens, theming, and React components.

Community
Advanced
radioactive-labsradioactive-labs
68

plutonium-theming

Apply CSS design tokens to standardize UI theming across web application components.

Official
Advanced