Rosalina7515

UI Modernizer — Design skill for Claude Code

Design community

One prompt to modernize React + Tailwind UIs.

How to install UI Modernizer

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Rosalina7515/ui-modernizer and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What UI Modernizer does

One prompt to modernize React + Tailwind UIs. A Claude Code Skill.

Alternatives in Design

Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Brainwave — Learn to create modern websites with sleek parallax effects and bento box layouts 1.9k ★
Design Dna — Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visu 624 ★

README

**English** · [简体中文](./README.zh-CN.md)

✨ ui-modernizer

One prompt. Modern UI.

**A Claude Code Skill that turns your tired React / Vue / Svelte + Tailwind UI into a 2026 SaaS product.** Linear · Vercel · Stripe · shadcn — pick a vibe, get the look.

"modernize this UI"

[![npm](https://img.shields.io/npm/v/ui-modernizer.svg?style=flat&color=000)](https://www.npmjs.com/package/ui-modernizer) [![license](https://img.shields.io/badge/license-MIT-000.svg?style=flat)](./LICENSE) [![claude code](https://img.shields.io/badge/Claude%20Code-Skill-D97757?style=flat)](https://claude.com/claude-code) [![stable](https://img.shields.io/badge/stable-1.0-22c55e?style=flat)](./references/api-stability.md) [![stars](https://img.shields.io/github/stars/Rosalina7515/ui-modernizer?style=flat&color=000)](https://github.com/Rosalina7515/ui-modernizer/stargazers)

🚀 Install in 10 seconds

npx ui-modernizer

That's it. The Skill is now available in any project you open with Claude Code.

Then in Claude Code, in any React/Vue/Svelte + Tailwind project:

modernize this UI

Claude takes it from there.

🎯 What you get

	Before	After
Spacing	`p-2 m-2` everywhere	systematic 4 / 6 / 8 rhythm
Color	`gray-*` + `blue-500`	zinc + indigo + brand-aware
Radius	`rounded`	`rounded-md` / `rounded-xl` per element
Shadow	`shadow`	`shadow-sm` + `ring-1 ring-zinc-200`
Hover	none	`transition-colors hover:bg-zinc-50` everywhere
Focus	invisible	`focus-visible:ring-2 ring-indigo-500`
Dark mode	doesn't exist	every color has a `dark:` variant
Motion	nope	`animate-in fade-in slide-in-from-bottom-2`
Typography	`font-bold` shouting	`font-semibold tracking-tight` whispering