Can I use the output directly with Tailwind CSS?

Absolutely. The skill can generate a complete tailwind.config.js file that maps your design tokens to Tailwind's theme configuration for a seamless development experience.

What is the benefit of the three-tier token hierarchy?

The hierarchy (Primitive, Semantic, Component) allows you to change raw values globally without breaking the functional meaning of colors and spacing in your UI components.

How does it handle multi-tenancy?

It provides architectural patterns and code examples (such as C# services) for resolving, merging, and serving base, brand, and site-specific themes at runtime.

Does this skill support dark mode implementation?

Yes, it generates CSS variable structures that include logic for dark mode, using both media queries and data-attribute based theme switching.

CMS Theme System Designer

Name: CMS Theme System Designer
Author: melodic-software

bymelodic-software

•

Design Tools

Architects comprehensive, multi-tenant design systems using design tokens, CSS variables, and Tailwind CSS integration.

This skill empowers developers to build scalable and maintainable theming architectures specifically tailored for multi-site and multi-tenant Content Management Systems (CMS). It automates the creation of a structured design token hierarchy—ranging from raw primitive values to semantic and component-level tokens—ensuring visual consistency across complex application ecosystems. By providing standardized outputs for CSS custom properties, Tailwind configurations, and dynamic theme resolution logic, it streamlines the workflow for frontend architects building white-label products or highly customizable web platforms.

Key Features

01Generation of theme editor UI schemas for building user-facing customization tools.

02Multi-tenant architecture patterns for dynamic theme resolution and site-specific overrides.

03Automated export to CSS Variables and production-ready Tailwind CSS configurations.

04Hierarchical design token generation covering primitives, semantic layers, and components.

05Native support for dark mode implementation and brand-specific visual identities.

0638 GitHub stars

Use Cases

01Modernizing a legacy CMS by implementing a unified, token-based design system across all sites.

02Building white-label web applications that support rapid visual re-skinning and deployment.

03Developing a SaaS platform requiring unique branding and custom interfaces for every customer.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add melodic-software/claude-code-plugins design-theme-system

For use in Claude.ai and ChatGPT

Download Skill