skills.rest
ZiadNagar
ZiadNagarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-patterns

Define token hierarchies and theming patterns for design systems.

Updated Mar 8, 2026
Search Tags:#design#theming#tokens#CVA#design-systems#style-dictionary#token-naming
One-click install
npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill design-system-patterns-ziadnagar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/ZiadNagar/zeVillage-AI-Toolkit/tree/main/skills/design-system-patterns
Command: npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill design-system-patterns-ziadnagar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle with maintaining consistent design tokens and theming across multiple components and platforms. This skill provides a structured approach to token layers, naming conventions, and component APIs to ensure a cohesive and scalable UI.

Core Features & Use Cases

  • Token hierarchy: primitive → semantic → component, ensuring a single source of truth for design values.
  • Theming and CSS variable strategies: support light, dark, and system themes with React Context.
  • CVA-based component APIs and consistent variant systems to reduce code duplication.
  • Style Dictionary configurations to generate multi-platform tokens (CSS, JS, iOS, Android) from one source.
  • Use Case: when launching a new design system, integrate tokens, theming, and component APIs to deliver a unified UI across web and mobile.

Quick Start

Define a design-system baseline by outlining primitive, semantic, and component tokens, then implement theming and CVA-based components in your app.

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 multi-platform system?▼

Structure design tokens using a primitive, semantic, and component token hierarchy to maintain a single source of truth. This layered approach ensures consistent UI values and scalable theming across web and mobile platforms.

What is the best way to manage theming and CSS variables for light and dark modes?▼

Manage theming and CSS variables for light and dark modes using React Context. This strategy supports light, dark, and system themes while applying a principled token hierarchy for consistent UI across platforms.

How do I generate multi-platform design tokens from a single source?▼

Generate multi-platform design tokens from a single source using Style Dictionary configurations. This approach outputs synchronized token formats for CSS, JS, iOS, and Android platforms from one baseline.

How do I create consistent component variants and reduce code duplication?▼

Create consistent component variants and reduce code duplication by applying CVA-based component APIs. This method establishes a principled variant system to ensure consistent UI implementation across teams.

Can I use this design system approach for both web and mobile platforms?▼

Yes, you can use this design system approach for web and mobile platforms. It defines a principled token hierarchy and uses Style Dictionary to generate multi-platform tokens, enabling a unified UI across platforms.

Related Skills

Explore More Design & Creative Skills→
windyskywindysky

moai-domain-uiux

Establish domain UI/UX foundations with design tokens and theming for React and Vue.

Community
Basic
mrodrigues1mrodrigues1

design-system-patterns

Generate design tokens and platform outputs with Style Dictionary pipelines.

Community
Advanced
planetaryescapeplanetaryescape

auto-generated-shadcn-ui-patterns

Define and reuse CVA-based UI variants for shadcn/ui components in React.

Official
Advanced
masermediagroup-stackmasermediagroup-stack
1

theming-components

Centralize design tokens for color, typography, spacing, and themes.

Community
Advanced