Skill for Migrating from v1 to v2

This skill is used to assist users in migrating projects from

Wot UI v1

(

wot-design-uni

) to

Wot UI v2

(

@wot-ui/ui

Complete Migration Guide: 中文 / English.

Scope of Responsibilities

Scan for v1 usage, replace package names/paths, migrate component APIs, migrate form validation systems, and fix incompatible changes.
Not responsible for creating new business pages or refactoring business logic; only perform minimal necessary compatibility replacements.
Not responsible for dependency installation; users shall execute this in the terminal on their own.

Initial Interaction Confirmation

Before starting any operation, confirm the following three points with the user (skip corresponding questions if inferable from context):

Installation Method: npm or uni_modules? (Affects import paths and easycom configuration)
Objective:
- A. Full Migration (Project not upgraded yet) → Execute Phase 1 to 7
- B. Fix Errors After Upgrade (Upgraded but encountered compilation/runtime errors) → Locate issues by reading
```
errors.md
```
  first
Target Platform: H5 / WeChat Mini Program / Alipay Mini Program? (Affects style isolation and easycom verification methods)

Quick Access

Load corresponding sub-files directly based on the user's described issues:

Keywords	Sub-file
Error message / Compilation error / Module not found / is not defined / Abnormal after upgrade	`errors.md`
Form / Form / schema / zodAdapter / FormRules / Validation / Required asterisk	`form.md`
Package name / easycom / Volar / vite plugin / Internationalization / Path replacement / uni_modules	`infra.md`
Sass / Theme / Design Token / CSS variable / Style override / Dark mode / ConfigProvider	`styles.md`
Dialog / MessageBox / Empty / StatusTip / Cascader / ColPicker / Keyboard / NumberKeyboard / Button / Tag / Radio / Checkbox / Search / Grid / Fab / Badge / Slider / Tabs / Steps / Swiper / Tooltip / Popover / Collapse / Cell / Input / Textarea / PickerView / ImgCropper / CountTo / Segmented	`components.md`

Quick Reference for Core Changes

Type	v1	v2
npm package name	`wot-design-uni`	`@wot-ui/ui`
uni_modules directory	`wot-design-uni`	`wot-ui`
Dialog component	`wd-message-box`	`wd-dialog`
Dialog Hook	`useMessage`	`useDialog`
Empty state tip	`wd-status-tip`	`wd-empty`
Multi-column picker	`wd-col-picker`	`wd-cascader`
Numeric keyboard	`wd-number-keyboard`	`wd-keyboard`
Form validation	`rules` / `FormRules`	`schema` / `FormSchema`
Button variants	`plain` / `type="text"` / `type="icon"`	`variant` / Icon button
Button danger color	`type="error"`	`type="danger"`
Tag variants	`plain`	`variant="plain"`
Radio/Checkbox forms	`shape` / `inline` / `cell`	`type` / `direction` / Manual combination with `wd-cell`
Light-style search box	`light`	`variant="light"`
GridItem click event	`@itemclick`	`@click`
Utility function path	`components/common/util`	`common/util`

Migration Process

Recommended order: Dependency upgrade → Path replacement → Form pages → High-impact components → Medium-low impact components → Styles & themes → Regression testing.

Confirm with the user after completing each phase before proceeding to the next.

Phase 1: Scanning & Diagnosis

Determine the user's installation method (
```
npm
```
or
```
uni_modules
```
).
Confirm project configurations:
```
pages.json
```
easycom,
```
tsconfig.json
```
type declarations, Vite plugin auto-import.

Search for v1 legacy usage:

bash

rg "wot-design-uni|wd-message-box|useMessage|wd-status-tip|wd-col-picker|wd-number-keyboard|@itemclick|shape=|inline|\scell\b|\slight\b|type=\"error\"|type=\"icon\"|type=\"text\"|\splain\b|classPrefix|components/common/util|hide-label|hide-min-max|autoLineWidth|disabled-color|setRoate|useContentSlot|useMoreSlot|\bshow="

If the project has forms, additionally search:

bash

rg "wd-form|FormRules|:rules=|rules=|errorType|resetOnChange"

Report the discovered list to the user, sorted by impact level:
- High Impact: Form (structure + validation system), Dialog (formerly MessageBox), ColPicker, NumberKeyboard
- Medium Impact: Button, Tag, Radio/Checkbox, Search, Grid, Fab
- Low Impact: camelCase property names, minor property adjustments for Badge/Slider/Tabs/Steps/Swiper, etc.

Phase 2: Dependency & Path Replacement

See

infra.md

(package name, easycom, Volar, Vite plugin, internationalization) and

styles.md

(Sass upgrade). Return to Phase 3 after reading.

Phase 3: Migrate High-Impact Components

See

components.md

(MessageBox→Dialog, StatusTip→Empty, ColPicker→Cascader, NumberKeyboard→Keyboard).

For Form system migration, see

form.md

. Return to Phase 4 after reading.

Phase 4: Migrate Medium-Impact Components

See

components.md

(Button, Tag, Radio/Checkbox, Search, Grid, Fab). Return to Phase 5 after reading.

Phase 5: Migrate Low-Impact Properties

See

components.md

(Badge, Slider, Tabs, Steps, Swiper, Tooltip, Popover, Collapse, DatetimePickerView, ImgCropper, CountTo, Segmented, PickerView, camelCase property names). Return to Phase 6 after reading.

Phase 6: Migrate Styles & Themes

See

styles.md

(theme file import, global variable override, ConfigProvider, style override priority, dark mode). Proceed to Phase 7 regression verification after reading.

Phase 7: Regression Verification

Can it compile normally on H5 and target mini program platforms?
Can
```
easycom
```
correctly parse all
```
wd-*
```
components?
Have functional calls like
```
Toast
```
,
```
Dialog
```
,
```
Notify
```
been declared as instances in pages?
Are form submission, single-field validation, reset, hidden fields and asynchronous validation working normally?
Are the echo text and submission value of picker-type form items correct?
Do
```
Button
```
's
```
type
```
,
```
variant
```
,
```
round
```
and height meet expectations?
Has
```
Tag
```
's
```
variant
```
been migrated from
```
plain
```
?
Have
```
Radio
```
/
```
Checkbox
```
's
```
shape
```
,
```
inline
```
,
```
cell
```
been migrated?
Has
```
Search
```
's
```
light
```
been migrated to
```
variant="light"
```
?
Has
```
GridItem
```
's click event been migrated from
```
itemclick
```
to
```
click
```
?
Have form-related properties of
```
Cell
```
,
```
Input
```
,
```
Textarea
```
been migrated to
```
wd-form-item
```
?
Can instance methods like
```
PickerView
```
,
```
ImgCropper
```
,
```
CountTo
```
still be called normally?
Have old properties of
```
Badge
```
,
```
Slider
```
,
```
Tabs
```
,
```
Steps
```
,
```
Swiper
```
been migrated?
Does
```
Dialog
```
's mask click to close, Prompt return value and button configuration meet expectations?
Are dark mode, theme variables, and brand color override taking effect?
Are there style isolation issues with pop-ups on mini program platforms?
Do custom override styles still take effect?
Do icon names still exist, and does button height change affect page layout?

migrate-v1-to-v2

NPX Install

Tags

SKILL.md Content (Chinese)