What tools does this skill work with?

It is designed to work with Style Dictionary for token management, various CSS-in-JS libraries, Tailwind CSS, and standard CSS Custom Properties.

Does this skill support dark mode?

Yes, it includes patterns for implementing light/dark mode switching using CSS variables, theme providers, and data-attribute strategies.

How does it handle color accessibility?

It includes logic to generate color scales and perform WCAG contrast checks to ensure your design system remains accessible and compliant.

Can it integrate with Tailwind CSS?

Absolutely, the skill provides specific configurations to map your custom design tokens directly into the tailwind.config.js file.

What are design tokens in this context?

Design tokens are the visual atoms of a design system, representing values like colors, spacing, and typography in a platform-agnostic JSON format that can be transformed for CSS, JS, or iOS/Android.

Design System Manager

Name: Design System Manager
Author: deve1993

bydeve1993

•

デザインツール

Architects and maintains scalable design systems using design tokens, multi-theme support, and standardized UI patterns.

概要

The Design System Manager skill empowers developers to build consistent, production-grade UI foundations by automating the creation of design tokens, themes, and component registries. It manages the complexities of color palette generation with WCAG compliance, type scales, and responsive spacing systems while providing standardized configurations for tools like Style Dictionary, Tailwind CSS, and CSS-in-JS. This skill is essential for engineering teams looking to maintain visual consistency across large-scale applications and streamline the technical implementation of brand guidelines.

主な機能

1 GitHub stars
Standardized export configurations for Style Dictionary and Tailwind CSS
Automated design token generation for colors, spacing, and typography
Comprehensive component registry management and usage documentation
WCAG-compliant color palette generation and accessibility verification
Multi-theme support with robust light and dark mode implementations

ユースケース

Building a themeable UI library for a multi-tenant SaaS platform
Migrating legacy CSS to a modern, token-based design system architecture
Automating the synchronization of brand colors and typography across web and mobile

概要

主な機能

1 GitHub stars
Standardized export configurations for Style Dictionary and Tailwind CSS
Automated design token generation for colors, spacing, and typography
Comprehensive component registry management and usage documentation
WCAG-compliant color palette generation and accessibility verification
Multi-theme support with robust light and dark mode implementations

ユースケース

Building a themeable UI library for a multi-tenant SaaS platform
Migrating legacy CSS to a modern, token-based design system architecture
Automating the synchronization of brand colors and typography across web and mobile