What are design tokens in this context?

Design tokens are the smallest atoms of your design system, representing values like colors, typography, and spacing that ensure visual consistency across different platforms and products.

Can I use this with React?

Absolutely. It features specific patterns for React Context-based theming and building accessible, variant-driven components using libraries like Class Variance Authority (CVA).

Does it support multi-platform development?

Yes, it includes configurations for tools like Style Dictionary to transform design tokens into formats compatible with Web (CSS/SCSS), iOS (Swift), and Android (XML).

How does this skill help with dark mode?

It provides standardized patterns for implementing semantic tokens and CSS custom properties that adapt automatically based on system preferences or manual theme toggles.

Design System Patterns

Name: Design System Patterns
Author: JantonioFC

byJantonioFC

•

Design Tools

Architect scalable UI foundations using design tokens, multi-platform theming infrastructure, and modular component patterns.

This skill empowers developers to build robust and maintainable design systems by implementing a structured hierarchy of design tokens, dynamic theming infrastructure, and advanced component architectures. It provides proven patterns for synchronizing Figma designs with code, managing light and dark modes through CSS custom properties, and creating flexible, polymorphic UI components that scale across large-scale web and mobile applications.

Key Features

01Tiered design token architecture (Primitive, Semantic, Component)

02Light/Dark mode and multi-brand theming infrastructure

03Figma-to-code synchronization and transformation workflows

042 GitHub stars

05Compound and polymorphic component architecture patterns

06Automated token pipelines using Style Dictionary

Use Cases

01Implementing dynamic theme switching with system preference detection

02Building an enterprise-grade UI library with consistent API patterns

03Automating design-to-code handoffs for multi-platform applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank design-system-patterns

For use in Claude.ai and ChatGPT

Key Features

01Tiered design token architecture (Primitive, Semantic, Component)

02Light/Dark mode and multi-brand theming infrastructure

03Figma-to-code synchronization and transformation workflows

042 GitHub stars

05Compound and polymorphic component architecture patterns

06Automated token pipelines using Style Dictionary

Use Cases

01Implementing dynamic theme switching with system preference detection

02Building an enterprise-grade UI library with consistent API patterns

03Automating design-to-code handoffs for multi-platform applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank design-system-patterns

For use in Claude.ai and ChatGPT