[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81146":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":13,"stars7d":13,"stars30d":13,"stars90d":14,"forks30d":14,"starsTrendScore":15,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":39,"readmeContent":40,"aiSummary":41,"trendingCount":14,"starSnapshotCount":14,"syncStatus":42,"lastSyncTime":43,"discoverSource":44},81146,"ui-modernizer","Rosalina7515\u002Fui-modernizer","Rosalina7515","One prompt to modernize React + Tailwind UIs. A Claude Code Skill.","",null,"JavaScript",32,1,0,3,43.5,"MIT License",false,"main",true,[22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"ai-developer-tools","claude-code","claude-code-skill","design-system","developer-tools","extensible","nextjs","nuxt","react","shadcn","shadcn-ui","style-profile","svelte","sveltekit","tailwindcss","ui-modernization","vue","2026-06-12 04:01:32","\u003Cdiv align=\"center\">\n\n**English** · [简体中文](.\u002FREADME.zh-CN.md)\n\n# ✨ ui-modernizer\n\n### One prompt. Modern UI.\n\n**A Claude Code Skill that turns your tired React \u002F Vue \u002F Svelte + Tailwind UI into a 2026 SaaS product.**\nLinear · Vercel · Stripe · shadcn — pick a vibe, get the look.\n\n```\n\"modernize this UI\"\n```\n\n\u003Cbr \u002F>\n\n\u003Cimg src=\".\u002Fassets\u002Fbefore-after.png\" alt=\"ui-modernizer · before \u002F after demo\" width=\"100%\" \u002F>\n\n\u003Cbr \u002F>\n\u003Cbr \u002F>\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fui-modernizer.svg?style=flat&color=000)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fui-modernizer)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-000.svg?style=flat)](.\u002FLICENSE)\n[![claude code](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FClaude%20Code-Skill-D97757?style=flat)](https:\u002F\u002Fclaude.com\u002Fclaude-code)\n[![stable](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fstable-1.0-22c55e?style=flat)](.\u002Freferences\u002Fapi-stability.md)\n[![stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FRosalina7515\u002Fui-modernizer?style=flat&color=000)](https:\u002F\u002Fgithub.com\u002FRosalina7515\u002Fui-modernizer\u002Fstargazers)\n\n\u003C\u002Fdiv>\n\n---\n\n## 🚀 Install in 10 seconds\n\n```bash\nnpx ui-modernizer\n```\n\nThat's it. The Skill is now available in any project you open with Claude Code.\n\nThen in Claude Code, in any React\u002FVue\u002FSvelte + Tailwind project:\n\n```\nmodernize this UI\n```\n\nClaude takes it from there.\n\n---\n\n## 🎯 What you get\n\n| | Before | After |\n|---|---|---|\n| Spacing | `p-2 m-2` everywhere | systematic 4 \u002F 6 \u002F 8 rhythm |\n| Color | `gray-*` + `blue-500` | zinc + indigo + brand-aware |\n| Radius | `rounded` | `rounded-md` \u002F `rounded-xl` per element |\n| Shadow | `shadow` | `shadow-sm` + `ring-1 ring-zinc-200` |\n| Hover | none | `transition-colors hover:bg-zinc-50` everywhere |\n| Focus | invisible | `focus-visible:ring-2 ring-indigo-500` |\n| Dark mode | doesn't exist | every color has a `dark:` variant |\n| Motion | nope | `animate-in fade-in slide-in-from-bottom-2` |\n| Typography | `font-bold` shouting | `font-semibold tracking-tight` whispering |\n\nPick a vibe:\n\n```\nmodernize this UI like Linear      # ultra-tight, mono-ish, soft purples (dark-first)\nmodernize this UI like Vercel      # monochrome, brutalist, hero gradients\nmodernize this UI like Stripe      # trust + precision, layered gradients, premium\nmodernize this UI like shadcn      # semantic CSS vars, the de-facto modern default\nmodernize this UI like Notion      # warm, calm, generous whitespace\nmodernize this UI like Raycast     # dark, dense, command-bar energy\nmodernize this UI like Apple       # premium pills, soft shadows, glass\n```\n\nOr **bring your own profile** — point at any local Markdown file matching the spec:\n\n```\nmodernize this UI using .\u002Fdesign\u002Four-brand.md\n```\n\nSee [Pluggable style profiles](.\u002Freferences\u002Fprofile-pluggability.md) and [the profile format spec](.\u002Freferences\u002Fstyle-references\u002F_PROFILE_FORMAT.md).\n\n### 🧱 Want shadcn primitives? Just ask.\n\n```\nmodernize this UI and use shadcn components\n```\n\nui-modernizer scans your project for hand-rolled `\u003Cbutton>` \u002F `\u003Cinput>` \u002F `\u003Cspan class=\"badge-shape\">` \u002F card patterns, runs `npx shadcn@latest add ...` for what it needs, then rewrites them to `\u003CButton>` \u002F `\u003CInput>` \u002F `\u003CBadge>` \u002F `\u003CCard>` — preserving every event handler, ref, and `aria-*` along the way.\n\nRead [`references\u002Fcomponent-substitution.md`](.\u002Freferences\u002Fcomponent-substitution.md) for the full workflow and safety rules.\n\n---\n\n## 🛡️ Safe by design\n\nui-modernizer **only touches your visual layer**:\n\n- ✅ `className` string contents\n- ✅ Layout wrapper `\u003Cdiv>`s (additive only)\n- ✅ `globals.css`, `tailwind.config`\n- ❌ Event handlers\n- ❌ State, effects, fetches, server actions\n- ❌ Props or component signatures\n- ❌ Anything that could break your app\n\nEvery run is:\n\n1. **Planned** — you see exactly what it'll change, before it changes.\n2. **Backed up** — full copy of every modified file in `.ui-modernizer-backup\u002F\u003Ctimestamp>\u002F`.\n3. **Diffed** — a `report.md` with file-by-file `+\u002F-` counts.\n4. **Reversible** — one command:\n\n```bash\nnpx ui-modernizer rollback\n```\n\n---\n\n## ⚙️ How it works\n\n```\n┌──────────┐   ┌──────────┐   ┌──────────┐\n│ DETECT   │ → │ PLAN     │ → │ BACKUP   │\n│ stack    │   │ files    │   │ originals│\n└──────────┘   └──────────┘   └──────────┘\n                                    ↓\n┌──────────┐   ┌──────────┐   ┌──────────┐\n│ DONE ✨  │ ← │ REPORT   │ ← │ APPLY    │\n│          │   │ .md      │   │ rules    │\n└──────────┘   └──────────┘   └──────────┘\n```\n\nKnowledge is split into Markdown files that Claude reads on demand — so you can:\n\n- **Fork** the skill, edit `references\u002Fstyle-references\u002F\u003Cyour-brand>.md`, get a custom modernizer for your design system.\n- **Audit** every rule the AI applies, in plain English, in `references\u002Ftailwind-modernization.md`.\n\n---\n\n## 📦 Supported stacks\n\n| | Status |\n|---|---|\n| React + Next.js (App Router) | ✅ |\n| React + Next.js (Pages Router) | ✅ |\n| Vue 3 + Nuxt 3 | ✅ |\n| Vue 3 + Vite | ✅ |\n| Svelte 5 + SvelteKit | ✅ |\n| Svelte 5 + Vite | ✅ |\n| Tailwind CSS v3 | ✅ |\n| Tailwind CSS v4 | ✅ |\n| styled-components | ❌ out of scope |\n| CSS Modules | ❌ out of scope |\n\n---\n\n## 🧪 Try it on the included demo\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FRosalina7515\u002Fui-modernizer\ncd ui-modernizer\u002Fexamples\u002Fbefore && npm install && npm run dev\n# → http:\u002F\u002Flocalhost:3000  (looks dated on purpose)\n\ncd ..\u002Fafter && npm install && npm run dev\n# → http:\u002F\u002Flocalhost:3001  (what ui-modernizer produces)\n```\n\n---\n\n## 🗺️ Roadmap\n\n### Released\n\n- [x] **v0.1** — MVP: React + Next.js + Tailwind v3, 10 modernization rules, backup\u002Frollback\n- [x] **v0.2** — Tailwind v4 support + custom brand color detection\n- [x] **v0.3** — Vue 3 (Nuxt \u002F Vite) + Svelte 5 (SvelteKit \u002F Vite) support\n- [x] **v0.4** — Pluggable style profiles (7 built-in + bring-your-own Markdown)\n- [x] **v0.5** — Component substitution (auto-install shadcn primitives)\n- [x] **v0.6** — Visual regression checks (diff DOM + computed styles before\u002Fafter)\n- [x] **v0.7** — AST safety net (`@babel\u002Fparser` for JSX\u002FTSX; tightened scanners for Vue\u002FSvelte)\n- [x] **v0.8** — `.ui-modernizer.json` config + `--dry-run` mode\n- [x] **v0.9** — Polish: `UMD-NNN` error codes, unified JSON output, Vitest tests, \"did you mean?\" suggestions\n- [x] **v1.0** — Stable API contract ([SemVer commitment](.\u002Freferences\u002Fapi-stability.md)), governance docs, health-check, 41-test suite\n\n### Upcoming\n\n- [ ] **v1.1** — Tests & stability hardening (90%+ coverage)\n- [ ] **v1.2** — Docs site polish (interactive playground, profile gallery)\n- [ ] **v1.3** — AI reverse generation — \"create a settings page like Linear\"\n- [ ] **v1.4** — A11y audit + auto-fix\n- [ ] **v1.5** — Performance audit (images, fonts, hydration)\n- [ ] **v1.6** — VS Code + JetBrains plugins\n- [ ] **v1.7** — Figma → code\n- [ ] **v1.8** — More design systems (Material 3, Fluent, Carbon, Ant)\n- [ ] **v1.9** — React Native + Expo (via NativeWind)\n- [ ] **v2.0** — Full plugin system (ESLint-style ecosystem)\n\nFull reasoning, strategic notes, and explicit non-goals → **[ROADMAP.md](.\u002FROADMAP.md)**.\n\n---\n\n## 🤝 Contributing\n\nui-modernizer is mostly **prompt + Markdown rules**. Adding a new aesthetic is one PR:\n\n1. Copy [`references\u002Fstyle-references\u002Fnotion.md`](.\u002Freferences\u002Fstyle-references\u002Fnotion.md) as a starting template.\n2. Edit the frontmatter (`name` must match your filename) and fill in `## Tokens`, `## Patterns`, `## Don'ts`.\n3. Validate locally: `node scripts\u002Fvalidate-profile.mjs references\u002Fstyle-references\u002F\u003Cyour>.md` — must exit 0.\n4. Open a PR. CI re-runs the validator on every push.\n\nRead the [profile format spec](.\u002Freferences\u002Fstyle-references\u002F_PROFILE_FORMAT.md) before you start. It's short.\n\n### Running tests\n\n```bash\nnpm install\nnpm test\n```\n\n(Uses Vitest — `npm test` runs once, `npm run test:watch` watches.)\n\n---\n\n## ❓ FAQ\n\n**Does it call an external API?**\nNo. It runs entirely inside your local Claude Code. Your code never leaves your machine.\n\n**Will it change my business logic?**\nBy design, no. Hard rules in `SKILL.md` forbid it, and every run produces an auditable diff.\n\n**What if I hate the result?**\n`npx ui-modernizer rollback` — every modified file is restored from a timestamped backup.\n\n**Does it work without Tailwind?**\nNot in MVP. CSS Modules and styled-components are on the roadmap (`v0.4+`).\n\n**Why \"Skill\" and not a CLI?**\nThe visual judgement here needs an LLM. A CLI would be doing dumb regex replaces; the Skill leverages Claude's design taste while keeping side effects (backups, diffs, rollback) deterministic.\n\n---\n\n## 🌟 Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=Rosalina7515\u002Fui-modernizer&type=Date)](https:\u002F\u002Fstar-history.com\u002F#Rosalina7515\u002Fui-modernizer&Date)\n\n---\n\n\u003Cdiv align=\"center\">\n\n**An open-source project for developers who care about UI craft.**\n\n[MIT](.\u002FLICENSE)\n\n\u003C\u002Fdiv>\n","ui-modernizer 是一个基于 Claude Code 技能的工具，能够通过单个指令将 React、Vue 或 Svelte 与 Tailwind CSS 结合的用户界面现代化。其核心功能包括自动调整间距、颜色、圆角、阴影、悬停效果、焦点样式等，以符合现代设计趋势，并支持暗黑模式和自定义风格配置文件。该工具特别适合需要快速更新或统一多个项目 UI 风格的情况，无论是个人开发者还是团队都能从中受益。此外，它还兼容 Next.js、Nuxt、SvelteKit 等流行框架，并且可以通过简单的命令行安装使用。",2,"2026-06-11 04:03:42","CREATED_QUERY"]