What is the ui-modernizer skill?
The ui-modernizer skill restyles a React, Vue or Svelte plus Tailwind UI when you tell your AI coding agent to modernize this UI. It edits only the visual layer, plans the change first, backs up every file, writes a diff report and can be rolled back with one command.
The ui-modernizer skill turns a React, Vue or Svelte plus Tailwind UI into a modern one from one prompt. You tell your agent to modernize this UI, and it follows an eight step workflow from config to report.
It supports Next.js with the App Router and Pages Router, Nuxt 3, Vite and SvelteKit, on Tailwind CSS v3 and v4. Files that use styled-components or CSS Modules are out of scope.
Safe by design
The skill touches only the visual layer: className strings, additive wrapper divs, globals.css, tailwind.config and design token files. Event handlers, state, effects, fetches, server actions and props are left alone.
Every run is planned first, backed up to .ui-modernizer-backup/<timestamp>/, diffed in a report.md with file by file counts, and reversible with one command, npx ui-modernizer rollback.
Style profiles and shadcn components
Seven built-in profiles set the look: Linear, Vercel, Stripe, shadcn, Notion, Raycast and Apple. You can also point at your own Markdown file, as in modernize this UI using ./design/our-brand.md.
Component substitution is opt-in. Ask to use shadcn components and the skill scans for hand-rolled buttons, inputs, badges and cards, runs npx shadcn@latest add for what it needs, and rewrites them while preserving event handlers, refs and aria attributes.
Visual regression check
With Playwright installed, the skill captures a structural and computed style snapshot before and after, then lists risks such as missing interactive elements, lost aria labels and WCAG contrast drops below 4.5:1. Without Playwright that part is skipped.
Who the ui-modernizer skill is for
Best for
- Restyling an existing React, Vue or Svelte plus Tailwind project without touching business logic.
- Moving a UI toward a Linear, Vercel, Stripe, shadcn, Notion, Raycast or Apple look, or toward your own profile.
- Previewing candidate changes by file and rule with a read only dry run before editing.
Not for
- New feature work, bug fixes or business logic changes, which the skill is told not to touch.
- Projects that use styled-components or CSS Modules, which are out of scope.
How to install UI Modernizer Skill: Restyle Tailwind UIs Safely
npx ui-modernizernpx ui-modernizer rollback, or copy files back from .ui-modernizer-backup/<timestamp>/.Run the install command
Run
npx ui-modernizer. The skill is then available in any project you open with Claude Code.Open a supported project
Use a React, Vue or Svelte plus Tailwind project on Next.js, Nuxt 3, Vite or SvelteKit with Tailwind v3 or v4 configured.
Ask for the restyle
Say
modernize this UI, or pick a vibe such asmodernize this UI like Linear. Addand use shadcn componentsfor primitive substitution.Review the plan
The skill shows the files it will modify and asks whether to proceed before it changes anything.
Check that it loaded
Say modernize this UI in a supported project. Expect the skill to announce the detected runtime, framework, Tailwind flavor and accent, then present a plan before editing.
Key features
- One prompt restyleSaying modernize this UI starts an eight step workflow that detects the stack and brand, plans, backs up, applies, snapshots and reports.
- Visual layer onlyEdits are limited to className strings, additive wrapper divs, globals.css, tailwind.config and token files.
- Seven style profilesBuilt-in Linear, Vercel, Stripe, shadcn, Notion, Raycast and Apple profiles, plus a bring your own Markdown profile.
- Brand color detectiondetect-brand looks for an existing brand, primary or accent color so the skill uses it instead of forcing indigo.
- Backup and rollbackEvery modified file is copied to .ui-modernizer-backup/<timestamp>/ and npx ui-modernizer rollback restores the latest backup.
- Diff reportreport.md lists file by file changes, a risks section, and the rollback command.
- Opt-in shadcn substitutionAsking to use shadcn components installs primitives with npx shadcn@latest add and rewrites hand-rolled elements to them.
- Config and dry runA .ui-modernizer.json file sets profile, ignore globs, file cap and strict mode, and node scripts/dry-run.mjs --pretty previews candidates without edits.
- Risk checksA before and after snapshot flags missing elements, aria changes, WCAG contrast drops below 4.5:1 and font size shrinks over 20 percent.
Frequently asked questions
What is the ui-modernizer skill?
It is a skill that restyles a React, Vue or Svelte plus Tailwind UI from one prompt. When you say modernize this UI, your AI coding agent detects the stack, plans, backs up, rewrites class strings and styling files, takes before and after snapshots and writes a report.
How do I install the ui-modernizer skill?
Run npx ui-modernizer, and the skill becomes available in any project you open with Claude Code. Then open a React, Vue or Svelte plus Tailwind project and say modernize this UI. The skill stops and names the missing prerequisite if the stack check fails.
What will it change in my code?
Only the visual layer: className or class strings, additive wrapper divs, globals.css, tailwind.config and design token files. Event handlers, state, effects, fetch calls, server actions and props are not touched. Vue and Svelte script blocks are left alone, and dynamic class variables are skipped and noted in the report.
Which frameworks does it support?
React with Next.js App Router or Pages Router, Vue 3 with Nuxt 3 or Vite, and Svelte 5 with SvelteKit or Vite. Tailwind CSS v3 and v4 both work. Projects using styled-components or CSS Modules are out of scope, and such files are listed in the report.
How do I undo a modernization?
Run npx ui-modernizer rollback, which restores the latest backup. Every run first copies all modified files into .ui-modernizer-backup/ under an ISO timestamp, and you can also copy files back from there by hand. The final reply names the backup and report paths.
Can I use my own brand style?
Yes. Point at a local Markdown file that matches the profile format, for example modernize this UI using ./design/our-brand.md. The profile is validated before use, and its Tokens, Patterns and Don'ts sections apply, with the Don'ts treated as strict. Brand color overrides the profile.
How does the shadcn substitution work?
It runs only when you ask, for example modernize this UI and use shadcn components. The skill detects candidates, shows the plan and asks before running npx shadcn@latest add. It then rewrites elements, keeps event handlers and aria attributes, and rolls the rewrite back if the typecheck fails.
What happens if Playwright is missing?
The skill prints the install command and continues the modernization. The before and after snapshots are skipped, so the visual regression report with its risks section is omitted, but the rest of the workflow, including backup, edits and the diff report, is unaffected.