ancoleman/theming-components
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 light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages.
npx skills add https://github.com/ancoleman/ai-design-components --skill theming-componentsComprehensive design token system providing the foundational styling architecture for all component skills, enabling brand customization, theme switching, RTL support, and consistent visual design.
Design tokens are the single source of truth for all visual design decisions. This skill provides:
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
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!
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');
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
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 */
--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;
--border-width-thin: 1px;
--border-width-medium: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--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);
--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; }
}
--z-dropdown: 1000;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-tooltip: 1070;
/* 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;
}
:root[data-theme="my-brand"] {
--color-primary: #FF6B35;
--font-sans: 'Poppins', sans-serif;
--radius-md: 12px;
}
Complete theme guide: See references/theme-switching.md
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 |
/* 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
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
:root[data-theme="high-contrast"] {
--color-primary: #0000FF;
--color-text-primary: #000000;
/* 7:1 contrast (WCAG AAA) */
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--transition-fast: none;
}
}
Complete accessibility guide: See references/accessibility-tokens.md
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
{
"color": {
"primary": {
"$value": "#3B82F6",
"$type": "color"
}
}
}
# 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
Core Systems:
references/color-system.md - Complete color scales and semanticsreferences/typography-system.md - Type scales and fontsreferences/spacing-system.md - Spacing scale and rhythmImplementation:
references/theme-switching.md - Light/dark mode, custom themesreferences/component-integration.md - How skills use tokensreferences/logical-properties.md - RTL support patternsTools & Accessibility:
references/style-dictionary-setup.md - Multi-platform buildreferences/accessibility-tokens.md - WCAG complianceProgressive disclosure: This SKILL.md provides overview and quick start. Detailed documentation in references/ directory.
Skill chaining architecture: See SKILL_CHAINING_ARCHITECTURE.md
Take ancoleman/theming-components from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.