ClaudeSuperPower
SubmitLog in

ui-theme-designer-design-tokens

Skill

TRIGGER: questions about the SAP Design System and SAP Fiori design tokens — which themes exist, what value a theme parameter (e.g. sapButton_Background, sapHighlightColor) has in a given theme, how parameters inherit/extend across the theme chain, which parameters a specific UI component (UI5 contr

0Design

Install

git clone https://github.com/SAP/ui-theme-designer-plugins-for-coding-agents.git ~/.claude/skills/ui-theme-designer-design-tokens

What is ui-theme-designer-design-tokens?

TRIGGER: questions about the SAP Design System and SAP Fiori design tokens — which themes exist, what value a theme parameter (e.g. sapButton_Background, sapHighlightColor) has in a given theme, how parameters inherit/extend across the theme chain, which parameters a specific UI component (UI5 control, UI5 Web Component, Fundamental Styles component) consumes. SKIP: how-to questions about UI theme designer as a product (creating, publishing, transporting themes — use ui-theme-designer-help).

What this can do

Capabilities declared in this component's own frontmatter — not inferred.

~124 tokens of context used while enabled, before you invoke anything

All declared tools (1)
Bash(npm ci) Read WebFetch

Documentation

README · ~4 min read

Design Tokens

With $THIS being the folder that contains this SKILL.md:

Prerequisite

$THIS/node_modules/ exists and is not older than 7 days; if not: cd $THIS && npm ci

Context

Design Tokens are defined in LESS files of the theming-base-content, and consumed in LESS and CSS files of different frameworks (= UI technologies). In $THIS/node_modules/ you find the following:

  • UI5: (with $LIBRARY being e.g. sap.ui.core, and $THEME being e.g. sap_horizon)
    • $THIS/node_modules/@openui5/$LIBRARY/src/${LIBRARY/./\//}/**/themes/base contains the baseTheme of the different libraries
    • $THIS/node_modules/@openui5/themelib_$THEME/src/${LIBRARY/./\//}/themes/ contains the $THEME of the different libraries
  • UI5 Web Components: (with $THEME being e.g. sap_horizon, and $COMPONENT being e.g. Button)

Reviews

Log in to leave a review.

No reviews yet — be the first.

Explore related

Other things in this space — across every part of the ecosystem, not just skills.

Subagents

All subagents →

code-architect

Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences

32.8K stars

claude-security

The dedicated Claude Security orchestrator. Hand it an unattended job — "fully scan this repository and patch what you find; I understand it will use a lot of tokens" — and it runs the whole thing itself: capturing the revision, driving the multi-agent scan through the claude-security:scan workflow,

32.8K stars

plugin-validator

Use this agent when the user asks to "validate my plugin", "check plugin structure", "verify plugin is correct", "validate plugin.json", "check plugin files", or mentions plugin validation. Also trigger proactively after user creates or modifies plugin components. Examples: <example> Context: User f

32.8K stars