skills.rest
MinhAnh-Corp
MinhAnh-CorpOFFICIAL
Explore all skills by this author →
GitHub

design-system-patterns

Codifies design tokens, theming infrastructure, and reusable UI component patterns for scalable systems.

Updated Apr 8, 2026
Search Tags:#theming#cross-platform#design-tokens#ui-patterns#design-systems#component-architecture#style-dictionary
One-click install
npx skills add https://github.com/MinhAnh-Corp/ai-designer --skill design-system-patterns-minhanh-corp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/MinhAnh-Corp/ai-designer/tree/main/skills/ui-design-system-patterns
Command: npx skills add https://github.com/MinhAnh-Corp/ai-designer --skill design-system-patterns-minhanh-corp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Traditional UI design systems struggle with consistency and scalability across products. This Skill provides a blueprint for tokens, theming, and pattern-driven components to unify design language.

Core Features & Use Cases

  • Design Tokens: Primitive, semantic, and component tokens to drive visuals.
  • Theming Infrastructure: Centralized theme switching and CSS properties for light/dark/brand themes.
  • Component Architecture: Patterns for compound, polymorphic, and slot-based components to enable scalable libraries.
  • Token Pipeline: Cross-platform token generation and CI/CD integration.

Quick Start

Define your token strategy and scaffold a starter design system to begin token-driven theming and component patterns.

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 cross-platform UI?▼

Structure design tokens using primitive, semantic, and component-level hierarchies to drive visuals. This approach codifies token pipelines for cross-platform generation and ensures consistent UI foundations across web and mobile products.

What is the best way to implement multi-theme support for light and dark modes?▼

Implement multi-theme support using centralized theme management and CSS properties for light, dark, and brand themes. This theming infrastructure allows efficient theme switching across your application without refactoring individual component styles.

How do I architect a component library using polymorphic and compound patterns?▼

Architect component libraries using compound, polymorphic, and slot-based component patterns. These reusable patterns provide scalable component APIs, enabling flexible composition and consistent behavior across your design system.

Can I use Style Dictionary to generate design tokens for web and mobile?▼

Yes, you can integrate Style Dictionary within a cross-platform token pipeline. This setup automates token generation and CI/CD integration, transforming centralized token definitions into platform-specific outputs for web and mobile applications.

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

Use semantic tokens to map primitive tokens to contextual UI meanings, ensuring adaptable theming. Primitive tokens hold raw visual values, while semantic tokens drive component tokens, allowing global theme changes without altering individual component logic.

Does this approach work for managing brand themes across multiple products?▼

Yes, this approach centralizes theme management using CSS properties to support multiple brand themes. It unifies design language across products by applying consistent token hierarchies and pattern-driven component architecture.

Related Skills

Explore More Design & Creative Skills→
yonatangrossyonatangross
3

design-system-starter

Generate design tokens, atomic components, and documentation templates for UI systems.

Community
Advanced
mrodrigues1mrodrigues1

design-system-patterns

Generate design tokens and platform outputs with Style Dictionary pipelines.

Community
Advanced
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced
abdulahad139abdulahad139

tailwind-css

Standardize UI styling with reusable Tailwind CSS patterns in React/Next.js apps.

Community
Intermediate