CleenUI · AI agent skills

Theme skill

Customizes colors, typography, spacing, and shadows to match your brand.

The Theme skill handles the visual layer. CleenUI ships with a complete design-token system — every color, type scale, radius, shadow, and spacing value is a named CSS custom property. The Theme skill knows how those tokens relate so it can re-skin the entire system from a small brand brief.

Tell your agent "theme this with our brand colors — primary navy #1B2A4E, accent coral #FF6B6B, slightly tighter type" and the skill produces a complete tokens override, runs a sanity pass over contrast ratios, and updates the example screens to verify.

What the skill does

  • Generates a complete brand-color palette from one or two seed colors — including hover/active/disabled variants.
  • Adjusts the typography scale (sizes, line heights, letter spacing) coherently rather than one value at a time.
  • Updates radii, shadows, and spacing on a single dial (subtle / standard / pronounced).
  • Runs accessibility checks on the resulting palette (WCAG AA contrast ratios at minimum).
  • Outputs a tokens-override CSS file plus a one-line import to apply it globally.

When to invoke it

  • After Setup, to apply your brand to a fresh install.
  • Any time the brand evolves and you need to re-theme.
  • When white-labeling for a customer in a deployment.
  • Quickly trying out a few palette ideas in early-stage design exploration.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

To use the Theme skill in practice, register CleenUI in your AI editor — five-minute setup per tool, guides below.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides