create-wot-ui-theme

Imported from wot-ui/wot-starter (.agents/skills/create-wot-ui-theme/SKILL.md). Install upstream with npx skills add wot-ui/wot-starter --skill create-wot-ui-theme. Copyright stays with the author.

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

执行前确认

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

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

推荐流程

1. 先查看项目里是否已存在 src/themes/styles/*.scss 与 src/App.vue，确认接入位置和现有顺序。
2. 若用户未给足主题信息，先收集主题名、风格和 token 调整范围。
3. 创建 src/themes/styles/{主题名}.scss，按本 skill 的完整模板输出全部语义变量。
4. 如用户明确要求接入，再在 src/App.vue 的 <style lang="scss"> 中只追加 @use './themes/styles/{主题名}.scss' as {主题名};。
5. 检查变量是否完整、值是否全为固定色值、挂载选择器是否在主题文件内。

主题文件要求

结构要求

• 只保留一个 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 主题、变量映射层或额外目录结构
• 生成代码时优先保持最小改动，不破坏现有主题文件顺序、选择器范围和项目风格
• 如果发现项目里已有不同主题体系，先说明差异，再确认是否仍按本单文件结构落地