Ui Modernizer
Description
One prompt to modernize React + Tailwind UIs. A Claude Code Skill.
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
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"
[](https://www.npmjs.com/package/ui-modernizer) [](./LICENSE) [](https://claude.com/claude-code) [](./references/api-stability.md) [](https://github.com/Rosalina7515/ui-modernizer/stargazers)
🚀 Install in 10 seconds
npx ui-modernizerThat'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 UIClaude 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 |
Pick a vibe:
modernize this UI like Linear # Related Skills
Algorithmic Art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems
Brand Guidelines
Apply Anthropic's official brand colors and typography to artifacts
Canvas Design
Create beautiful visual art in PNG and PDF documents using design philosophy
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
Slack Gif Creator
Create animated GIFs optimized for Slack's size constraints
Theme Factory
Style artifacts with professional themes including 10 pre-set color/font combinations