skills.rest
Yoriichi-Dang
Yoriichi-DangCOMMUNITY
Explore all skills by this author →
GitHub

design-system-patterns

Codify design tokens, theming, and component APIs for scalable design systems.

Updated Dec 26, 2025
Search Tags:#theming#tokens#design-system#design-tokens#pattern-library#component-patterns
One-click install
npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill design-system-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/Yoriichi-Dang/dashboard_web_template/tree/main/.agents/skills/design-system-patterns
Command: npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill design-system-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Establish scalable UI foundations across teams by standardizing tokens, theming, and component APIs to ensure consistency and maintainability.

Core Features & Use Cases

  • Design Tokens: primitive, semantic, and component tokens with multi-platform generation.
  • Theming Infrastructure: CSS custom properties, theme context, and system-preference support.
  • Component Architecture: compound components, polymorphic APIs, variants, slots, and headless patterns.
  • Token Pipeline & Governance: Figma-to-code synchronization, token transformation, and CI/CD for updates.
  • Use Cases: multi-brand apps, design-system libraries, and rapid UI scaffolding for new projects.

Quick Start

Initialize a token-driven design system by defining primitive, semantic, and component tokens, then implement a theming layer with CSS variables and a ThemeProvider, and start building components that consume the tokens.

Frequently Asked Questions about design-system-patterns

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

FAQPage Schema
How do I scale UI with token-driven design patterns for a multi-brand application?▼

Scale UI with token-driven design patterns by codifying primitive, semantic, and component tokens, then implementing a theming layer with CSS variables and a ThemeProvider for multi-brand scenarios.

What is the best way to structure design tokens for a maintainable component library?▼

Structure design tokens by defining primitive, semantic, and component tokens hierarchically, enabling multi-platform generation and robust component architecture for consistent, maintainable UI libraries.

How does theming infrastructure work with CSS custom properties and theme context?▼

Theming infrastructure works by applying CSS custom properties and a ThemeProvider to manage theme context, supporting system-preference detection and enabling dynamic theme switching across web and mobile projects.

Can I synchronize design tokens from Figma to code for component pattern updates?▼

Yes, you can synchronize design tokens from Figma to code using a token pipeline that handles token transformation and CI/CD updates, ensuring Figma-to-code synchronization and governance.

Does this approach support compound components and polymorphic APIs for UI scaffolding?▼

Yes, this approach supports compound components, polymorphic APIs, variants, slots, and headless patterns, enabling rapid UI scaffolding and robust component architecture for new projects.

When do I need semantic token hierarchies for multi-brand design systems?▼

You need semantic token hierarchies when building multi-brand design systems to standardize theming infrastructure, ensuring consistent component APIs and maintainable UI foundations across teams and platforms.

Related Skills

Explore More Design & Creative Skills→
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced
truongnattruongnat
1

code-packaging-pro

Automate Python packaging and Docker image release workflows.

Community
Advanced
civictechdccivictechdc
1

design-system-patterns

Designsystem for rapid prototyping and UI development with Tailwind-like utility classes and WCAG AA compliant theming, packaged as a reusable Python library.

Official
Advanced
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate