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

style-migration

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Maps ColorUI components to UnoCSS atomic classes and converts SCSS variables into UnoCSS theme tokens.
  • Transforms fixed px values to responsive rpx units and migrates gradients, spacing, and radii for Vue3 projects.
  • Provides a guided workflow and collaboration with component-migration and code-migration skills.

Quick Start

Begin by configuring UnoCSS in uno.config.ts with colorui theme tokens and then progressively replace ColorUI classes with atomic UnoCSS classes across components and pages.

Frequently Asked Questions about style-migration

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

FAQPage Schema
How do I migrate ColorUI styles to UnoCSS atomic classes in a Vue3 project?▼

Migrating ColorUI to UnoCSS involves progressively replacing ColorUI classes with atomic UnoCSS classes across components and pages, while converting SCSS variables into UnoCSS theme tokens within your uno.config.ts file.

How does px to rpx conversion work when migrating styles to UnoCSS?▼

When migrating styles to UnoCSS, fixed px values are transformed into responsive rpx units to ensure proper scaling across different screen sizes in your Vue3 application.

Can I use UnoCSS shortcuts or complex pseudo-classes for WXSS compatibility in Vue3?▼

No, WXSS compatibility constraints prohibit using UnoCSS shortcuts, wildcard selectors, and complex pseudo-classes. Theme colors must be explicitly defined in uno.config.ts instead of relying on shortcuts.

Does this style migration process support converting SCSS gradients and spacing to UnoCSS?▼

Yes, the style migration process transforms gradients, spacing, and radii from SCSS into UnoCSS atomic classes, ensuring visual consistency when migrating layouts from Vue2 to Vue3.

What is the best way to configure UnoCSS theme tokens when migrating from ColorUI?▼

The best way to configure UnoCSS theme tokens is to start by defining your ColorUI theme colors directly in the uno.config.ts file before replacing component classes with atomic alternatives.

Why do I need to migrate ColorUI to UnoCSS and wot-design-uni for Vue3?▼

You need to migrate ColorUI to UnoCSS and wot-design-uni to modernize Vue2 projects into Vue3, replacing SCSS variables and component styles with atomic CSS for better maintainability and responsive design.

Related Skills

Explore More Design & Creative Skills→
mazreanmazrean

using-unocss-with-templ

Integrate UnoCSS atomic CSS with Go templ templates for static sites.

Community
Intermediate
ruan-catruan-cat

component-migration

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

Community
Advanced
ruan-catruan-cat

beautiful-component-design

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

Community
Intermediate
oslokommuneoslokommune

punkt-css

Apply Punkt CSS typography, spacing, and grid utilities across web projects.

Official
Intermediate