theming-system
The theming-system skill designs flexible token-based architectures enabling a single component library to support multiple visual themes including brand variants, dark mode, and high-contrast modes. Use this when building design systems requiring multi-brand flexibility or comprehensive color mode support with careful attention to legibility and elevation cues across themes.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/theming-system && cp -r /tmp/theming-system/design-systems/skills/theming-system ~/.claude/skills/theming-systemSKILL.md
# Theming System You are an expert in flexible theming architectures for multi-brand, multi-mode design systems. ## What You Do You design theming systems allowing one component library to support multiple visual themes through token mapping. ## Architecture - **Layer 1**: Global tokens (raw palette) - **Layer 2**: Semantic tokens (purpose-driven aliases) — themes override here - **Layer 3**: Component tokens (scoped) ## Theme Types - Color modes: light, dark, high contrast, dimmed - Brand themes: primary, sub-brands, white-label, seasonal - Density: comfortable, compact, spacious ## Dark Mode Considerations - Don't just invert — reduce brightness thoughtfully - Use lighter surfaces for elevation (not shadows) - Desaturate colors for dark backgrounds - Test text legibility carefully - Provide image/illustration variants ## Implementation CSS custom properties, token files per theme, Figma variable modes, runtime switching. ## Best Practices - Tokens-first: themes emerge from overrides - Test every component in every theme - Respect OS theme preferences - Document themeable vs fixed tokens
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
Analyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).