skills.rest
lemu
lemuCOMMUNITY
Explore all skills by this author →
GitHub

design-system-patterns

Standardize design-system architectures with tokens, theming, and React component library patterns.

Updated Oct 22, 2025
Search Tags:#theming#design-system#design-tokens#pattern-library#ui-patterns#component-architecture#token-pipeline
One-click install
npx skills add https://github.com/lemu/sea-prototype-template --skill design-system-patterns-lemu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/lemu/sea-prototype-template/tree/main/.agents/skills/design-system-patterns
Command: npx skills add https://github.com/lemu/sea-prototype-template --skill design-system-patterns-lemu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design teams often struggle to scale UI systems across platforms due to fragmented tokens, inconsistent theming, and disconnected component APIs.

Core Features & Use Cases

  • Token management across primitive, semantic, and component tokens to ensure consistency.
  • Theming infrastructure for light/dark themes and multi-branding.
  • Component architecture patterns including compound components, polymorphic APIs, and CVA-based variants.
  • Token pipelines and design-to-code workflows (Figma to code, Style Dictionary configurations) to synchronize design and implementation.

Quick Start

Create a starter design-system scaffold with tokens, theming, and a component API skeleton.

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 ensure consistency across web and mobile projects. This approach standardizes token management and synchronizes design with implementation.

What is the best way to implement light and dark theming with CSS custom properties?▼

Implement light and dark theming by mapping semantic tokens to CSS custom properties semantics. This infrastructure supports multi-branding and allows theme switching without altering individual component styles.

How do I manage React component variants and polymorphic APIs in a design system?▼

Manage React component variants using pattern-based approaches like compound components, polymorphic APIs, and CVA-based variants. These patterns guide implementation and ensure flexible, reusable component architecture.

Can I use Style Dictionary to build a token pipeline from Figma to code?▼

Yes, you can configure Style Dictionary in your token pipeline to synchronize design-to-code workflows. This setup translates Figma designs into standardized tokens for consistent cross-platform implementation.

When should I use semantic tokens instead of primitive tokens in my UI design system?▼

Use semantic tokens to map primitive values like raw colors to contextual UI meanings, ensuring consistency during theming and multi-branding. Primitive tokens store raw values, while semantic tokens provide reusable context.

Does this design system approach work for both web and mobile React projects?▼

Yes, the component architecture patterns and token hierarchies are specified to guide implementation across web and mobile projects. It structures React component libraries to scale UI systems consistently on multiple platforms.

Related Skills

Explore More Design & Creative Skills→
NominexHQNominexHQ
15

pmm-init

Initialize structured git-backed memory with guided configuration and scaffolding.

Official
Advanced
rp4rirp4ri

design-token-extractor

Extracts design tokens from CSS, SCSS, JavaScript, and Tailwind config files into CSS custom properties, Tailwind config, and Style Dictionary JSON.

Community
Advanced
rakibulismrakibulism
2

shadcn-ui

Implement shadcn/ui components with Radix primitives, Tailwind styling, and CVA variants.

Community
Intermediate
KurrawongKurrawong
1

nuxt-ui

Provide pre-built Vue components for Nuxt 4 applications with Tailwind CSS v4.

Official
Intermediate