wot-ui-v2

Original：🇨🇳 Chinese

Translated

Used for answering, generating, refactoring, and troubleshooting code related to wot-ui v2. Keywords: wot-ui, uni-app, Vue3, wd-, ConfigProvider, useToast, useDialog, Form, Popup, theme, llms-full. Suitable for component selection, API query, sample page generation, theme customization, and troubleshooting common pitfalls.

3installs

Sourcewot-ui/open-wot

Added on2026-04-23

NPX Install

npx skill4agent add wot-ui/open-wot wot-ui-v2

SKILL.md Content (Chinese)

View Translation Comparison →

Wot UI V2 Skill

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

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

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

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

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 Overview