What is the theming-components skill?
The theming-components skill is the styling layer of the ai-design-components repository. It defines seven token categories, a three tier colour hierarchy, theme switching through a data-theme attribute, RTL support with CSS logical properties and accessibility rules for contrast and reduced motion. Other component skills in the repo reference it for their styling.
Its SKILL.md calls design tokens the single source of truth for visual decisions. The skill sits inside a collection of 76 skills, and its description says every component skill in that collection refers back to it for styling.
The seven token categories
- Colour, in three tiers: primitive scales, semantic roles such as primary, and component level tokens.
- Spacing, on a 4px base scale.
- Typography, borders and radius, shadows, motion and z-index.
Component tokens follow one naming pattern, --{component}-{property}-{variant}-{state}, for example --button-bg-primary-hover. Because every component reads tokens, a theme file can change the whole interface without touching component code.
Themes, RTL and accessibility
- Themes switch through a data-theme attribute on the html element, with light, dark, high contrast and custom brand examples.
- CSS logical properties such as margin-inline-start let layouts flip for right-to-left languages.
- Contrast targets are 4.5:1 for normal text and 3:1 for large text and UI components, plus a reduced motion rule.
Who the theming-components skill is for
Best for
- Setting up light and dark mode with CSS custom properties.
- Giving a component set one shared token naming scheme.
- Exporting tokens to other platforms through Style Dictionary.
Not for
- Extracting tokens from a site you already have. See extract-design-system.
- A palette decision on its own. color-system goes deeper on colour.
- A single dark mode review. dark-mode-design is narrower.
Use it with UiChemy
These tokens are plain CSS custom properties, which suits the HTML and CSS that UiChemy Composer writes inside Elementor or Gutenberg. For a Figma-first flow, UiChemy Figma to WordPress converts the design. Click Get Started on uichemy.com. See also design-token.
How to install Theming Components Skill: Design Tokens and Themes
git clone https://github.com/ancoleman/ai-design-components.gitClone the repository
Run
git clone https://github.com/ancoleman/ai-design-components.git. The skill sits in the skills/theming-components folder.Choose an install route
The README's recommended route is
./install.shfrom inside the clone, an interactive installer. For a manual install, copy skills/theming-components into your agent's skills folder.Plugin route
The README also describes adding the repo as a Claude Code plugin marketplace with
claude plugin marketplace add ancoleman/ai-design-components. It lists plugin groups.Ask for theming
Ask your agent to set up light and dark themes, add brand styles or check RTL support, using words from the skill description.
Check that it loaded
Ask the agent to theme a button for light and dark mode. It should reference tokens such as --button-bg-primary and switch themes through data-theme.
Key features
- Seven token categoriesColour, typography, spacing, borders, shadows, motion and z-index are all defined as tokens, so styling decisions have one source.
- Three tier colour modelPrimitive scales feed semantic tokens such as primary, success and error, which feed component tokens such as --button-bg-primary.
- Component naming conventionTokens follow --{component}-{property}-{variant?}-{state?}, giving names like --input-border-color-focus and --chart-color-1.
- Theme switchingSetting data-theme on the html element swaps light, dark, high contrast or custom brand values, and a short script saves the choice.
- RTL through logical propertiesThe skill replaces margin-left with margin-inline-start and similar, so layouts flip for right-to-left languages automatically.
- Accessibility tokensWCAG 2.1 AA contrast targets, a high-contrast theme and a prefers-reduced-motion rule are part of the token set.
- Platform exportsStyle Dictionary transforms JSON tokens into CSS variables, SCSS, iOS Swift, Android XML and JavaScript.
- W3C token formatTokens can be written as JSON with $value and $type fields, following the W3C design token format.
- Helper scriptsFour Python scripts generate colour scales, validate tokens, check contrast ratios and validate logical property use.
- Examples and referencesThemeProvider.tsx, ThemeToggle.tsx, TokenUsageExample.tsx and theme-switcher.html sit beside eight reference files.
Frequently asked questions
What is the theming-components skill?
It is a skill in ancoleman/ai-design-components that provides a design token and theming system. It defines seven token categories, light and dark themes, RTL support with logical properties and accessibility rules, and other component skills in the repository rely on it for styling.
How do I install the theming-components skill?
Clone the repository and either run ./install.sh, the README's recommended interactive installer, or copy skills/theming-components into your agent's skills folder. The README also describes a plugin marketplace route for the wider collection of 76 skills.
How does theme switching work?
Components read CSS custom properties, and a data-theme attribute on the html element selects which set of values applies. The skill's example script sets the attribute and saves the choice in localStorage, so switching needs no component changes.
Does it support right-to-left languages?
Yes. The skill tells the agent to use CSS logical properties, such as margin-inline-start and padding-inline-end, in place of left and right values. These flip automatically in RTL layouts. A validate_logical_properties.py script checks for the physical versions.
Can it export tokens to iOS or Android?
The skill documents Style Dictionary as the route. JSON tokens are transformed into CSS variables, SCSS, iOS Swift, Android XML and JavaScript. A reference file covers the multi-platform build setup, and the skill uses an npm script named build-tokens.
Which AI agents work with theming-components?
The repository README is written for Claude Code and describes Claude plugin commands, and its description says the skills are for AI-assisted development with Claude. The skill is a SKILL.md folder, so test it in another agent before relying on it.
What accessibility checks are included?
The skill sets WCAG 2.1 AA targets of 4.5:1 for normal text and 3:1 for large text and UI components. It adds a high-contrast theme, a reduced motion rule and a validate_contrast.py script that checks contrast ratios across the tokens.
What license does the repository use?
GitHub and the README both list the MIT License, which allows use, modification and redistribution as long as the copyright notice is kept. The repository README is the place to check the full license text.