Releases: Rosalina7515/ui-modernizer
v1.0.0 — Production ready 🚀
🚀 ui-modernizer v1.0 — Production ready
After 9 minor releases (0.1 → 0.9), ui-modernizer hits 1.0: the production-ready promise. Starting now, we follow Semantic Versioning — no breaking changes until 2.0.
Highlights
- API stability contract — public surface (workflow, trigger phrase, config schema, JSON envelope, error codes, profile format) is frozen for 1.x.
- Governance docs: CONTRIBUTING, CODE_OF_CONDUCT, SECURITY, MIGRATION.
npx ui-modernizer health— one-shot self-check with 10 verifications.- 41-test Vitest suite across 7 files — up from 18 tests at 0.9.
- Unified JSON envelope across all scripts:
{ ok, command, version, timestamp, payload | errors, warnings }. - UMD-NNN error codes everywhere — every failure has a code, title, and remedy.
- GitHub templates for issues + PRs.
One-time breaking change (0.x → 1.0)
JSON output shape now nests old top-level fields under payload. Old: r.supported. New: r.payload.supported. See MIGRATION.md for full upgrade path.
What's not changed
- Trigger phrase
"modernize this UI"— same. - 8-step Skill workflow — same.
.ui-modernizer.jsonschema — same.- Backup / rollback — same.
- All 7 style profiles — same names, same format.
🚀 v1.0 —— Production ready
经过 9 个 minor 版本(0.1 → 0.9),ui-modernizer 进入 1.0:production-ready 承诺。从现在起,遵循 Semantic Versioning —— 2.0 之前不会有破坏性变更。
亮点
- API 稳定契约 —— 公开 API 表面(工作流、触发短语、配置 schema、JSON 信封、错误码、profile 格式)在 1.x 内冻结。
- 治理文档:CONTRIBUTING、CODE_OF_CONDUCT、SECURITY、MIGRATION。
npx ui-modernizer health—— 一键自检,10 项验证。- 41 个 Vitest 测试,跨 7 个文件 —— 从 0.9 的 18 个翻倍。
- 统一 JSON 信封 覆盖所有脚本:
{ ok, command, version, timestamp, payload | errors, warnings }。 - 所有脚本用 UMD-NNN 错误码 —— 每个失败都有 code、title、remedy。
- GitHub 模板 覆盖 issue + PR。
0.x → 1.0 一次性破坏性变更
JSON 输出形状现在把原顶层字段嵌套到 payload 下。旧:r.supported,新:r.payload.supported。完整升级路径见 MIGRATION.md。
不变的部分
- 触发短语
"modernize this UI"—— 不变 - 8 步 Skill 工作流 —— 不变
.ui-modernizer.jsonschema —— 不变- 备份 / 回滚 —— 不变
- 全部 7 个 style profile —— 名称和格式不变
v0.9.0 — Polish, error codes, Vitest tests
What's new
Added
UMD-NNNerror code system. Every script that can fail now emits a structured error with code, title, one-paragraph remedy, and docs link. ~20 codes covering detection, config, backup, visual regression, AST,
profiles, substitution.- New reference:
references/error-codes.md— full catalog. - New helpers:
scripts/_errors.mjs(registry + makeError + didYouMean),scripts/_response.mjs(unified envelope:{ ok, command, version, timestamp, payload | errors, warnings }). - "Did you mean?" suggestions for typo'd profile / brand / component names.
- Vitest test suite in
tests/with config + 3 initial test files (errors, load-config, ast-extract). New scripts:npm test,npm run test:watch. CI runs tests on every push/PR.
Changed
scripts/load-config.mjs— now emitsUMD-010/UMD-011/UMD-012with structured details.SKILL.md— points atreferences/error-codes.mdfor error handling..github/workflows/ci.yml— addsnpm install + npm teststeps.
新增
UMD-NNN错误码体系。每个可能失败的脚本现在都发出结构化错误,含 code、title、一段补救、文档链接。约 20 个码,覆盖检测、配置、备份、视觉回归、AST、profile、替换。- 新增参考文档:
references/error-codes.md—— 完整目录。 - 新增辅助模块:
scripts/_errors.mjs(注册表 + makeError + didYouMean)、scripts/_response.mjs(统一信封:{ ok, command, version, timestamp, payload | errors, warnings })。 - "Did you mean?" 提示 —— profile / brand / 组件名拼错时给出最近匹配建议。
- Vitest 测试套件:
tests/含配置 + 3 个初始测试文件(errors、load-config、ast-extract)。新增脚本:npm test、npm run test:watch。CI 每次 push/PR 都跑测试。
改动
scripts/load-config.mjs—— 输出带结构化详情的UMD-010/UMD-011/UMD-012错误码。SKILL.md—— 失败模式指向references/error-codes.md。.github/workflows/ci.yml—— 加npm install + npm test步骤。
v0.8.0 — Project config + dry-run
What's new
Added
.ui-modernizer.jsonproject config. Drop this at your project root to encode team-level defaults: which profile, which files to ignore, max files cap, strict mode, screenshot routes, substitution component
allowlist, AST-required gate. Full schema inreferences/config-file.md.scripts/dry-run.mjs— read-only modernization preview. Walks UI files, counts stale class patterns by rule and by file, exits 0 normally or 1 in--ci/strictmode if any candidates exist. Drop-in for
pre-commitand CI lint jobs.scripts/load-config.mjs— config loader/validator. CLI:node scripts/load-config.mjs --pretty. Programmatic:import { loadConfig } from './scripts/load-config.mjs'.- New reference:
references/config-file.md— full schema, field reference, common recipes. - New example file:
.ui-modernizer.example.json.
Changed
SKILL.mdStep 0 (new) loads config before detection. Step 2 (PLAN) respectsprofile,brandoverride,ignore,maxFiles,strict.scripts/ast-extract.mjsrefactored to exportextractFile()(CLI behavior preserved).
新增
.ui-modernizer.json项目级配置。在项目根目录放这个文件,把团队级默认行为固化下来:用哪个 profile、忽略哪些文件、单次最大文件数、严格模式、截图路由、可替换组件白名单、AST 是否强制。完整 schema 见
references/config-file.md。scripts/dry-run.mjs—— 只读的现代化预览。扫描 UI 文件,按规则和文件统计陈旧 class 候选,正常退出 0,--ci或strict: true模式下发现候选时退出 1。可挂pre-commit或 CI lint job。scripts/load-config.mjs—— 配置加载器 / 校验器。CLI:node scripts/load-config.mjs --pretty。也可作为模块 import。- 新增参考文档:
references/config-file.md—— 完整 schema、字段说明、常用 recipe。 - 新增示例文件:
.ui-modernizer.example.json。
改动
SKILL.md新增 Step 0(LOAD CONFIG)在检测之前。Step 2(PLAN)尊重profile/brand覆盖 /ignore/maxFiles/strict。scripts/ast-extract.mjs重构以 exportextractFile()(CLI 行为保留)。
v0.7.0 — AST safety net
What's new
Added
- AST-based class-string extraction. New
scripts/ast-extract.mjslists every Tailwind class string in a JSX / TSX / Vue / Svelte file with line+column, kind, and aneditableflag — so the modernizer can edit
only strings the AST has confirmed as static class containers.- JSX / TSX uses
@babel/parser+@babel/traverse. HandlesclassName="...",className={"..."}, template-literal quasis,cn()/clsx()/classNames()/twMerge()/twJoin()/cva()arguments,
conditional expressions, object property keys. - Vue uses a tightened template-only scanner (script/style blocks masked).
class="..."and string literals inside:class="[...]"/:class="{...}"are extracted. Full Vue AST is a v0.8 stretch goal. - Svelte uses a markup-only scanner.
class="..."editable;class:foo={bool}directives flaggededitable: false. - Graceful degradation: if
@babel/parserisn't installed, the script exits withparser-missingand the modernizer falls back to v0.6-style regex.
- JSX / TSX uses
- New CLI test mode:
node scripts/ast-extract.mjs <file> --pretty. - New reference:
references/ast-safety.md. - Hero screenshot in README (the side-by-side before/after image).
Changed
SKILL.mdStep 5 — recommends runningast-extractto identify safe strings, then editing onlyeditable: trueentries.
Not changed
- v0.6 visual regression flow — independent, still runs.
- The Skill's hard rule "never touch business logic" — v0.7 just makes it mechanically verifiable for JSX/TSX.
新增
- 基于 AST 的 class 字符串提取。新增
scripts/ast-extract.mjs,列出 JSX / TSX / Vue / Svelte 文件里每一个 Tailwind class 字符串,带行号、列号、kind 和editable标志 —— 现代化时只编辑那些"已被 AST 确认为静态 class
容器"的字符串。- JSX / TSX 使用
@babel/parser+@babel/traverse。覆盖className="..."、className={"..."}、模板字符串 quasi、cn()/clsx()/classNames()/twMerge()/twJoin()/cva()
参数、条件表达式、对象属性 key。 - Vue 用收紧后的"仅 template 块"扫描器(script / style 块被屏蔽)。
class="..."和:class里的字符串字面量都被提取。完整 Vue AST 是 v0.8 的延伸目标。 - Svelte 用"仅 markup"扫描器。
class="..."可编辑;class:foo={bool}指令标为editable: false。 - 优雅降级:
@babel/parser没装时退出parser-missing,流程回退到 v0.6 的正则。
- JSX / TSX 使用
- 新增 CLI 测试模式:
node scripts/ast-extract.mjs <file> --pretty。 - 新增参考文档:
references/ast-safety.md。 - README hero 截图(前后对比并排图)。
改动
SKILL.mdStep 5 —— 推荐先跑ast-extract识别安全字符串,然后只编辑editable: true的条目。
未改动
- v0.6 视觉回归流程 —— 独立,继续运行。
- Skill 的硬性规则"不动业务逻辑" —— v0.7 只是让它在 JSX/TSX 上变得可机械验证。
v0.6.0 — Visual regression checks
What's new
Added
- Visual regression checks. Two new scripts capture structural + computed-style snapshots of every detected route — before any edit and after — then diff them and surface findings as a "Risks" section in
report.md.scripts/visual-snapshot.mjs <before|after>— Playwright-backed; captures up to 5000 elements per route with their tag/role/aria/text/computed-style. Falls back silently if Playwright isn't installed.scripts/visual-diff.mjs— compares snapshots and emits.ui-modernizer/risks.jsonwith severity-tagged findings (high / medium / info).
- Risk categories (high): missing interactive element, lost aria-label, WCAG AA contrast regression (< 4.5:1).
- Risk categories (medium): tag changed, font-size shrunk > 20%, contrast dropped notably.
- Risk categories (info): color/background shifted on headings, new elements added (usually intentional).
report.mdgains a## ⚠️ Riskssection, per-route, sorted high → medium → info.- New reference:
references/visual-regression.md.
Changed
SKILL.md— Steps 4/6/7 upgraded from PNG screenshots to JSON visual snapshots + diff. PNG screenshots remain as an optional side step.scripts/report.mjs— readsrisks.jsonand embeds findings; gracefully omits the section if absent.
Not changed
- Backup / rollback unchanged.
- The modernizer never auto-reverts based on risks — they're shown, the user decides.
- Existing screenshot scripts kept for users who want PNGs.
新增
- 视觉回归测试。两个新脚本在改之前和改之后各抓一次每个路由的结构 + 计算样式快照,再 diff 出风险条目,以 "Risks" 章节写进
report.md。scripts/visual-snapshot.mjs <before|after>—— 基于 Playwright;每个路由最多抓 5000 个元素的 tag/role/aria/text/computed-style。Playwright 未装时静默降级。scripts/visual-diff.mjs—— 比较两份快照,输出.ui-modernizer/risks.json,带 severity 标签(high / medium / info)。
- 风险分类(高严重):交互元素消失、aria-label 丢失、WCAG AA 对比度回归(< 4.5:1)。
- 风险分类(中严重):tag 变了、字号缩水 > 20%、对比度明显下降。
- 风险分类(info):标题色/背景色变化、新增元素(通常是有意的)。
report.md新增## ⚠️ Risks章节,按路由展开,高→中→info 排序。- 新增参考文档:
references/visual-regression.md。
改动
SKILL.md—— Step 4/6/7 从 PNG 截图升级为 JSON 视觉快照 + diff。PNG 截图作为可选子步骤保留。scripts/report.mjs—— 读取risks.json并嵌入风险条目;不存在则优雅省略该章节。
未改动
- 备份 / 回滚 —— 不变。
- modernizer 绝不基于风险自动回滚 —— 只展示,由用户判断。
- 既有截图脚本保留,需要 PNG 的用户可继续使用。
v0.5.0 — Component substitution (auto-install shadcn primitives)
What's new
Added
- Component substitution. Opt-in by adding "and use shadcn" / "with shadcn components" / "replace primitives" to your modernize request. The Skill then:
- Scans every UI file via the new
scripts/detect-substitutions.mjsfor hand-rolled native elements matching shadcn primitive shapes. - Shows a plan (which components to install, how many candidates, which files).
- Asks for confirmation.
- Initializes shadcn interactively if
components.jsonis missing. - Runs
npx shadcn@latest add <list>. - Rewrites the candidates — preserving every event handler, ref,
aria-*,data-*,disabled,required,id,name,placeholder,value,htmlFor. - Type-checks (if TS configured). On failure, rolls back substitution edits only while preserving the className modernization.
- Scans every UI file via the new
- 7 substitution rules in MVP: Button, Input, Textarea, Label, Badge, Separator, Avatar — with variant + size inference.
- Card pattern recognition — multi-child cards rewrite to
<Card>+<CardHeader>+<CardContent>. - New references:
references/component-substitution.md(workflow + safety) andreferences/shadcn-component-map.md(per-pattern rewriting guide).
Changed
SKILL.md— inserted Step 5b (COMPONENT SUBSTITUTION) gated on user opt-in language.- README × 2 — added "Want shadcn primitives? Just ask." subsection.
Not changed
- All previous detectors (stack / brand / profiles) — stable.
- Backup / rollback / report flow — unchanged. Substitution layer rolled back independently if typecheck fails.
- Vue / Svelte: substitution uses
shadcn-vue/shadcn-svelteports; skipped gracefully if not set up.
新增
- 组件级替换。需用户在对话里加上 "and use shadcn" / "with shadcn components" / "replace primitives" 才会触发。开启后 Skill 会:
- 跑新增脚本
scripts/detect-substitutions.mjs,扫描所有 UI 文件里手写的、形似 shadcn primitive 的原生元素。 - 展示计划:要装哪些组件、有多少候选、涉及哪些文件。
- 等用户确认。
- 如果项目里没有
components.json,先交互式跑npx shadcn@latest init。 - 跑
npx shadcn@latest add <列表>一次性安装。 - 重写候选元素 —— 完整保留所有 event handler、ref、
aria-*、data-*、disabled、required、id、name、placeholder、value、htmlFor。 - 跑 type-check(如果项目有 TS)。出错时只回滚替换层,保留 className 现代化成果。
- 跑新增脚本
- 7 条 MVP 替换规则:Button / Input / Textarea / Label / Badge / Separator / Avatar,自动推断 variant 和 size。
- Card 模式识别 —— 多子元素卡片重写为
<Card>+<CardHeader>+<CardContent>。 - 新增参考文档:
references/component-substitution.md(流程 + 安全)、references/shadcn-component-map.md(逐 pattern 重写指南)。
改动
SKILL.md插入 Step 5b(COMPONENT SUBSTITUTION),靠 opt-in 触发。- 中英 README 加入"Want shadcn primitives? Just ask."小节。
v0.4.0 — Pluggable style profiles + 3 new community brands
What's new
Added
- Pluggable style profiles. Style references are now formal, validated, pluggable extensions:
- Profile format spec at
references/style-references/_PROFILE_FORMAT.md(v1.0): required YAML frontmatter + required body sections (## Tokens,## Patterns,## Don'ts). - Bring-your-own profile: users can now say "modernize this UI using
./our-brand.md" and ui-modernizer will load any local Markdown file conforming to the spec. - Validation script
scripts/validate-profile.mjs— runs in CI on every PR. - Listing script
scripts/list-profiles.mjs— JSON or pretty table of every available profile.
- Profile format spec at
- 3 new built-in profiles:
notion— warm, calm, generous whitespace.raycast— dark-first, dense, command-bar energy.apple— premium pill buttons, soft shadows, glass.
- New reference:
references/profile-pluggability.md— full override hierarchy (brand color > profile > design-system default), resolution rules, contribution workflow.
Changed
- All 4 existing built-in profiles (
linear,vercel,stripe,shadcn) — added required frontmatter and re-shaped to include## Tokens,## Patterns,## Don'tssections.shadcnprofile
expanded with explicit pattern snippets. SKILL.mdSection 3 — formal "Style profiles" sub-section with resolution table and validation step.- README — "Pick a vibe" code block now lists all 7 profiles + bring-your-own syntax. "Contributing" rewritten around the new 4-step profile flow.
- CI workflow — added profile validation step.
新增
- 可插拔风格 profile。风格参考升级为正式的、可验证的、可插拔扩展:
- 格式规范 v1.0 位于
references/style-references/_PROFILE_FORMAT.md:必填 YAML frontmatter + 必填章节。 - 用户自带 profile:用户可以说 "modernize this UI using
./our-brand.md",ui-modernizer 会加载任意符合规范的本地 Markdown 文件。 - 校验脚本
scripts/validate-profile.mjs—— CI 每次 PR 运行。 - 列表脚本
scripts/list-profiles.mjs—— JSON 或可读表格列出所有 profile。
- 格式规范 v1.0 位于
- 3 个新增内置 profile:
notion、raycast、apple。 - 新增参考文档:
references/profile-pluggability.md—— 完整 override 优先级、解析规则、贡献流程。
改动
- 4 个老 profile(
linear、vercel、stripe、shadcn)补齐 frontmatter,改造为## Tokens/## Patterns/## Don'ts结构。 SKILL.md第 3 节"Style profiles"小节正式化,含解析表。- README "Pick a vibe" 列出全部 7 个 profile + 自带语法;"Contributing" 改为新流程。
- CI workflow 加入 profile 校验步骤。
v0.3.0 — Vue 3 + Svelte 5 support
What's new
Added
- Vue 3 support — Nuxt 3 and Vue + Vite both supported. Detector recognizes Nuxt by the
nuxtdependency and walkspages/,components/,layouts/,app.vue. Globals CSS is located at the
Nuxt-conventionalassets/css/main.css(or fall-throughs). - Svelte 5 support — SvelteKit and Svelte + Vite both supported. Detector recognizes SvelteKit by
@sveltejs/kitand walkssrc/routes/,src/lib/,src/components/. Globals CSS is located at
src/app.css/src/app.postcss. - Runtime + framework abstraction.
detect-stack.mjsnow reports:runtime:'react' | 'vue' | 'svelte'framework:'next' | 'nuxt' | 'sveltekit' | 'vite'classAttr:'className'(React) or'class'(Vue/Svelte)fileExtensions:['.tsx', '.jsx']/['.vue']/['.svelte']
- New reference:
references/frameworks/vue.md—class=vs:class=array/object syntax,<script setup>boundaries, Nuxt conventions, auto-imports. - New reference:
references/frameworks/svelte.md—class=vsclass:foo={bool}directives, SvelteKit+layout.svelte/+page.svelteconventions, scoped<style>blocks.
Changed
SKILL.mdStep 1 now announces detected runtime, framework, Tailwind flavor, and accent in one line.SKILL.mdStep 2 PLAN usesuiFiles[]from the detector (right roots + extensions per runtime).SKILL.mdStep 5 APPLY references the framework guide and re-states framework-specific skip lists.references/tailwind-modernization.md— added a framework-agnostic note clarifying that all examples are JSX but class strings work identically inclass=for Vue/Svelte.scripts/detect-brand.mjs— brand-color CSS search now includes Nuxt'sassets/css/main.cssand SvelteKit'ssrc/app.css.package.json— addedvue,nuxt,svelte,sveltekitto keywords.
新增
- Vue 3 支持 —— Nuxt 3 和 Vue + Vite 都支持。检测器通过
nuxt依赖识别 Nuxt,扫描pages/、components/、layouts/、app.vue。全局 CSS 定位在assets/css/main.css。 - Svelte 5 支持 —— SvelteKit 和 Svelte + Vite 都支持。检测器通过
@sveltejs/kit识别 SvelteKit,扫描src/routes/、src/lib/、src/components/。全局 CSS 定位在src/app.css。 - runtime + framework 抽象。
detect-stack.mjs输出runtime(react|vue|svelte)、framework(next|nuxt|sveltekit|vite)、classAttr(className/class)、fileExtensions。 - 新增参考文档:
references/frameworks/vue.md、references/frameworks/svelte.md。
改动
SKILL.mdStep 1 一行播报 runtime + framework + Tailwind flavor + accent。SKILL.mdStep 2/5 按 runtime 使用对应的根目录和扩展名。references/tailwind-modernization.md加入框架无关说明。package.jsonkeywords 加入vue、nuxt、svelte、sveltekit。
v0.2.0 — Tailwind v4 + Brand Color Detection
What's new
Added
-
Tailwind v4 support.
detect-stack.mjsnow reportstailwind.flavor(v3 | v4) by parsing both thetailwindcssdependency version and the@import "tailwindcss"/@themedirectives in
globals.css. The Skill workflow branches on this:- v3 projects continue to use
templates/globals.css.tpl+tailwind.config.tpl. - v4 projects use the new
templates/globals.v4.css.tpland skip the JS config entirely (CSS-first).
- v3 projects continue to use
-
Custom brand color detection. New
scripts/detect-brand.mjslooks for an existingbrand/primary/accentcolor across:tailwind.config.{js,ts,mjs}— object form and string form.globals.css— plain CSS variables (--brand,--primary-600).globals.cssv4@themeblocks (--color-brand-600).
Output classPrefix (one of
brand/primary/accent/indigofallback) is substituted everywhere the Skill would otherwise hard-code indigo. -
New reference:
references/tailwind-v4.md— v3 → v4 class deltas and the v4 idioms. -
New reference:
references/brand-color-strategy.md— exact rules for when to substitute, when to preserve, edge cases. -
New template:
templates/globals.v4.css.tpl— v4-flavor globals.
Changed
SKILL.mdstep 1 now runs two detection scripts in sequence and announces both results.SKILL.mdstep 5 branches ontailwind.flavorand always readsbrand-color-strategy.mdbefore emitting anyindigoclass.references/tailwind-modernization.md— added a top-of-file note declaringindigoas a placeholder for the detectedclassPrefix, and a pointer to the v4 reference.- README roadmap and "supported stacks" table updated to reflect v4 support.
新增
- Tailwind v4 支持。
detect-stack.mjs通过解析tailwindcss依赖版本号 +globals.css里的@import "tailwindcss"/@theme指令,输出tailwind.flavor(v3 | v4)。Skill 工作流据此分支:- v3 项目继续使用
templates/globals.css.tpl+tailwind.config.tpl。 - v4 项目使用新增的
templates/globals.v4.css.tpl,完全跳过 JS 配置(CSS-first)。
- v3 项目继续使用
- 自动检测品牌色。新增脚本
scripts/detect-brand.mjs,跨tailwind.config、普通 CSS 变量、v4@theme块查找已有的brand/primary/accent颜色。检测到的classPrefix会替换 Skill
默认硬编码的 indigo。 - 新增参考文档:
references/tailwind-v4.md、references/brand-color-strategy.md。 - 新增模板:
templates/globals.v4.css.tpl。
改动
SKILL.mdStep 1 依次跑两个检测脚本;Step 5 按tailwind.flavor分支。- README roadmap 和"支持栈"表更新。
v0.1.0 — Initial public release
What's new
Added
- Initial public release.
- Claude Code Skill (
SKILL.md) with 8-step workflow (detect → plan → backup → apply → report → done). - Knowledge base:
design-system-2026.md,tailwind-modernization.md,component-patterns.md,animation-motion.md,dark-mode.md. - Style profiles:
linear,vercel,stripe,shadcn. - Scripts:
detect-stack,backup(with--restore-latest),report. Optionalscreenshot+compose-before-after(Playwright). - Templates:
globals.css,tailwind.config,design-tokens.css. npx ui-modernizerinstaller.- Bilingual README (English + 简体中文).
- MIT license.
新增
- 首次公开发布。
- Claude Code Skill(
SKILL.md),8 步工作流(检测 → 计划 → 备份 → 应用 → 报告 → 完成)。 - 知识库:
design-system-2026.md、tailwind-modernization.md、component-patterns.md、animation-motion.md、dark-mode.md。 - 风格 profile:
linear、vercel、stripe、shadcn。 - 脚本:
detect-stack、backup(带--restore-latest)、report;可选screenshot+compose-before-after(Playwright)。 - 模板:
globals.css、tailwind.config、design-tokens.css。 npx ui-modernizer安装器。- 双语 README(English + 简体中文)。
- MIT 许可证。