Skill
administering-linux
Manage Linux systems covering systemd services, process management, filesystems, networking, performance tuning, and troubleshooting. Use when deploying…
@ancolemanView SkillDevelopment
Skill
/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
Install
$ npx -y skills add ancoleman/ai-design-components --skill theming-components --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/theming-components
Context preview
The summary Claude sees to decide when to auto-load this skill.
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
SKILL.md
theming-components.SKILL.mdname: theming-components
description: 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.
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-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`
---
Component Integration
**All component skills use this naming convention:**
--{compRead more
name: theming-components description: 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.
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-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`
---
Component Integration
**All component skills use this naming convention:**
--{comp Ships withai-design-components
Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude
Get the whole plugin
Stats
523
Stars
73
Forks
Quiet
Maintenance
Python
Language
MIT
License
9mo ago
Last commit
10mo ago
Created
Repo: ancoleman/ai-design-components
Other skills on ai-design-components.
@ancolemanView SkillSkill
ai-data-engineering
Data pipelines, feature stores, and embedding generation for AI/ML systems. Use when building RAG pipelines, ML feature serving, or data transformations.…
@ancolemanView SkillSkill
architecting-data
Strategic guidance for designing modern data platforms, covering storage paradigms (data lake, warehouse, lakehouse), modeling approaches (dimensional,…
@ancolemanView SkillSkill
architecting-networks
Design cloud network architectures with VPC patterns, subnet strategies, zero trust principles, and hybrid connectivity. Use when planning VPC topology,…
@ancolemanView SkillSkill
architecting-security
Design comprehensive security architectures using defense-in-depth, zero trust principles, threat modeling (STRIDE, PASTA), and control frameworks (NIST CSF,…
@ancolemanView SkillSkill
assembling-components
Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import…
@ancolemanView Skill