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
Facilitate a structured team critique — framing, feedback rules, and actionable outcomes. Use when running a session with people in the room. For a solo expert review, use `heuristic-evaluation` (prototyping-testing).
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use `design-token-audit` (designer-toolkit); for WCAG gaps use `accessibility-audit` (design-systems).
Communicate design's contribution to business and user outcomes in stakeholder language. Use when reporting results upward. For choosing the metrics in the first place, use `metrics-definition` (ux-strategy).
Build a QA checklist for verifying that a build matches the design. Use at implementation review. For the spec engineers build from, use `handoff-spec`.
Establish review gates — criteria, checkpoints, and approval flow. Use when work ships without consistent review. For running one individual session, use `design-critique`.
Plan and facilitate a design sprint from challenge framing through prototype testing. Use when compressing discovery into days. For ongoing team cadence, use `team-workflow`.
Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use `design-qa-checklist`; for reusable library components use `component-spec` (design-systems).
Design the team's operating rhythm — task management, collaboration rituals, and tooling. Use when the day-to-day cadence needs structure. For a time-boxed sprint, use `design-sprint-plan`.