theming-components_skill

Overview

This skill provides a comprehensive design token system and theming framework that acts as the single source of truth for UI styling across all components. It defines a complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), supports theme switching (light/dark/high-contrast/custom), and includes RTL and accessibility-first features. Use it to enforce consistent, customizable branding and to make theme changes automatic across your application. It exports tokens for web and native platforms for seamless multi-platform styling.

How this skill works

Components reference tokens (CSS custom properties or platform equivalents) for all visual styles so appearance is driven by token values rather than component code. Themes are implemented as token override files (data-theme attributes or platform token files) so switching themes updates every component automatically. The system uses CSS logical properties for RTL support, media queries for reduced-motion, and automated tooling (Style Dictionary and scripts) to validate tokens and build platform outputs.

When to use it

• When implementing light/dark mode and custom brand themes across a product
• When building new UI components that must match a shared design system
• When ensuring accessibility requirements like WCAG contrast and reduced motion
• When supporting RTL languages and automatic layout flipping
• When exporting a single token set to web, iOS, Android, and JS

Best practices

• Always reference semantic tokens in components (primitive → semantic → component hierarchy)
• Use logical CSS properties (padding-inline, margin-inline-start) to enable RTL without conditional styles
• Keep theme overrides small—change tokens, not component code
• Validate contrast and token structure with the provided scripts as part of CI
• Export tokens via Style Dictionary to keep platform implementations in sync

Example use cases

• Create a brand theme that swaps primary color, font, and radii without touching components
• Add a high-contrast theme for accessibility-compliant deployments
• Enable user-controlled light/dark toggle that persists in localStorage
• Build components that automatically flip layout for RTL languages
• Generate iOS and Android token files from the same JSON source via Style Dictionary