Create Wot Ui Theme

Generates single-file SCSS themes for wot-ui projects with all semantic tokens in one place. You get a complete mixin with primary scales, functional colors (danger, success, warning), text, borders, fills, and feedback states, plus the mounting selectors all in src/themes/styles/{theme-name}.scss. It won't touch the library's internal theme files or generate light/dark pairs unless you ask. By default it just creates the theme file and tells you the @use statement to add to App.vue. Useful when you're building a brand theme or custom design system on top of wot-ui and want everything self-contained instead of scattered across multiple imports. Expects fixed color values, not CSS variable references.

skills.sh installs: 854
GitHub stars: 38
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wot-ui/open-wot --skill create-wot-ui-theme --agent claude-code

Installs into .claude/skills of the current project.

Files

Create Wot-ui Theme Skill

这个 skill 用于在 wot-ui 项目中生成“单文件主题 SCSS”方案。它约束主题文件在 src/themes/styles 下完成语义变量定义与挂载，App.vue 只负责 @use 引入，不扩展成 light/dark 双文件结构，也不改造 uni_modules/wot-ui/styles/theme/index.scss。

适用场景

用户明确要求为 wot-ui 生成品牌主题、业务主题或定制语义变量主题。
用户希望新增 src/themes/styles/{主题名}.scss，并把挂载逻辑也收进主题文件。
用户要求 App.vue 只保留 @use './themes/styles/{主题名}.scss' as {主题名}; 这一类引入。
用户强调不要生成 dark 主题文件、不要拆成双文件主题结构、不要改内置主题入口。

不适用场景

用户只是想知道 wd-config-provider 或普通 CSS 变量怎么用，这种情况优先使用 wot-ui-v2 skill。
用户要做 light/dark 双主题、动态换肤系统、运行时 token 注入，这不属于本 skill 的目标结构。
当前仓库没有实际业务 src/App.vue 或主题目录时，不要臆造文件；应基于用户目标项目路径执行，或先向用户确认目标工程位置。

核心约束

只生成一个主题文件：src/themes/styles/{主题名}.scss。
主题文件内必须同时包含：
- 一个 @mixin {主题名}-theme-vars
- page、.wot-theme-{主题名}、.wot-theme-{主题名} .wd-root-portal 的挂载选择器
App.vue 只负责 @use 引入，不重复写挂载选择器。
所有语义变量都必须填写固定色值或 transparent，不要写成 var(--wot-xxx)。
不生成 dark.scss，不修改 uni_modules/wot-ui/styles/theme/index.scss。
如果用户没有明确要求接入 App.vue，默认只生成主题文件并给出应追加的 @use 语句。