How is RTL (Right-to-Left) language support handled?

The skill utilizes CSS logical properties (like margin-inline-start instead of margin-left) to ensure layouts automatically flip correctly for languages such as Arabic or Hebrew without extra code.

What are design tokens in this context?

Design tokens are the foundational variables (color, spacing, typography, etc.) that act as a single source of truth for all visual design decisions across your application, ensuring consistency regardless of the platform.

Does this skill support dark mode?

Yes, it includes a robust theme switching architecture that supports light, dark, high-contrast, and custom brand themes via CSS custom properties and theme providers.

Can I use these tokens for mobile app development?

Absolutely. The system is designed to work with Style Dictionary, allowing you to export your design tokens to iOS (Swift), Android (XML), and JavaScript formats.

Design Tokens & Theming System

Name: Design Tokens & Theming System
Author: ancoleman

byancoleman

•

158

•

设计工具

Implements a robust design token system and theming framework for consistent, accessible, and customizable UI styling across applications.

This skill establishes a unified design token architecture that serves as the single source of truth for all visual design decisions in AI-assisted development. It provides a comprehensive framework for managing colors, typography, spacing, and more, while offering built-in support for dark mode, RTL layouts, and WCAG accessibility standards. By centralizing design logic into primitive, semantic, and component-specific tokens, it ensures visual consistency across entire applications and simplifies the process of creating brand-specific themes or multi-platform style exports for web, iOS, and Android.

主要功能

01Multi-platform export capabilities for CSS, SCSS, iOS Swift, Android XML, and JavaScript

02WCAG 2.1 AA/AAA accessibility compliance with high-contrast mode and reduced motion

03Complete 7-category token taxonomy covering color, typography, spacing, and motion

04Multi-theme architecture supporting light, dark, high-contrast, and custom branding

05Automatic RTL/i18n support through CSS logical properties integration

06158 GitHub stars

使用场景

01Implementing automated dark mode and high-contrast accessibility themes

02Building a scalable, brand-consistent design system for enterprise applications

03Standardizing UI styling across distributed teams using AI-assisted coding

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ancoleman/ai-design-components theming-components

For use in Claude.ai and ChatGPT

主要功能

01Multi-platform export capabilities for CSS, SCSS, iOS Swift, Android XML, and JavaScript

02WCAG 2.1 AA/AAA accessibility compliance with high-contrast mode and reduced motion

03Complete 7-category token taxonomy covering color, typography, spacing, and motion

04Multi-theme architecture supporting light, dark, high-contrast, and custom branding

05Automatic RTL/i18n support through CSS logical properties integration

06158 GitHub stars

使用场景

01Implementing automated dark mode and high-contrast accessibility themes

02Building a scalable, brand-consistent design system for enterprise applications

03Standardizing UI styling across distributed teams using AI-assisted coding