How does this skill help with dark mode?

It provides patterns for implementing light/dark theme switching using CSS custom properties and React context, including automatic system preference detection.

Does it support Figma integration?

It outlines workflows for synchronizing Figma tokens with code using automated pipelines and CI/CD integration to keep design and development in sync.

Can I use this for mobile development?

Yes, the skill includes configurations for Style Dictionary to transform design tokens for use in iOS (Swift) and Android (XML) projects.

What is a design token hierarchy?

It organizes values into three layers: primitives (raw values), semantic (contextual meaning), and component-specific tokens to ensure maintainability and scalability.

Design System Patterns

Name: Design System Patterns
Author: gwickman

bygwickman

0•

デザインツール

Builds scalable, themeable design systems using design tokens and advanced component architecture patterns.

This skill empowers developers to architect robust design systems by implementing multi-level token hierarchies, dynamic light and dark mode switching, and scalable component libraries. It provides standardized patterns for CSS custom properties, React context-based theming, and automated token pipelines using tools like Style Dictionary, ensuring visual consistency across web and mobile platforms while streamlining the design-to-code workflow.

主な機能

01Scalable component architecture using compound and polymorphic patterns

02Automated design-to-code pipelines with Style Dictionary integration

03Dynamic theme switching with light/dark mode and system preference detection

04Multi-tier design token implementation (primitive, semantic, component)

050 GitHub stars

06Cross-platform token generation for Web, iOS, and Android

ユースケース

01Building a white-label component library that supports multiple brand themes

02Transitioning hardcoded CSS values to a structured, maintainable design token system

03Establishing a synchronized workflow between Figma design tokens and production code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gwickman/auto-dev-test-target-1 design-system-patterns

For use in Claude.ai and ChatGPT

Download Skill