create-wot-ui-theme

Q: How do I install create-wot-ui-theme?

Run npx skills add https://github.com/wot-ui/open-wot --skill create-wot-ui-theme in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/create-wot-ui-theme/ (personal) or .claude/skills/create-wot-ui-theme/ (project).

by wot-uiFrontend & Design

为 wot-ui 生成单文件主题 SCSS，并在用户明确要求接入时追加 App.vue 的 @use。当用户要做品牌主题、语义变量落地、单文件主题接入时使用。

Installs: 854
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/wot-ui/open-wot --skill create-wot-ui-theme

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads create-wot-ui-theme automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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 语句。

执行前确认

生成前优先确认这些信息；缺少时先问清楚再动手：

主题名称，例如 antd、ocean、forest
主题风格描述，例如品牌化、偏中性、偏高对比
主色 10 阶是否全部自定义
danger、success、warning 是否沿用默认值
文本、边框、填充、反馈态是否需要整体调性调整
是否需要同步接入 src/App.vue

主题文件要求

结构要求

只保留一个 mixin，命名为 {主题名}-theme-vars
注释风格尽量贴近 antd.scss 这种语义分组写法
挂载选择器直接写在同一文件末尾
mixin 调用形式固定为 @include {主题名}-theme-vars();

App.vue 要求

只追加 @use './themes/styles/{主题名}.scss' as {主题名};
不在 App.vue 里重复写 page, .wot-theme-{主题名} 这些挂载块
如果已有其他主题 @use，保持原有顺序和已有块不被破坏，只追加当前主题

完整变量模板

@mixin {主题名}-theme-vars {
  /* {主题描述} semantic tokens */
  /* Primary */
  --wot-primary-1: #F5F8FFFF;
  --wot-primary-2: #E5EDFFFF;
  --wot-primary-3: #B8CFFFFF;
  --wot-primary-4: #7CA4FFFF;
  --wot-primary-5: #4480FFFF;
  --wot-primary-6: #1C64FDFF;
  --wot-primary-7: #164ED1FF;
  --wot-primary-8: #1341ADFF;
  --wot-primary-9: #0F3285FF;
  --wot-primary-10: #0A235CFF;

  /* Danger */
  --wot-danger-main: #F14646FF;
  --wot-danger-hover: #FB7C7CFF;
  --wot-danger-clicked: #DC2C2CFF;
  --wot-danger-disabled: #FFC9C9FF;
  --wot-danger-particular: #FFE3E3FF;
  --wot-danger-surface: #FFF5F5FF;

  /* Success */
  --wot-success-main: #12B886FF;
  --wot-success-hover: #59CDAAFF;
  --wot-success-clicked: #0F956CFF;
  --wot-success-disabled: #B8EADBFF;
  --wot-success-particular: #E7F8F3FF;
  --wot-success-surface: #F3FBF9FF;

  /* Warning */
  --wot-warning-main: #F57F00FF;
  --wot-warning-hover: #FFA94DFF;
  --wot-warning-clicked: #D05706FF;
  --wot-warning-disabled: #FFD8A8FF;
  --wot-warning-particular: #FFE8CCFF;
  --wot-warning-surface: #FFF6EBFF;

  /* Text */
  --wot-text-main: #1D1F29FF;
  --wot-text-secondary: #4E5369FF;
  --wot-text-auxiliary: #868A9CFF;
  --wot-text-disabled: #C9CBD4FF;
  --wot-text-placeholder: #A9ACB8FF;
  --wot-text-white: #FFFFFFFF;

  /* Icon */
  --wot-icon-main: #1D1F29FF;
  --wot-icon-secondary: #4E5369FF;
  --wot-icon-auxiliary: #868A9CFF;
  --wot-icon-disabled: #C9CBD4FF;
  --wot-icon-placeholder: #A9ACB8FF;
  --wot-icon-white: #FFFFFFFF;

  /* Border */
  --wot-border-extra-strong: #868A9CFF;
  --wot-border-strong: #C9CBD4FF;
  --wot-border-main: #E5E6EBFF;
  --wot-border-light: #F2F3F5FF;
  --wot-border-white: #FFFFFFFF;
  --wot-border-zero: transparent;

  /* Filled */
  --wot-filled-extra-strong: #C9CBD4FF;
  --wot-filled-strong: #E5E6EBFF;
  --wot-filled-content: #F2F3F5FF;
  --wot-filled-bottom: #F7F8FAFF;
  --wot-filled-oppo: #FFFFFFFF;
  --wot-filled-zero: transparent;

  /* Divider */
  --wot-divider-main: #00000014;
  --wot-divider-light: #0000000A;
  --wot-divider-strong: #00000026;
  --wot-divider-white: #FFFFFFFF;

  /* Feedback */
  --wot-feedback-hover: #0000000A;
  --wot-feedback-active: #00000014;
  --wot-feedback-accent: #1C64FD14;

  /* Opacity filled */
  --wot-opacfilled-tooltip-toast-cover: #000000BF;
  --wot-opacfilled-main-cover: #0000008C;
  --wot-opacfilled-light-cover: #0000004D;

  /* Picker view mask */
  --wot-picker-view-mask-start-color: #FFFFFFD9;
  --wot-picker-view-mask-end-color: #FFFFFF33;

  /* Classify application */
  --wot-classifyapplication-yellow-background: #FFFAF1FF;
  --wot-classifyapplication-yellow-border: #FDD78CFF;
  --wot-classifyapplication-yellow-content: #FAAD14FF;
  --wot-classifyapplication-Cyan-background: #F4FBFDFF;
  --wot-classifyapplication-Cyan-border: #BDEAF1FF;
  --wot-classifyapplication-Cyan-content: #22B8CFFF;
  --wot-classifyapplication-Purple-background: #F9F8FFFF;
  --wot-classifyapplication-Purple-border: #D0BFFFFF;
  --wot-classifyapplication-Purple-content: #8059F3FF;
  --wot-classifyapplication-Grape-background: #FBF6FDFF;
  --wot-classifyapplication-Grape-border: #EEBEFAFF;
  --wot-classifyapplication-Grape-content: #AE3EC9FF;
  --wot-classifyapplication-Pink-background: #FFF0F6FF;
  --wot-classifyapplication-Pink-border: #FCC2D7FF;
  --wot-classifyapplication-Pink-content: #FF357CFF;
}

page,
.wot-theme-{主题名},
.wot-theme-{主题名} .wd-root-portal {
  @include {主题名}-theme-vars();
}

输出检查清单

主题文件位于 src/themes/styles/{主题名}.scss
文件包含一个 @mixin {主题名}-theme-vars
文件内完成 page、.wot-theme-{主题名}、.wot-theme-{主题名} .wd-root-portal 挂载
包含主色、功能色、文字、图标、边框、填充、分割线、反馈、透明填充、Picker View 遮罩、分类色全部变量
所有值都是固定色值或 transparent
App.vue 中若接入，只追加 @use './themes/styles/{主题名}.scss' as {主题名};
mixin 调用形式为 @include {主题名}-theme-vars();

回答与实现规则

用户未明确要求接入时，不要主动改 App.vue
用户未明确要求时，不要顺手生成 dark 主题、变量映射层或额外目录结构
生成代码时优先保持最小改动，不破坏现有主题文件顺序、选择器范围和项目风格
如果发现项目里已有不同主题体系，先说明差异，再确认是否仍按本单文件结构落地

FAQ

What does the create-wot-ui-theme skill do?

为 wot-ui 生成单文件主题 SCSS，并在用户明确要求接入时追加 App.vue 的 @use。当用户要做品牌主题、语义变量落地、单文件主题接入时使用。

How do I install create-wot-ui-theme?

Run npx skills add https://github.com/wot-ui/open-wot --skill create-wot-ui-theme in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/create-wot-ui-theme/ (personal) or .claude/skills/create-wot-ui-theme/ (project).

Which AI agents can use create-wot-ui-theme?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is create-wot-ui-theme safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains create-wot-ui-theme?

It is published by wot-ui in wot-ui/open-wot. It has 854 recorded installs.

More from wot-ui/open-wot

View all →

wot-ui-v2

wot-ui/open-wot

回答、生成、重构、排查 wot-ui v2 相关代码时使用。关键词：wot-ui、uni-app、Vue3、wd-、ConfigProvider、useToast、useDialog、Form、Popup、theme、llms-full。适用于组件选型、API 查询、示例页面生成、主题定制、常见坑排查。

Frontend & Design1.2K installs

wot-ui-cli

wot-ui/open-wot

使用、调试或维护 @wot-ui/cli 与 open-wot 仓库。适用于 wot CLI 命令、Agent/MCP 接入、doctor/usage/lint、组件知识查询、客户端 adapter、离线数据提取、构建测试、发布包检查和仓库开发；如果任务是直接编写 wd- 组件页面或解释组件 API，应改用 wot-ui-v2 skill。

Frontend & Design853 installs

wot-ui-unocss-preset-guide

wot-ui/open-wot

指导安装、配置并使用 @wot-ui/unocss-preset。Invoke when 用户询问该预设的接入、配置、使用示例或常见问题排查。

Frontend & Design848 installs

migrate-v1-to-v2

wot-ui/open-wot

将用户项目从 Wot UI v1 迁移到 v2。用户要求升级 wot-design-uni 到 @wot-ui/ui、替换旧组件/旧 API、迁移表单校验体系、迁移图标名称，或修复因 v2 不兼容变更导致的编译错误、空图标和运行时报错时调用。

Frontend & Design489 installs

starter-cleaner

wot-ui/open-wot

将 wot-starter v2 模板精简为最小可开发状态，移除文档、演示分包、生成文件和 monorepo 配置，并同步清理相关 Vite 与 package.json 配置。用户要求“清理模板”“移除示例”“生成最小模板”“精简 wot-starter v2”时使用。

Frontend & Design275 installs

openspec-propose

wot-ui/open-wot

Propose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.

Frontend & Design140 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

create-wot-ui-theme

Install

Install

Describe the task

Review the result

SKILL.md

Create Wot-ui Theme Skill

适用场景

不适用场景

核心约束

执行前确认

推荐流程

主题文件要求

结构要求

App.vue 要求

完整变量模板

输出检查清单

回答与实现规则

FAQ

More from wot-ui/open-wot

Popular frontend & design skills