skills.rest
ruan-cat
ruan-catCOMMUNITY
Explore all skills by this author →
GitHub

component-migration

Migrate ColorUI and uni-app components to wot-design-uni and UnoCSS.

Updated Sep 11, 2025
Search Tags:#uni-app#unocss#component-migration#wot-design-uni#colorui#vue3-migration#icon-migration
One-click install
npx skills add https://github.com/ruan-cat/11comm-app --skill component-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-migration
Source: https://github.com/ruan-cat/11comm-app/tree/main/.claude/skills/component-migration
Command: npx skills add https://github.com/ruan-cat/11comm-app --skill component-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill removes ambiguity and repetitive work when converting legacy ColorUI and uni-app component usages to the wot-design-uni component library and UnoCSS conventions, while fixing TypeScript types, slot/prop misuse, and cross-platform compatibility issues.

Core Features & Use Cases

  • Component mapping and conversion: precise mappings from cu-btn/cu-list/cu-card and other ColorUI components to wd-button/wd-cell/wd-cell-group and related wot-design-uni components.
  • Icon and asset migration: migrate cuIcon-* to wd-icon with i-carbon-* classes and convert image tags to wd-img with UnoCSS sizing.
  • Form and interaction rules: enforce wd-form wrapping, wd-picker nesting rules, wd-checkbox vs wd-picker selection patterns, and wd-status-tip for empty states.
  • Type and usage fixes: resolve TypeScript type errors, correct inputValidate patterns, and ensure message.prompt callback usage instead of awaiting non-Promise wrappers.
  • Process and safety checklist: step-by-step execution checklist requiring official docs lookup, example verification, single-component edits, and IDE diagnostics before committing.

Quick Start

Analyze a Vue page that uses ColorUI and produce a step-by-step migration plan converting each component and class to wot-design-uni/UnoCSS, listing exact attribute changes, icon replacements, and validation checks.

Frequently Asked Questions about component-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate ColorUI components to wot-design-uni in a Vue3 project?▼

Migrating ColorUI components to wot-design-uni involves mapping cu-btn and cu-list tags to wd-button and wd-cell, enforcing wd-form wrapping, and replacing cuIcon classes with wd-icon and i-carbon conventions for Vue3 compatibility.

What is the best way to convert uni-app image tags to UnoCSS sizing?▼

The best way to convert uni-app image tags is to replace them with wd-img components and apply UnoCSS sizing classes, ensuring cross-platform compatibility and adherence to wot-design-uni documentation.

Does migrating to wot-design-uni require fixing TypeScript type errors?▼

Yes, migrating to wot-design-uni requires fixing TypeScript type errors, correcting inputValidate patterns, and ensuring message.prompt callback usage instead of awaiting non-Promise wrappers for reliable execution.

How do I handle wd-picker nesting rules during Vue2 to Vue3 migration?▼

Handling wd-picker nesting rules during Vue2 to Vue3 migration requires wrapping elements in wd-form, following wd-checkbox versus wd-picker selection patterns, and using wd-status-tip for empty states.

Can I use this component migration approach for form and list page refactors?▼

Yes, you can use this component migration approach for form and list page refactors to correct API usage, update TypeScript types, and ensure precise component mapping from legacy ColorUI to wot-design-uni standards.

What are the limitations when migrating cuIcon to wd-icon?▼

A key limitation when migrating cuIcon to wd-icon is ensuring custom-class conventions are strictly followed, requiring IDE diagnostics and single-component edits before committing to avoid slot and prop misuse.

Related Skills

Explore More Software Engineering Skills→
ruan-catruan-cat

style-migration

Migrate ColorUI and SCSS styling to UnoCSS and wot-design-uni.

Community
Intermediate
ruan-catruan-cat

use-wd-form

Define standardized form-building and validation guidelines for wd-form components.

Community
Advanced
ruan-catruan-cat

beautiful-component-design

Standardize uni-app wot-design-uni component styling with rpx sizing and UnoCSS conventions.

Community
Intermediate
jcmrsjcmrs

documentation-query

Map user questions to Claude Collaboration Platform documentation sections.

Community
Intermediate