Create Wot-ui Theme Skill

This skill is used to generate a "single-file theme SCSS" solution in

wot-ui

projects. It restricts theme files to complete semantic variable definition and mounting under

src/themes/styles

. App.vue only handles

@use

import, does not expand into a light/dark dual-file structure, and does not modify

uni_modules/wot-ui/styles/theme/index.scss

Applicable Scenarios

Users explicitly request to generate brand themes, business themes, or customized semantic variable themes for
```
wot-ui
```
.
Users want to add
```
src/themes/styles/{theme-name}.scss
```
and include the mounting logic in the theme file.

Users require that

App.vue

only retains imports like

@use './themes/styles/{theme-name}.scss' as {theme-name};

Users emphasize not generating dark theme files, not splitting into dual-file theme structures, and not modifying the built-in theme entry.

Inapplicable Scenarios

If users just want to know how to use
```
wd-config-provider
```
or regular CSS variables, prioritize using the
```
wot-ui-v2
```
skill in this case.
If users need to implement light/dark dual themes, dynamic skin switching systems, or runtime token injection, this does not fall under the target structure of this skill.
If there is no actual business
```
src/App.vue
```
or theme directory in the current repository, do not create files arbitrarily; execute based on the user's target project path, or confirm the target project location with the user first.

Core Constraints

Only generate one theme file:
```
src/themes/styles/{theme-name}.scss
```
.

The theme file must include both:

A
```
@mixin {theme-name}-theme-vars
```

Mount selectors for

page

.wot-theme-{theme-name}

, and

.wot-theme-{theme-name} .wd-root-portal

```
App.vue
```
is only responsible for
```
@use
```
import, and does not repeat the mounting selectors.
All semantic variables must be filled with fixed color values or
```
transparent
```
, not written as
```
var(--wot-xxx)
```
.

Do not generate

dark.scss

, and do not modify

uni_modules/wot-ui/styles/theme/index.scss

If the user does not explicitly request integration with
```
App.vue
```
, only generate the theme file by default and provide the
```
@use
```
statement to be appended.

Pre-execution Confirmation

Confirm the following information first before generation; ask the user for clarification if any is missing:

Theme name, such as
```
antd
```
,
```
ocean
```
,
```
forest
```
Theme style description, such as brand-oriented, neutral, high-contrast
Whether all 10 levels of the primary color are customized
Whether
```
danger
```
,
```
success
```
,
```
warning
```
retain default values
Whether text, border, fill, and feedback states need overall tone adjustment
Whether to synchronize integration with
```
src/App.vue
```

Recommended Process

First check if
```
src/themes/styles/*.scss
```
and
```
src/App.vue
```
already exist in the project, confirm the integration location and existing order.
If the user does not provide sufficient theme information, first collect the theme name, style, and token adjustment scope.
Create
```
src/themes/styles/{theme-name}.scss
```
and output all semantic variables according to the complete template of this skill.

If the user explicitly requests integration, append only

@use './themes/styles/{theme-name}.scss' as {theme-name};

in the

<style lang="scss">

src/App.vue

Check if variables are complete, values are all fixed color values, and mounting selectors are within the theme file.

Theme File Requirements

Structure Requirements

Keep only one mixin, named
```
{theme-name}-theme-vars
```
Try to use semantic grouping comment style similar to
```
antd.scss
```
Mount selectors are directly written at the end of the same file
The mixin call format is fixed as
```
@include {theme-name}-theme-vars();
```

App.vue Requirements

Only append

@use './themes/styles/{theme-name}.scss' as {theme-name};

Do not repeat mounting blocks like
```
page, .wot-theme-{theme-name}
```
in
```
App.vue
```
If there are other theme
```
@use
```
statements already, maintain the original order and existing blocks, only append the current theme

Complete Variable Template

scss

@mixin {theme-name}-theme-vars {
  /* {theme description} 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-{theme-name},
.wot-theme-{theme-name} .wd-root-portal {
  @include {theme-name}-theme-vars();
}

Output Checklist

Theme file is located at
```
src/themes/styles/{theme-name}.scss
```
File contains one
```
@mixin {theme-name}-theme-vars
```

File completes mounting for

page

.wot-theme-{theme-name}

, and

.wot-theme-{theme-name} .wd-root-portal

Includes all variables for primary colors, functional colors, text, icons, borders, fills, dividers, feedback, opacity fills, Picker View masks, and classification colors
All values are fixed color values or
```
transparent
```

If integrated in

App.vue

, only

@use './themes/styles/{theme-name}.scss' as {theme-name};

is appended

Mixin call format is
```
@include {theme-name}-theme-vars();
```

Response and Implementation Rules

Do not modify
```
App.vue
```
proactively if the user does not explicitly request integration
Do not generate dark themes, variable mapping layers, or additional directory structures without explicit user requests
Prioritize minimal changes when generating code, do not disrupt the existing theme file order, selector scope, or project style
If a different theme system is found in the project, explain the differences first, then confirm whether to still implement this single-file structure

create-wot-ui-theme

NPX Install

Tags

SKILL.md Content (Chinese)