cleen-ui-configure

Customize @cleen/ui appearance by overriding CSS color variables.

Updated Mar 4, 2026

Search Tags:#theming #ui #brand colors #dark mode #css variables #color customization

Ready to run

npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-configure

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cleen-ui-configure
Source: https://github.com/shawnlivermore/cleen-ui-skills/tree/main/skills/cleen-ui-configure
Command: npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-configure

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill allows users to easily customize the visual appearance of the @cleen/ui library, specifically focusing on color theming and brand alignment.

Core Features & Use Cases

CSS Variable Overrides: Modify color variables for light and dark modes.
Brand Color Integration: Adapt the UI to match a specific brand's color palette.
Theming: Tweak default colors for a unique look and feel.
Use Case: A user wants to change the primary button color from the default blue to a specific shade of green to match their company's branding.

Quick Start

Use the cleen-ui-configure skill to change the primary color to 0, 255, 0 and the sidebar color to 255, 255, 255 for light mode.

Frequently Asked Questions about cleen-ui-configure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I customize @cleen/ui colors to match my brand's color palette?▼

Customize @cleen/ui colors by overriding CSS custom properties to integrate specific brand color variables. This approach allows you to adapt the library's visual appearance, ensuring the UI components align perfectly with your company's predefined branding requirements.

How do I change the primary button color from blue to green in a UI library?▼

Change the primary button color by overriding the default CSS color variables with your desired RGB values, such as setting the primary color to `0, 255, 0`. This modifies the component's appearance without altering underlying library structure.

Can I configure different color themes for light and dark mode using CSS variables?▼

Yes, you can configure light and dark mode color themes by applying targeted CSS variable overrides for each mode. This enables distinct visual adjustments, allowing you to tweak default colors and maintain accessibility across different lighting environments.

What do I need to know to adjust CSS color variables for UI theming?▼

Adjusting CSS color variables for UI theming requires an understanding of CSS custom properties and how they apply within the @cleen/ui library's structure. This knowledge is essential for successfully executing theme adjustments and color overrides.

Are there limitations when overriding CSS custom properties for dark mode theming?▼

Limitations when overriding CSS custom properties for dark mode theming depend on the library's internal structure and how it processes those variables. You must ensure your color overrides correctly cascade and apply within the established component hierarchy.