Download for macOS
Skill

ui-theme-designer-design-tokens

@sap Updated 2026-10-19

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).

claude-codedesign-tokensfiorisapui-theme-designer

Install

With your agent

Install OMGSkills skill "sap/ui-theme-designer-plugins-for-coding-agents:plugins/ui-theme-designer/skills/ui-theme-designer-design-tokens" into this agent's normal skills directory: use the OMGSkills MCP get_skill tool, install only the pinned_install commit and path, verify SKILL.md against pinned_install.skill_md_sha, and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.

Manual command

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

From README

Design Tokens With $THIS being the folder that contains this SKILL.md: Prerequisite $THIS/nodemodules/ 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/nodemodules/ you find the following: UI5: (with $LIBRARY being e.g. sap.ui.core, and $THEME being e.g. saphorizon) $THIS/nodemodules/@openui5/$LIBRARY/src/${LIBRARY/./\//}//themes/base contains the baseTheme of the different libraries $THIS/nodemodules/@openui5/themelib$THEME/src/${LIBRARY/./\//}/themes/ contains the $THEME of the different libraries UI5 Web Components: (with $THEME being e.g. saphorizon, and $COMPONENT being e.g.