skills.rest
masermediagroup-stack
masermediagroup-stackCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

theming-components

Implements W3C design tokens with theme switching, RTL support, and multi-platform exports.

1|Updated Feb 24, 2026
Search Tags:#theming#accessibility#design tokens#dark mode#css variables#rtl#style dictionary
One-click install
npx skills add https://github.com/masermediagroup-stack/maser-media --skill theming-components-masermediagroup-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theming-components
Source: https://github.com/masermediagroup-stack/maser-media/tree/main/.cursor/skills/community/ai-design-components/skills/theming-components
Command: npx skills add https://github.com/masermediagroup-stack/maser-media --skill theming-components-masermediagroup-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires style-dictionary, and includes scripts (resource) and references (resource) components.

What problem does it solve? Maintaining consistent visual styling across UI components becomes unmanageable when colors, spacing, and typography are hardcoded, making theme switching, brand customization, and RTL language support require invasive code changes. ## Core Features & Use Cases - Design Token System: Defines a 3-tier token hierarchy (primitive, semantic, component) across 7 categories including color, spacing, typography, borders, shadows, motion, and z-index using the W3C design token format. - Theme Switching: Provides light, dark, and high-contrast themes applied via the data-theme attribute, with localStorage persistence and system preference detection through prefers-color-scheme. - Multi-Platform Export: Transforms tokens via Style Dictionary into CSS custom properties, SCSS, JavaScript/TypeScript, iOS Swift, and Android XML. - Use Case: A team building a component library needs dark mode and Arabic RTL support; they reference component tokens like --button-bg-primary in their CSS, and theme switching plus logical properties handle both requirements without component code changes. ## Quick Start Set up a design token system with light and dark themes and show me how to wire a button component to the tokens.

Frequently Asked Questions about theming-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement light and dark mode with CSS custom properties?▼

Define token values under :root for the light theme and override them under :root[data-theme="dark"] for dark mode. Toggle themes by setting the data-theme attribute on the html element with JavaScript and persisting the choice to localStorage.

How to export design tokens to iOS and Android from one source?▼

Use Style Dictionary with a config that declares multiple platforms, transforming W3C-format JSON tokens into CSS variables, SCSS, JavaScript, iOS Swift classes, and Android XML resources. Run the build script to regenerate all platform outputs from the same token files.

What is the difference between primitive, semantic, and component design tokens?▼

Primitive tokens hold raw values like --color-blue-500, semantic tokens assign purpose like --color-primary, and component tokens target specific elements like --button-bg-primary. Components should reference component tokens so themes can override values without touching component code.

Does CSS logical properties support RTL languages like Arabic?▼

Yes, logical properties such as margin-inline-start, padding-inline, and text-align: start automatically flip direction in RTL contexts like Arabic and Hebrew. All modern browsers have supported logical properties since 2018, eliminating the need for separate RTL stylesheets.

How do I validate WCAG contrast ratios for design tokens?▼

Run the included validate_contrast.py script to check that text and background token combinations meet WCAG 2.1 AA requirements of 4.5:1 for normal text and 3:1 for large text. The high-contrast theme targets 7:1 ratios for WCAG AAA compliance.

Related Skills

Explore More Design & Creative Skills→
Intension-usIntension-us

design-consultation

Generate a DESIGN.md documenting typography, color, spacing, layout, and motion guidelines.

Official
Advanced
ricardocidalericardocidale

Reusable Chart Library

Provide reusable React chart components for bar, line, donut, radar, and radial visualizations.

Community
Intermediate
KyaniteLabsKyaniteLabs
3

theming

Establish semantic token systems for light, dark, and high-contrast UI themes.

Official
Advanced
0xKobold0xKobold
4

tailwind-v4

Configure Tailwind CSS v4 with CSS-first design tokens and @theme.

Official
Advanced