design-system-patterns

Overview

What is design-system-patterns?

design-system-patterns is a practical skill for building scalable and consistent design systems. It provides guidance and patterns for creating design tokens, theming infrastructure, and component architecture, primarily for UI design and React-based projects.

Who Should Use This Skill?

• UI designers and frontend engineers seeking to establish a maintainable design system
• Teams building component libraries or multi-brand theming
• Developers implementing theme switching or semantic token hierarchies

Problems Solved

• Centralizes design decisions with tokens for color, typography, spacing, and more
• Enables robust theme switching (light/dark, brand themes)
• Supports scalable component APIs and compound component patterns
• Bridges design-to-code workflows, including Figma token integration

How to Use

Installation Steps

1. Install design-system-patterns via Agent Skills Finder:

   npx skills add https://github.com/wshobson/agents --skill design-system-patterns
   

2. Review the main files:
   • SKILL.md for skill overview and usage
   • references/design-tokens.md for token structure and naming conventions
   • references/theming-architecture.md for CSS custom properties and theme switching
   • references/component-architecture.md for React component patterns

Design Tokens: Getting Started

• Organize tokens into primitive, semantic, and component categories
• Use JSON or CSS custom properties for cross-platform token generation
• Example color token structure:

  {
    "color": {
      "primitive": { "gray": { "100": { "value": "#f5f5f5" } } } }
  }
  

Theming Infrastructure

• Implement theme switching with CSS custom properties and [data-theme] selectors
• Use React context providers for dynamic theme management
• Support system preferences (e.g., prefers-color-scheme)

Component Architecture Patterns

• Build compound components using React context for shared state
• Apply polymorphic patterns (as prop) for flexible rendering
• Define variants and sizes for scalable APIs

Adaptation Guidance

• Use the provided references as templates, not direct copies
• Integrate patterns into your own repo, adapting to your tech stack and branding

FAQ

Where can I find detailed examples?

Check the references/ folder for deep dives into design tokens, theming, and component architecture.

Is design-system-patterns only for React?

While many patterns use React context, the token and theming guidance is platform-agnostic and can be adapted to other frameworks.

How do I preview the skill's structure?

Open the Files tab to inspect all files, including nested references and helper scripts.

When is design-system-patterns not a good fit?

If your project does not require scalable theming, component libraries, or design token management, simpler UI solutions may suffice.

Can I use this skill for mobile apps?

Yes, design tokens and theming patterns can be adapted for iOS and Android platforms.