Agent skill

Uui Themes

Helps work with UUI themes including generating theme tokens from Figma, working with skin packages, and connecting external themes.

MITAuto-check passedFrontend & Design

Install Uui Themes

skills CLI

$ npx skills add epam/UUI --skill uui-themes -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-themes --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/themes .claude/skills/uui-themes && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "uui-themes" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/themes into .claude/skills/uui-themes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-themes", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/epam/UUI/tree/develop/.cursor/skills/themes

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add epam/UUI --skill uui-themes -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-themes --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/themes .agents/skills/uui-themes && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "uui-themes" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/themes into .agents/skills/uui-themes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-themes", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add epam/UUI --skill uui-themes -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-themes --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/themes .cursor/skills/uui-themes && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "uui-themes" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/themes into .cursor/skills/uui-themes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-themes", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/epam/UUI.git --path .cursor/skills/themes

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add epam/UUI --skill uui-themes -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-themes --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/themes .gemini/skills/uui-themes && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "uui-themes" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/themes into .gemini/skills/uui-themes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-themes", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install epam/UUI uui-themes

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add epam/UUI --skill uui-themes -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/themes .github/skills/uui-themes && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "uui-themes" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/themes into .github/skills/uui-themes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-themes", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add epam/UUI --skill uui-themes -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-themes --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/themes .opencode/skills/uui-themes && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "uui-themes" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/themes into .opencode/skills/uui-themes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-themes", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: uui-themes
GitHub stars: 248
Token cost: ~1.4k tokens
SKILL.md length: 388 words
Files: 1
Skills in repo: 10
Repo updated: Sep 29, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Helps work with UUI themes including generating theme tokens from Figma, working with skin packages, and connecting external themes.

Works in 3 steps: Obtain Theme.json from UX design team → Replace existing file → Generate tokens
Generating theme tokens
SKILL.md covers Built-in Theme Packages, Generating Theme Tokens from…, External Themes and Working with Theme Tokens in…, plus 3 more sections
Calls yarn

What it does

Uui Themes is an agent skill from epam/UUI. Helps work with UUI themes including generating theme tokens from Figma, working with skin packages, and connecting external themes. Use when generating theme tokens, working with loveship/electric/promo themes, or connecting external themes.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design tokens. It works with Figma. The repository describes itself as: React-based components and accelerators library built by EPAM Systems. The licence is MIT.

When your agent uses it

Generating theme tokens
Working with loveship/electric/promo themes
Connecting external themes

Example prompts

“Use the uui-themes skill to help work with UUI themes including generating theme tokens from Figma, working with skin packages, and connecting…”
“/uui-themes”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

Obtain Theme.json from UX design team
Replace existing file
Generate tokens

What it can do on your machine

Read from SKILL.md and the folder at commit fd11393. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- yarn
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Uui Themes loads about 1.4k tokens when it runs. Until then it costs about 63 tokens; SKILL.md has 388 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~63
When it runs · the whole SKILL.md, loaded when a task matches: ~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from epam/UUI at commit fd11393, republished under its MIT licence (© epam). 388 words, ~1,442 tokens.

Download SKILL.mdSave it as .claude/skills/uui-themes/SKILL.md (or your agent's skills folder).

name: uui-themes
description: Helps work with UUI themes including generating theme tokens from Figma, working with skin packages, and connecting external themes. Use when generating theme tokens, working with loveship/electric/promo themes, or connecting external themes.

UUI Themes

UUI supports multiple themes (skins) and allows connecting external themes. Built-in themes include Loveship, Electric, and Promo.

Built-in Theme Packages

UUI includes three styled theme packages:

@epam/loveship — Loveship theme (light and dark modes)
@epam/electric — Electric theme (light and dark modes)
@epam/promo — Promo theme

These are located in:

loveship/ — Loveship theme package
epam-electric/ — Electric theme package
epam-promo/ — Promo theme package

Generating Theme Tokens from Figma

Theme tokens are generated from Figma JSON exports.

Process

Obtain Theme.json from UX design team
- Request the most recent Theme.json file exported from Figma
Replace existing file
- Place new Theme.json in public/docs/figmaTokensGen/Theme.json
- Replace the existing file
Generate tokens
bash
```
yarn generate-theme-tokens
```
Important: Run from UUI monorepo root!

Generated Files

The command generates:

public/docs/figmaTokensGen/ThemeOutput.json — Original file with added CSS variable info:
json
```
{
  "codeSyntax": {
    "WEB": "var(--uui-control-border-focus)"
  }
}
```
This file should be sent back to UX designers to import into Figma.
public/docs/figmaTokensGen/ThemeTokens.json — Normalized tokens with inheritance hierarchy in minimalistic format. Used for:
- Color palette documentation
- Token tables in sandbox
epam-assets/theme/variables/tokens/*.scss — Theme-specific SCSS mixins with token variables

Token Structure

Tokens include:

Modes — Theme variants (e.g., Loveship-Light, Loveship-Dark, Promo, Electric-Light, Electric-Dark)
Exposed tokens — CSS variables with values per theme
Value chains — Token aliases and inheritance

Example token:

json

{
  "id": "core/controls/control-bg",
  "type": "COLOR",
  "cssVar": "--uui-control-bg",
  "valueByTheme": {
    "Loveship-Light": {
      "value": "#FFFFFF",
      "valueChain": {
        "alias": [
          { "id": "core/surfaces/surface-main", "cssVar": "--uui-surface-main" }
        ]
      }
    }
  }
}

External Themes

Connect themes hosted outside the UUI repository.

Setup

Add theme URLs to localStorage:

javascript

localStorage.setItem('uui-custom-themes', JSON.stringify({
    customThemes: [
        "https://cdn.example.com/theme-1",
        "https://cdn.example.com/theme-2"
    ]
}))

Theme URL must serve /theme-manifest.json

Theme Manifest Structure

The theme URL must serve a /theme-manifest.json endpoint with this structure:

typescript

interface IThemeManifest {
    id: string;                    // Unique theme identifier
    name: string;                  // Display name
    css: string[];                 // Array of CSS file URLs
    settings?: string | null;      // Optional settings URL
    propsOverride?: {              // Optional component prop overrides
        [typeRef: string]: {
            [propName: string]: IThemeManifestPropOverride
        }
    };
}

Example manifest:

json

{
  "id": "custom-theme",
  "name": "Custom Theme",
  "css": [
    "https://cdn.example.com/theme-1/styles.css"
  ],
  "settings": "https://cdn.example.com/theme-1/settings.json"
}

Show full SKILL.md (157 more words)Show less

CSS Variables and uui-* Classes

CSS variables use --uui-* prefix:

--uui-control-bg, --uui-control-border, --uui-text-primary, etc.
Defined in theme token SCSS files. Follow existing token structure for consistency.

Global utility classes use uui-* prefix for themeable props. These are applied by components via applyMods:

Pattern	Purpose	Examples
`uui-color-{value}`	Text/icon color	`uui-color-primary`, `uui-color-neutral`, `uui-color-error`
`uui-size-{value}`	Component size	`uui-size-24`, `uui-size-36`, `uui-size-48`
`uui-fill-{value}`	Button fill style	`uui-fill-solid`, `uui-fill-outline`, `uui-fill-ghost`
`uui-{component}`	Component root	`uui-button`, `uui-tab-button`, `uui-input-box`
`uui-{component}_{part}`	Component part	`uui-icon_button`, `uui-link_button`

Skin packages (loveship, epam-electric, epam-promo) define styles for these classes. When adding new component mods, follow the same pattern so themes can style them.

Working with Theme Tokens in Components

Components access theme tokens via CSS variables:

scss

// Component.module.scss
.root {
    background-color: var(--uui-control-bg);
    border-color: var(--uui-control-border);
    color: var(--uui-text-primary);
}

Theme Settings

Components can access theme settings via the settings object:

typescript

import { settings } from '../../settings';

// Access theme-specific icons, sizes, etc.
const icon = settings.button.icons.dropdownIcon;
const defaultSize = settings.button.sizes.default;

Commands

Generate theme tokens:

bash

yarn generate-theme-tokens

Process icons (if updating theme icons):

bash

yarn process-icons

Place icons in icons-source folder first.

References

Theme tokens generation: uui-build/ts/themeTokens.md
External themes: .cursor/skills/documentation/SKILL.md (External Themes section)
Theme tokens output: public/docs/figmaTokensGen/ThemeTokens.json
SCSS mixins: epam-assets/theme/variables/tokens/

Files

Just SKILL.md in .cursor/skills/themes of epam/UUI.

Open the folder on GitHubat commit fd11393

Compare with similar skills

Uui Themes next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Uui Themes compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Uui Themes this skillepam/UUI	248	—	~1.4k	Automated safety check: Pass	MIT	10 days ago
Figma Design System Builderwarpdotdev/warp	65k	2 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Figma use_figma Plugin API Ruleswarpdotdev/warp	65k	4 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Figma Design to Codewarpdotdev/warp	65k	4 repos	~2.9k	Automated safety check: Pass	AGPL-3.0	today
Figma Screen Generatorwarpdotdev/warp	65k	2 repos	~5k	Automated safety check: Pass	AGPL-3.0	today
Extract DesignManavarya09/design-extract	4.2k	—	~786	Automated safety check: Notes	MIT	yesterday

Similar skills

Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
65k GitHub starsUsed in 2 repos~4.4k tokens
Frontend & DesignAuto-check passed
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
65k GitHub starsUsed in 4 repos~4.4k tokens
Frontend & DesignAuto-check passed
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
65k GitHub starsUsed in 4 repos~2.9k tokens
Frontend & DesignAuto-check passed
Figma Screen Generator
warpdotdev/warp
Builds or updates full Figma screens from code or a description by reusing the file's published design system components, variables and styles.
65k GitHub starsUsed in 2 repos~5k tokens
Frontend & DesignAuto-check passed
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
4.2k GitHub stars~786 tokensUpdated yesterday
Frontend & DesignAuto-check: notes
Qt Figma Component Generation
TheQtCompanyRnD/agent-skills
Extract component metadata from a Figma design system and generate production-ready QML controls.
470 GitHub stars~4.1k tokensUpdated yesterday
Frontend & DesignAuto-check passed

Questions about Uui Themes

What does Uui Themes do?

Helps work with UUI themes including generating theme tokens from Figma, working with skin packages, and connecting external themes. Uui Themes is an agent skill from epam/UUI. Helps work with UUI themes including generating theme tokens from Figma, working with skin packages, and connecting external themes.

When should I use Uui Themes?

Uui Themes fits situations like: generating theme tokens; working with loveship/electric/promo themes; connecting external themes.

How do I install Uui Themes in Claude Code?

Run `npx skills add epam/UUI --skill uui-themes -a claude-code`. Or copy the skill folder (.cursor/skills/themes in epam/UUI) into .claude/skills/uui-themes in your project. Claude Code loads it when a task matches its description.

How do I install Uui Themes in Codex?

Run `npx skills add epam/UUI --skill uui-themes -a codex`. Or copy the skill folder (.cursor/skills/themes in epam/UUI) into .agents/skills/uui-themes in your project. Codex loads it when a task matches its description.

Can I use Uui Themes in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add epam/UUI --skill uui-themes -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/uui-themes, .gemini/skills/uui-themes, .github/skills/uui-themes and .opencode/skills/uui-themes in your project.

What does Uui Themes need to run?

Going by SKILL.md and its folder, Uui Themes needs the command-line tools its instructions call (yarn).

Does Uui Themes access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Uui Themes safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Uui Themes use?

Uui Themes is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Uui Themes use?

About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Uui Themes?

Skills that share tags, products or a category with Uui Themes: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design to Code (warpdotdev/warp, 65k stars) and Figma Screen Generator (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Uui Themes?

epam (a GitHub organization) maintains it in epam/UUI, which has 248 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on September 29, 2026.

Source: epam/UUI on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Uui Themes

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

UUI Themes

Built-in Theme Packages

Generating Theme Tokens from Figma

Process

Generated Files

Token Structure

External Themes

Setup

Theme Manifest Structure

CSS Variables and uui-* Classes

Working with Theme Tokens in Components

Theme Settings

Commands

References

Files

Compare with similar skills

Similar skills

More from epam/UUI

Related

Questions about Uui Themes