一键导入
ui-theme-and-vscode-webview
Theme and environment behavior for QIP UI. Use when working on styles, color logic, rendering, or mode-specific behavior.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Theme and environment behavior for QIP UI. Use when working on styles, color logic, rendering, or mode-specific behavior.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ui-theme-and-vscode-webview |
| description | Theme and environment behavior for QIP UI. Use when working on styles, color logic, rendering, or mode-specific behavior. |
Use this skill when any UI behavior depends on theme or runtime environment.
The UI must work in all four modes:
[data-theme="dark"])[data-theme="high-contrast"]):root.vscode-webview)--vscode-* values from theme-variables.css.Use useVSCodeTheme() in components:
const { isDark, isVSCodeWebview, palette } = useVSCodeTheme();
isDark for conditional visuals (for example chart/Monaco/icon variants).isVSCodeWebview for behavior differences specific to extension runtime.Mapper Element provides an ability to setup a mapping between the message from source element to the target element. Use this skill when performing mapping between two elements, requiring data transformation, the user asks to add mapper/mapper-2.
API integration and utility usage conventions in QIP UI. Use when editing src/api, src/misc, or code that consumes these layers.
Component implementation patterns for QIP UI. Use when editing tables, forms, modals, notifications, labels, icons, and permissions-related UI.
Core development standards for the Qubership Integration Platform UI. Use when implementing, refactoring, or testing code in ui/.