skills.rest
suhwan
suhwanCOMMUNITY
Explore all skills by this author →
GitHub

upgrade

Analyze CSS/Tailwind tokens and generate a UI migration plan.

Updated Feb 1, 2026
Search Tags:#ui#tailwind#upgrade#design-system#migrate#token-mapping#aesthetic-consistency
One-click install
npx skills add https://github.com/suhwan/claude-registry --skill upgrade-suhwan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: upgrade
Source: https://github.com/suhwan/claude-registry/tree/main/skills/design-ui/nano-upgrade
Command: npx skills add https://github.com/suhwan/claude-registry --skill upgrade-suhwan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI upgrade process is complex and error-prone when moving from generic designs to a distinctive design system. This Skill guides the migration to a recognizable, scalable UI language.

Core Features & Use Cases

  • Analyze current UI tokens, colors, and typography to identify divergence from a target design system.
  • Generate a concrete migration plan that maps old tokens to Nano UI tokens and suggests component-level updates.
  • Use Cases: upgrading a Tailwind-based dashboard to a branded, cohesive UI across pages and components.

Quick Start

Provide your project's UI assets and tokens so the system can generate a migration plan to a distinctive design system.

Frequently Asked Questions about upgrade

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

FAQPage Schema
How do I migrate a generic Tailwind UI to a distinctive design system?▼

A UI design system migration analyzes your current CSS and Tailwind tokens, scores design uniqueness, and maps old tokens to new ones to output a concrete migration plan for brand-level differentiation.

What is the best way to map old CSS tokens to a new design system?▼

The best way to map old CSS tokens is to analyze your current UI assets for color and typography divergence, then use an automated token-mapping process to generate targeted component-level update suggestions.

Does this design system upgrade process work for existing web dashboards?▼

Yes, the design system upgrade process works for existing web dashboards by analyzing current UI tokens and generating a concrete migration path that ensures aesthetic consistency across pages and components.

How do I analyze my current UI tokens for design uniqueness?▼

You analyze current UI tokens by evaluating existing colors and typography to identify divergence from a target design system, which generates a uniqueness score to guide your migration plan.

What do I need to provide to generate a UI token migration plan?▼

To generate a UI token migration plan, you need to provide your project's current UI assets, CSS, and Tailwind tokens so the system can analyze divergence and output component-level update suggestions.

Related Skills

Explore More Design & Creative Skills→
Pabloprogramador23Pabloprogramador23

reversa-design-system

Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

luxury

Provide design-system guidelines for implementing a dark aesthetic in Roblox UI development.

Community
Intermediate
erikstmartinerikstmartin
16

tailwind-design-system

Implement a Tailwind v4 design system with semantic tokens and CVA components.

Community
Advanced
PavkaBrikaPavkaBrika
1

extract

Plans extraction of UI components and design tokens into a centralized system.

Community
Intermediate