Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
ancoleman avatar

Theming Components

ancoleman/ai-design-components

  • 61 installs
  • 426 repo stars
  • Updated December 11, 2025
  • ancoleman/ai-design-components

Theming-components is a Claude skill that provides a design-token system and theming framework for consistent, customizable UI styling with light/dark, RTL and accessibility support.

About

This skill provides a design-token system and theming framework for consistent, customizable UI styling. Developers use it when theming components, implementing light/dark mode, creating brand styles, or supporting RTL languages. It covers a full token taxonomy, theme switching, multi-platform export and accessibility.

  • 7-category token taxonomy (color, type, spacing, shadows, borders, motion, z-index)
  • Light/dark and custom brand theme switching via CSS variables
  • RTL support with CSS logical properties and WCAG contrast

Theming Components by the numbers

  • 61 all-time installs (skills.sh)
  • Ranked #1,207 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

theming-components capabilities & compatibility

Capabilities
design tokens · theming · dark mode · rtl support · accessibility styling
Use cases
ui design · frontend · web design
Pricing
Free
From the docs

What theming-components says it does

Provides design token system and theming framework for consistent, customizable UI styling across all components.
SKILL.md
Design tokens are the **single source of truth** for all visual design decisions.
SKILL.md
npx skills add https://github.com/ancoleman/ai-design-components --skill theming-components

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs61
repo stars★ 426
Last updatedDecember 11, 2025
Repositoryancoleman/ai-design-components ↗

What it does

Provide a design-token and theming system for consistent, customizable styling with light/dark, RTL and a11y support.

Who is it for?

Establishing a design-token foundation with theme switching and brand customization.

Skip if: Backend services with no UI styling layer.

When should I use this skill?

Theming components, implementing light/dark mode, creating brand styles, or supporting RTL languages.

What you get

A token-driven theming system enabling brand customization, theme switching and RTL support.

  • Design-token taxonomy
  • Light/dark and brand themes
  • RTL and accessibility styling

By the numbers

  • 7 core token categories
  • 3-tier color hierarchy (primitive, semantic, component)
  • 4px base spacing scale

Files

SKILL.mdMarkdownGitHub ↗

Design Tokens & Theming System

Comprehensive design token system providing the foundational styling architecture for all component skills, enabling brand customization, theme switching, RTL support, and consistent visual design.

Overview

Design tokens are the single source of truth for all visual design decisions. This skill provides:

1. Complete Token Taxonomy: 7 core categories (color, typography, spacing, borders, shadows, motion, z-index) 2. Theme Switching: Light/dark mode, high-contrast, custom brand themes 3. RTL/i18n Support: CSS logical properties for automatic right-to-left language support 4. Multi-Platform Export: CSS variables, SCSS, iOS Swift, Android XML, JavaScript 5. Component Integration: Skill chaining architecture for consistent styling across all components

Critical Architectural Principle:

Component Skills (Behavior + Structure) → Use tokens for ALL visual styling
Design Tokens (Styling Variables)       → Define colors, spacing, typography
Theme Files (Token Overrides)           → Light, dark, brand-specific values

---

Quick Start

Using Tokens in Components

Step 1: Reference tokens in your component:

.button {
  background-color: var(--button-bg-primary);
  color: var(--button-text-primary);
  padding-inline: var(--button-padding-inline);
  padding-block: var(--button-padding-block);
  border-radius: var(--button-border-radius);
  transition: var(--transition-fast);
}

Step 2: Themes automatically apply:

<!-- Light theme -->
<html data-theme="light">
  <button class="button">Primary Button</button>
</html>

<!-- Dark theme (same component, different appearance) -->
<html data-theme="dark">
  <button class="button">Primary Button</button>
</html>

No code changes needed - theme switching is automatic!

Basic Theme Switching

function setTheme(themeName) {
  document.documentElement.setAttribute('data-theme', themeName);
  localStorage.setItem('theme', themeName);
}

function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  setTheme(current === 'dark' ? 'light' : 'dark');
}

// Load saved theme on page load
setTheme(localStorage.getItem('theme') || 'light');

---

Token Taxonomy (7 Core Categories)

1. Color Tokens

3-tier hierarchy: Primitive → Semantic → Component

/* Primitive (9-shade scales) */
--color-blue-500: #3B82F6;

/* Semantic (purpose-based) */
--color-primary: var(--color-blue-500);
--color-success: var(--color-green-500);
--color-error: var(--color-red-500);

/* Component-specific */
--button-bg-primary: var(--color-primary);

Complete color system: See references/color-system.md

2. Spacing Tokens

4px base scale:

--space-1: 4px;   --space-2: 8px;   --space-4: 16px;
--space-6: 24px;  --space-8: 32px;  --space-12: 48px;

/* Semantic */
--spacing-sm: var(--space-2);   /* 8px */
--spacing-md: var(--space-4);   /* 16px */
--spacing-lg: var(--space-6);   /* 24px */

3. Typography Tokens

--font-sans: 'Inter', -apple-system, sans-serif;
--font-mono: 'Fira Code', monospace;

--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;

--font-weight-normal: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;

4. Border & Radius Tokens

--border-width-thin: 1px;
--border-width-medium: 2px;

--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;

5. Shadow Tokens

--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.07);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

--shadow-focus-primary: 0 0 0 3px rgba(59, 130, 246, 0.3);

6. Motion Tokens

--duration-fast: 150ms;
--duration-normal: 200ms;

--ease-out: cubic-bezier(0, 0, 0.2, 1);
--transition-fast: all var(--duration-fast) var(--ease-out);

Reduced motion support:

@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: none; }
}

7. Z-Index Tokens

--z-dropdown: 1000;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-tooltip: 1070;

---

Theme Architecture

Light/Dark Themes

/* themes/light.css */
:root {
  --color-primary: #3B82F6;
  --color-background: #FFFFFF;
  --color-text-primary: #1F2937;
}

/* themes/dark.css */
:root[data-theme="dark"] {
  --color-primary: #60A5FA;
  --color-background: #111827;
  --color-text-primary: #F9FAFB;
}

Custom Brand Theme

:root[data-theme="my-brand"] {
  --color-primary: #FF6B35;
  --font-sans: 'Poppins', sans-serif;
  --radius-md: 12px;
}

Complete theme guide: See references/theme-switching.md

---

CSS Logical Properties (RTL Support)

Use logical properties for automatic RTL language support:

Physical (Avoid)Logical (Use)
margin-leftmargin-inline-start
padding-rightpadding-inline-end
text-align: lefttext-align: start
/* Correct - auto-flips in RTL */
.button {
  padding-inline: var(--button-padding-inline);
  margin-inline-start: var(--spacing-sm);
}

Complete RTL guide: See references/logical-properties.md

---

Component Integration

All component skills use this naming convention:

--{component}-{property}-{variant?}-{state?}

Examples:

--button-bg-primary
--button-bg-primary-hover
--input-border-color-focus
--chart-color-1

Components use tokens for ALL styling:

.button {
  background-color: var(--button-bg-primary);
  border-radius: var(--button-border-radius);
}

Theme changes automatically update all components.

Complete integration guide: See references/component-integration.md

---

Accessibility

WCAG 2.1 AA Compliance

  • Normal text: 4.5:1 contrast minimum
  • Large text (18px+): 3:1 minimum
  • UI components: 3:1 minimum

High-Contrast Theme

:root[data-theme="high-contrast"] {
  --color-primary: #0000FF;
  --color-text-primary: #000000;
  /* 7:1 contrast (WCAG AAA) */
}

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --transition-fast: none;
  }
}

Complete accessibility guide: See references/accessibility-tokens.md

---

Platform Exports (Style Dictionary)

Transform tokens to any platform:

JSON Tokens → Style Dictionary → CSS Variables
                               → iOS Swift
                               → Android XML
                               → JavaScript
npm run build-tokens

Complete setup guide: See references/style-dictionary-setup.md

---

W3C Token Format

{
  "color": {
    "primary": {
      "$value": "#3B82F6",
      "$type": "color"
    }
  }
}

---

Scripts

# Generate color scale from base color
python scripts/generate_color_scale.py --base "#3B82F6"

# Validate token structure
python scripts/validate_tokens.py

# Check WCAG contrast ratios
python scripts/validate_contrast.py

# Build all platforms
npm run build-tokens

---

References

Core Systems:

  • references/color-system.md - Complete color scales and semantics
  • references/typography-system.md - Type scales and fonts
  • references/spacing-system.md - Spacing scale and rhythm

Implementation:

  • references/theme-switching.md - Light/dark mode, custom themes
  • references/component-integration.md - How skills use tokens
  • references/logical-properties.md - RTL support patterns

Tools & Accessibility:

  • references/style-dictionary-setup.md - Multi-platform build
  • references/accessibility-tokens.md - WCAG compliance

---

Key Takeaways

1. Design tokens are the foundation - All visual styling flows from tokens 2. 3-level hierarchy - Primitive → Semantic → Component tokens 3. 7 core categories - Color, spacing, typography, borders, shadows, motion, z-index 4. Theme switching built-in - Light, dark, high-contrast, custom brands 5. RTL support automatic - CSS logical properties enable right-to-left languages 6. Accessibility first - WCAG compliance, reduced motion, high contrast 7. Referenced by all skills - Every component skill uses design tokens

---

Progressive disclosure: This SKILL.md provides overview and quick start. Detailed documentation in references/ directory.

Skill chaining architecture: See SKILL_CHAINING_ARCHITECTURE.md

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What token categories does it define?

Seven core categories: color, typography, spacing, borders, shadows, motion and z-index.

How does theme switching work?

Components reference CSS custom properties and themes override those variables via a data-theme attribute, so switching needs no component code changes.

Design & UI/UXuibrandingux
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.