Skip to main content
affpapa.org
RU EN
skill CX Codex

theming-system — Claude Code skill: what it does, how to install

Designs a three-layer token architecture to support brand variants, color modes, and interface density in a single component library.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill theming-system -a claude-code
Open on GitHub

What theming-system does

The skill organizes tokens into three layers. Global tokens hold raw palette values, semantic tokens define purpose-driven aliases where theme overrides occur, and component tokens handle scoped styling. This separation keeps components decoupled from hardcoded colors.

The architecture covers color modes, brand variants, and density scales. Never invert colors blindly. The skill guides you to reduce brightness deliberately, use lighter surfaces for elevation, and desaturate dark backgrounds.

If your project requires only a single static palette, this skill is excessive. The author recommends using color-system for standalone palettes or dark-mode-design for dedicated dark mode styling. Implementation targets CSS custom properties, per-theme token files, and Figma variable modes.

What it helps with

  • Separate global, semantic, and component tokens cleanly
  • Configure dark mode without naive color inversion
  • Structure multi-brand and white-label theme variants
  • Implement density switching between compact and spacious layouts

Example prompts for the agent

  • Design a three-layer token architecture supporting light, dark, and high-contrast modes via CSS custom properties.
  • Map semantic tokens for a white-label app that needs three distinct brand themes.
  • Set up surface elevation rules and desaturated palette tokens for dark mode.

How to install theming-system

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill theming-system -a claude-code

2Manually: put the files in place

~/.claude/skills/theming-system/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/theming-system/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about theming-system

How to install theming-system in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill theming-system -a claude-code in your terminal.

What does theming-system do?

It designs a multi-layer design token system so one component library can support multiple visual themes, color modes, and density variations.

When should I use theming-system instead of color-system?

Use theming-system when one design system must handle multiple brand themes or color modes simultaneously. For a single palette, the author suggests color-system, and for dedicated dark mode crafting, dark-mode-design.

Source text

SKILL.md · MIT 
---
name: theming-system
description: Design theming architecture — brand variants, dark mode, and high-contrast — mapped through token layers. Use when one system must serve multiple themes. For a single palette use `color-system` (ui-design); for dark mode craft use `dark-mode-design` (ui-design).
---
# 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

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Frontend and UI →
design-system-patterns Seth Hobson Guides the design of design tokens, theme switching, and component library architecture. Use it when establishing shared UI foundations for a project. CX Codex 15,953installs muse simota A skill for design tokens: defines color, spacing, typography and shadows, then moves existing code onto semantic tokens. CX Codex +1 711installs ui-design-system Alireza Rezvani This skill builds design tokens, component structures, and responsive calculations. Use it when a project needs a consistent UI system or a developer handoff. 1,076installs design-system rampstackco Builds or audits a design system: tokens, component library, naming conventions, contribution model and docs. Useful when products drift apart visually. CX Codex +1 310installs tailwindcss-advanced-design-systems JosiahSiegel A skill for building a Tailwind v4 design system: @theme tokens, color scales, typography, shadows and dark mode. CX Codex +1 655installs material-ui-theming mui Skill for building and managing Material UI themes: palettes, color schemes, CSS variables, light/dark switching, and TypeScript augmentation. Use it when designing your app's visual system or implementing theme customization. CX Codex +1 607installs

From the same set109

feedback-patterns Gives the agent a method for designing how a system answers a user action: toasts, progress, badges, notifications. Useful when the interface goes silent after a click. CX Codex +1 2,100installs design-brief Drafts a project brief covering problem space, audience, constraints, and success criteria. Built for kicking off a specific task or feature. CX Codex +1 2,100installs competitive-analysis A skill that compares rival products on UX: patterns, features, gaps and opportunities. Useful when you need to know what competitors actually do. CX Codex +1 2,100installs prototype-strategy Decide what kind of prototype to build and how detailed it should be, before you start building it. CX Codex +1 2,100installs journey-map This skill maps one persona's end-to-end experience: stages, touchpoints, emotions and pain points. Useful when you're improving something that already exists. CX Codex +1 2,100installs component-spec This skill writes a full spec for one design-system component: anatomy, variants, states, accessibility and usage rules. Useful when a library grows and the API needs pinning down. CX Codex +1 2,100installs design-principles Helps teams define actionable design principles to resolve recurring product debates. Useful when the same decisions keep getting relitigated. CX Codex +1 2,100installs accessibility-audit Audits an existing interface against WCAG and reports issues with severity, impact, and remediation steps. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor