How does this skill handle dark mode implementation?

It provides standardized patterns for using CSS custom properties and React Context to detect system preferences and implement persistent, dynamic theme switching.

Does this skill support mobile development?

Yes, it includes configurations for Style Dictionary to transform design tokens into platform-specific formats for iOS (Swift) and Android (XML/JSON).

Can I use this with Tailwind CSS or Shadcn/UI?

Absolutely. The patterns provided are compatible with modern utility-first frameworks and headless UI libraries, focusing on the underlying token and variant logic.

What is the recommended token hierarchy?

The skill promotes a three-layer hierarchy: Primitive tokens for raw values, Semantic tokens for contextual meaning, and Component tokens for specific UI element overrides.

Design System Patterns

Name: Design System Patterns
Author: Microck

byMicrock

•

Herramientas de Diseño

Architects scalable UI foundations using design tokens, multi-brand theming infrastructure, and robust component library patterns.

Design System Patterns provides a comprehensive framework for building and maintaining professional-grade UI systems within Claude Code. It guides developers through the creation of structured design token hierarchies—spanning primitive, semantic, and component levels—while implementing sophisticated theming engines for light, dark, and high-contrast modes. By leveraging industry-standard patterns like polymorphic components and Style Dictionary integration, this skill ensures consistency across web and mobile platforms, streamlining the workflow between design handoff and production-ready code.

Características Principales

01Figma-to-code synchronization and Style Dictionary configuration

02Multi-level design token architecture (Primitive, Semantic, Component)

03Polymorphic and compound component architecture patterns

04Dynamic theme switching with CSS Custom Properties and React Context

052 GitHub stars

06Automated token transformation for Web, iOS, and Android platforms

Casos de Uso

01Establishing a multi-brand theming system for complex SaaS applications

02Building a custom, accessible React component library from scratch

03Automating the design-to-code pipeline for cross-platform visual consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck design-system-patterns

For use in Claude.ai and ChatGPT

Download Skill