skills.rest
leonardoteodoroo
leonardoteodorooCOMMUNITY
Explore all skills by this author →
GitHub

design-system-patterns

Define design system tokens, theming, and component architecture patterns.

Updated Feb 3, 2026
Search Tags:#theming#design-system#css-variables#design-tokens#component-architecture#style-dictionary#token-pipeline
One-click install
npx skills add https://github.com/leonardoteodoroo/amino-advanced --skill design-system-patterns-leonardoteodoroo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/leonardoteodoroo/amino-advanced/tree/main/.agent/skills/design-system-patterns
Command: npx skills add https://github.com/leonardoteodoroo/amino-advanced --skill design-system-patterns-leonardoteodoroo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design System Patterns provides a structured approach to building scalable UI foundations by organizing tokens, theming infrastructure, and component architecture patterns, reducing inconsistency and rework across products.

Core Features & Use Cases

  • Token management: primitive tokens, semantic tokens, and component tokens for multi-platform consistency.
  • Theming infrastructure: CSS custom properties, theme context/providers, and persistent theme storage.
  • Component architecture patterns: compound components, polymorphic APIs, slot-based composition, and headless patterns to enable scalable design systems.
  • Use Case: Teams delivering multi-brand design languages can reuse tokens and themes across web and mobile apps while maintaining a single source of truth.

Quick Start

Create a basic token set and apply a light theme to a sample 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 multi-platform component library?▼

Structure design tokens by organizing them into primitive, semantic, and component tiers to ensure multi-platform consistency. This hierarchy establishes a single source of truth, allowing teams to reuse design language across web and mobile apps while maintaining scalable APIs.

What's the best way to implement theming infrastructure using CSS variables?▼

Implement theming infrastructure using CSS custom properties combined with theme context providers and persistent theme storage. This approach ensures consistent design language across products and enables seamless switching between light and dark themes without rework.

Can I use Style Dictionary to build a token pipeline for web and mobile apps?▼

Yes, Style Dictionary configurations are specified as implementation references to guide teams in building token pipelines. It helps transform primitive and semantic tokens into platform-specific outputs, ensuring consistent design language across web and mobile applications.

How do compound components and headless patterns improve component architecture?▼

Compound components, polymorphic APIs, slot-based composition, and headless patterns improve component architecture by enabling scalable design systems. These patterns separate logic from presentation, allowing teams to build flexible, reusable UI elements with consistent APIs.

When do I need semantic tokens versus primitive tokens in a design system?▼

You need semantic tokens when mapping primitive values to specific UI contexts like colors or spacing, ensuring contextual consistency. Primitive tokens hold raw values, while semantic tokens apply those values meaningfully, reducing inconsistency and rework across multi-brand products.

Related Skills

Explore More Design & Creative Skills→
llmh333llmh333

design-system

Scan existing UI styling and extract reusable design tokens.

Community
Intermediate
kyamsSRLkyamsSRL

design-system-patterns

Build scalable design systems with Style Dictionary token pipelines and React theme providers.

Community
Advanced
zzoohubzzoohub

design-system

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

Community
Advanced
HerxinsasaHerxinsasa
1

theme-factory

Generate custom color palettes and font pairings for presentations and documents.

Community
Intermediate