Skip to content

v0.5.0 — Component substitution (auto-install shadcn primitives)

Choose a tag to compare

View all tags
@Rosalina7515 Rosalina7515 released this 17 May 13:11
· 6 commits to main since this release
v0.5.0
7eb8e20

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:
    1. Scans every UI file via the new scripts/detect-substitutions.mjs for hand-rolled native elements matching shadcn primitive shapes.
    2. Shows a plan (which components to install, how many candidates, which files).
    3. Asks for confirmation.
    4. Initializes shadcn interactively if components.json is missing.
    5. Runs npx shadcn@latest add <list>.
    6. Rewrites the candidates — preserving every event handler, ref, aria-*, data-*, disabled, required, id, name, placeholder, value, htmlFor.
    7. Type-checks (if TS configured). On failure, rolls back substitution edits only while preserving the className modernization.
  • 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) and references/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-svelte ports; skipped gracefully if not set up.

新增

  • 组件级替换。需用户在对话里加上 "and use shadcn" / "with shadcn components" / "replace primitives" 才会触发。开启后 Skill 会:
    1. 跑新增脚本 scripts/detect-substitutions.mjs,扫描所有 UI 文件里手写的、形似 shadcn primitive 的原生元素。
    2. 展示计划:要装哪些组件、有多少候选、涉及哪些文件。
    3. 等用户确认。
    4. 如果项目里没有 components.json,先交互式跑 npx shadcn@latest init。
    5. 跑 npx shadcn@latest add <列表> 一次性安装。
    6. 重写候选元素 —— 完整保留所有 event handler、ref、aria-*、data-*、disabled、required、id、name、placeholder、value、htmlFor。
    7. 跑 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."小节。
Assets 2
Loading