wot-ui-v2

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Wot UI V2 Skill

这个 skill 用于让 Agent 在处理 wot-ui v2 相关任务时，优先采用组件库既有能力、遵守 uni-app 场景限制，并结合本仓库提供的

wot

CLI 查询离线知识。

This skill is designed to enable the Agent to prioritize the existing capabilities of the component library, comply with uni-app scenario constraints, and use the

wot

CLI provided in this repository to query offline knowledge when handling tasks related to wot-ui v2.

适用场景

Applicable Scenarios

用户询问某个
```
wd-*
```
组件的基础用法、属性、事件、插槽或样式变量。
需要生成或重构
```
uni-app + Vue 3 + TypeScript
```
的 wot-ui 页面或组件代码。
需要在
```
ConfigProvider
```
、主题变量、暗黑模式、国际化、反馈类 hooks、表单等场景下给出正确做法。
需要排查文档中常见的
```
Toast
```
、
```
Dialog
```
、
```
Popup
```
、
```
Tabs
```
、
```
Slider
```
、样式覆盖问题。
用户只是泛化地提到主题定制，但还没有明确要求按“单文件主题 SCSS + App.vue 只
```
@use
```
”的结构生成时。

Users inquire about the basic usage, properties, events, slots, or style variables of a
```
wd-*
```
component.
Need to generate or refactor wot-ui page or component code for
```
uni-app + Vue 3 + TypeScript
```
.
Need to provide correct practices in scenarios such as
```
ConfigProvider
```
, theme variables, dark mode, internationalization, feedback hooks, forms, etc.
Need to troubleshoot common issues in the documentation such as
```
Toast
```
,
```
Dialog
```
,
```
Popup
```
,
```
Tabs
```
,
```
Slider
```
, and style overriding problems.
Users mention theme customization generally without explicitly requiring generation according to the structure of "single-file theme SCSS + only
```
@use
```
in App.vue".

Recommended Process

先用本仓库 CLI 或 MCP 工具查组件知识。
再根据项目实际安装方式决定导入路径与集成方式。
优先复用现成的
```
wd-*
```
组件、hooks、主题变量与组合模式，不要退化成原生标签堆砌。
如果问题涉及约束或坑位，再查阅参考知识。
如果用户明确要求生成
```
src/themes/styles/{主题名}.scss
```
单文件主题，并把挂载逻辑收进主题文件，优先切换到
```
create-wot-ui-theme
```
skill。

First use the repository's CLI or MCP tool to query component knowledge.
Then determine the import path and integration method based on the actual installation method of the project.
Prioritize reusing existing
```
wd-*
```
components, hooks, theme variables, and combination patterns instead of falling back to native tag stacking.
If the problem involves constraints or pitfalls, refer to Reference Knowledge.
If the user explicitly requires generating a single-file theme
```
src/themes/styles/{theme-name}.scss
```
and putting the mounting logic into the theme file, switch to the
```
create-wot-ui-theme
```
skill first.

查询顺序

Query Order

```
wot list
```
找组件名。
```
wot info <Component>
```
看 props、events、slots、CSS 变量。
```
wot demo <Component>
```
看 demo 名称或具体 demo 代码。
```
wot doc <Component>
```
看完整 markdown 文档。
```
wot token <Component>
```
看主题变量。

Use
```
wot list
```
to find component names.
Use
```
wot info <Component>
```
to view props, events, slots, and CSS variables.
Use
```
wot demo <Component>
```
to view demo names or specific demo code.
Use
```
wot doc <Component>
```
to view the complete markdown documentation.
Use
```
wot token <Component>
```
to view theme variables.

工作规则

Working Rules

默认把 wot-ui 视为
```
uni-app + Vue 3 + TypeScript
```
组件库。
写页面时优先输出
```
script setup
```
风格。
反馈类能力如
```
useToast
```
、
```
useDialog
```
、
```
useNotify
```
、
```
useImagePreview
```
、
```
useVideoPreview
```
，除了 hook 调用外，通常还需要页面内显式声明对应组件实例。
文档里经常出现
```
@/uni_modules/wot-ui
```
导入路径；如果用户项目采用 npm 安装，应切换成
```
@wot-ui/ui
```
。
主题定制优先走
```
ConfigProvider
```
和 CSS 变量，不优先建议深度覆盖内部类名。
生成代码时尽量沿用组件库文档里的命名和交互模式，例如
```
v-model:visible
```
、
```
before-confirm
```
、
```
confirm
```
、
```
change
```
、
```
custom-class
```
、
```
custom-style
```
。

By default, wot-ui is regarded as a
```
uni-app + Vue 3 + TypeScript
```
component library.
Prioritize outputting in
```
script setup
```
style when writing pages.
For feedback capabilities such as
```
useToast
```
,
```
useDialog
```
,
```
useNotify
```
,
```
useImagePreview
```
,
```
useVideoPreview
```
, in addition to hook calls, corresponding component instances usually need to be explicitly declared in the page.
The import path
```
@/uni_modules/wot-ui
```
often appears in the documentation; if the user's project uses npm installation, it should be switched to
```
@wot-ui/ui
```
.
For theme customization, prioritize using
```
ConfigProvider
```
and CSS variables instead of deeply overriding internal class names.
Try to follow the naming and interaction patterns in the component library documentation when generating code, such as
```
v-model:visible
```
,
```
before-confirm
```
,
```
confirm
```
,
```
change
```
,
```
custom-class
```
,
```
custom-style
```
.

参考资料

Reference Materials

Wot UI V2 概览

Wot UI V2 Overview

wot-ui-v2

Original

Translation

Wot UI V2 Skill

Wot UI V2 Skill

适用场景

Applicable Scenarios

推荐流程

Recommended Process

查询顺序

Query Order

工作规则

Working Rules

参考资料

Reference Materials