Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Design Tokens & Theming System · ancoleman | DecimalAI

ancoleman/theming-components

SkillScore91Maintained

Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing

Frontendby ancoleman

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/ancoleman-theming-components/SKILL.md

decimalai skills pull ancoleman-theming-components --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/ancoleman-theming-components/SKILL.md https://app.decimal.ai/s/ancoleman-theming-components/SKILL.md

Raw file: /s/ancoleman-theming-components/SKILL.md ↗ · machine-readable summary at /s/ancoleman-theming-components.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 8d ago

Yes — +9% lift · at higher cost+138% tokens0% turns91% of whole cases pass with skill (20/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-05	✗→✓	▲ Improved	122%	0%
case-13	✗→✓	▲ Improved	131%	0%
case-17	✗→✓	▲ Improved	71%	0%
case-04	✓→✗	▼ Worse	68%	0%
case-01	✓→✓	＝ Same ✓	104%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

ancoleman / ai-design-components

skills/theming-components/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 12 files · scripts

Skill contents

scripts/

references/

SKILL.md

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:

Complete Token Taxonomy: 7 core categories (color, typography, spacing, borders, shadows, motion, z-index)
Theme Switching: Light/dark mode, high-contrast, custom brand themes
RTL/i18n Support: CSS logical properties for automatic right-to-left language support
Multi-Platform Export: CSS variables, SCSS, iOS Swift, Android XML, JavaScript
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:

css
.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:

html
<!-- 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

javascript
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

css
/* 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:

css
--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

css
--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

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

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

5. Shadow Tokens

css
--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

css
--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:

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

7. Z-Index Tokens

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

Theme Architecture

Light/Dark Themes

css
/* 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

css
: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-left | margin-inline-start | | padding-right | padding-inline-end | | text-align: left | text-align: start |

css
/* 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:

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

Components use tokens for ALL styling:

css
.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

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

Reduced Motion

css
@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

bash
npm run build-tokens

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

W3C Token Format

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

Scripts

bash
# 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

Design tokens are the foundation - All visual styling flows from tokens
3-level hierarchy - Primitive → Semantic → Component tokens
7 core categories - Color, spacing, typography, borders, shadows, motion, z-index
Theme switching built-in - Light, dark, high-contrast, custom brands
RTL support automatic - CSS logical properties enable right-to-left languages
Accessibility first - WCAG compliance, reduced motion, high contrast
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

Want to see if ancoleman/theming-components would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/21/2026, 14:06 UTC · 22 cases

Lift

+9%

91% vs 82%

Agent turns

1.0 vs 1.0

Tokens

+138%

4,387.5 vs 1,841.82

fail → pass · 3pass → pass · 17fail → fail · 1pass → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-05 A developer is creating component-specific design tokens for a focused primary button hover state and wants to name it `--primary-button-hover-background`. What structure should be followed for component token naming?	fail→pass	9,593	5,466	-43%	1	1	0%	1,602	3,563	+122%	0	0	—
case-01 A front-end developer suggests mapping raw primitive color variables like `--color-blue-500` directly into component CSS variables like `--button-bg-primary` to avoid extra layers. How should the token taxonomy hierarchy be structured to support re-theming?	pass→pass	15,180	15,257	+1%	1	1	0%	2,629	5,364	+104%	0	0	—
case-02 When implementing dark mode toggling in CSS, a developer wants to alternate class names like `.dark-mode` on individual component containers. What attribute and selector strategy should be used at the document root to switch global themes dynamically?	pass→pass	10,223	6,752	-34%	1	1	0%	1,850	3,790	+105%	0	0	—
case-03 A card layout CSS file currently uses `margin-left: 16px` and `padding-right: 24px` for spacing. What CSS property types should be used instead to ensure automatic layout flipping in right-to-left (RTL) languages?	pass→pass	3,918	4,778	+22%	1	1	0%	713	3,536	+396%	0	0	—
case-04 A design system team is setting up spacing variables and wants to use a 5px base grid scale (`--space-1: 5px`, `--space-2: 10px`). What is the standard base scale and token mapping convention for spacing tokens?	pass→fail	15,634	11,272	-28%	1	1	0%	2,816	4,719	+68%	0	0	—
case-10 A UI developer wants to keep 300ms transition animations active for users with vestibular disorders by just slowing them down to 100ms in media queries. How should design tokens handle reduced motion preferences?	pass→pass	19,450	13,661	-30%	1	1	0%	2,466	5,065	+105%	0	0	—
case-06 A designer proposes using a light grey text color with a 3:1 contrast ratio against the background for body paragraphs in standard light mode. Does this satisfy WCAG 2.1 AA text contrast requirements?	pass→pass	5,302	5,826	+10%	1	1	0%	1,078	3,628	+237%	0	0	—
case-07 What is the minimum WCAG 2.1 AA contrast ratio required for large text (18px or larger) and interactive UI component boundaries?	pass→pass	5,056	1,956	-61%	1	1	0%	883	2,932	+232%	0	0	—
case-08 When creating a high-contrast theme option for accessibility compliance beyond standard AA standards, what contrast ratio tier should be targeted for maximum legibility?	pass→pass	10,237	11,710	+14%	1	1	0%	1,694	4,202	+148%	0	0	—
case-09 When defining design tokens in JSON format for inter-tool exchange, a team uses custom keys `val` and `kind` (`{"primary": {"val": "#3B82F6", "kind": "color"}}`). What standard property names does the W3C Design Token format specify for token values and types?	pass→pass	2,855	3,960	+39%	1	1	0%	507	3,335	+558%	0	0	—
case-11 A layout has dropdown menus, modals, backdrops, and tooltips. How should z-index values be structured using design tokens to prevent stacking context collisions?	pass→pass	16,786	27,129	+62%	1	1	0%	2,867	5,568	+94%	0	0	—
case-12 A front-end engineer wants to hardcode `border-radius: 50%` on pills and `border-radius: 6px` on card components. How should border radius values be categorized and assigned using design tokens?	pass→pass	12,903	12,797	-1%	1	1	0%	2,361	5,068	+115%	0	0	—
case-13 To show input element focus, a developer uses a default browser outline (`outline: 2px solid blue`). What design token category and pattern should be used for focus rings across components?	fail→pass	11,553	8,791	-24%	1	1	0%	1,852	4,269	+131%	0	0	—
case-14 A developer uses `text-align: left` across all card titles in CSS. How should alignment be specified to support RTL languages natively without writing duplicate CSS classes?	pass→pass	5,632	4,819	-14%	1	1	0%	1,013	3,504	+246%	0	0	—
case-15 An engineering organization needs to build UI styles for web (CSS/SCSS), iOS (Swift), and Android (XML) from a single source of truth of JSON design tokens. What build tooling pattern and workflow transforms these tokens across platforms?	pass→pass	15,650	19,678	+26%	1	1	0%	2,784	6,136	+120%	0	0	—
case-16 When writing client-side JavaScript to toggle themes, a developer switches classes on individual `<div>` elements and forgets to retain user selection across page reloads. How should theme state be saved and re-applied on initial load?	pass→pass	11,766	12,495	+6%	1	1	0%	2,146	5,054	+136%	0	0	—
case-17 A component developer hardcodes `transition: all 0.5s ease-in-out` in a custom button CSS class. How should motion properties be structured using design tokens?	fail→pass	13,867	9,418	-32%	1	1	0%	2,574	4,411	+71%	0	0	—
case-18 A multi-tenant application needs to apply tenant-specific brand colors and typography dynamically without rewriting component stylesheet files. How should custom brand themes be structured using CSS custom properties?	fail→fail	15,136	17,590	+16%	1	1	0%	2,997	5,966	+99%	0	0	—
case-19 When organizing CSS files in a large component library to control declaration precedence without relying on specificity hacks, how should cascade layers be defined at the top of the main stylesheet?	pass→pass	12,350	12,051	-2%	1	1	0%	2,345	4,622	+97%	0	0	—
case-20 To ensure system-provided browser elements like scrollbars, form inputs, and drop-down menus render in dark mode automatically when a user prefers dark mode, what CSS property should be declared on the `:root` element?	pass→pass	3,720	3,930	+6%	1	1	0%	595	3,325	+459%	0	0	—
case-21 When designing a responsive card component that needs to switch from a stacked layout to a side-by-side layout based on the width of its parent layout container rather than the browser viewport, what CSS query feature should be used?	pass→pass	4,409	5,555	+26%	1	1	0%	604	3,590	+494%	0	0	—
case-22 When specifying responsive typography styles for heading elements in CSS, why is a unitless line-height value like `line-height: 1.2` recommended over a fixed pixel length like `line-height: 32px`?	pass→pass	11,681	13,682	+17%	1	1	0%	2,144	4,878	+128%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +9 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 81.8%
Pass rate with the skill: 90.9%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/21/2026, 14:06 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-05

Prompt

A developer is creating component-specific design tokens for a focused primary button hover state and wants to name it `--primary-button-hover-background`. What structure should be followed for component token naming?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run91

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+157% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 7 days ago

Other measured skills in the registry, with their headline benchmark lift.