首页 › 龙虾技能列表 › Legacy To Modern Migration — 技能工具

Legacy To Modern Migration — 技能工具

v1.0.0

指导将 JS + jQuery + HTML 传统前端项目迁移至 React + TypeScript 或 Vue 3 + TypeScript 的迁移策略、概念映射、分阶段步骤和检查清单。含图片、样式、功能等价等重构实施要求。当用户提到技术栈升级、jQuery 迁移、MPA 转 SPA、项目重构、遗留项目迁移为...

0· 90·0 当前·0 累计
by @bovinphang (Bovin Phang)·MIT-0
下载技能包
License
MIT-0
最后更新
2026/3/26
安全扫描
VirusTotal
无害
查看报告
OpenClaw
安全
high confidence
The skill's instructions, requirements, and scope are internally consistent for guiding a jQuery/MPA → React/Vue migration; it is an instruction-only skill that doesn't request credentials or install code.
评估建议
This skill is coherent with its stated purpose and does not request secrets or install code. Before using it: 1) Decide how the agent will obtain the project's inventory — will you paste files, grant repo access, or let the agent ask questions? 2) Expect the agent to read project files or rely on your answers to produce the 'migration analysis report' saved to reports/; if you don't want the agent to access your repo, do not grant repository access and provide summaries instead. 3) Review its ge...
详细分析 ▾
✓ 用途与能力
The name/description (migrating JS+jQuery MPAs to React/Vue+TypeScript) matches the SKILL.md content: mapping tables, phased plans, checks, and a requirement to produce a migration report. There are no unrelated credentials, binaries, or installs requested.
ℹ 指令范围
The SKILL.md is detailed and prescriptive (strategy, mapping, checklists, and strong style/icon rules). It requires the agent to produce a migration analysis/report saved under reports/ in the project root—this implies the agent will need to access project sources or rely on user-provided information. The instructions do not explicitly tell the agent how to collect inventory (ask user vs. inspect repo), so clarify how the agent will obtain project data before running automated changes.
✓ 安装机制
No install spec and no code files — instruction-only. This is the lowest-risk install profile; nothing is downloaded or written by an installer step beyond the agent's normal behavior.
✓ 凭证需求
No environment variables, credentials, or config paths are requested. The skill's demands (analysis and report generation) don't require secrets. Note: actual migration work will typically require repository access and possibly CI/CD credentials, but those are not requested by this skill.
✓ 持久化与权限
always is false and autonomous invocation is allowed by default (normal). The skill does instruct saving a markdown report under reports/ in the project root, which is a reasonable artifact for this purpose and does not indicate elevated or persistent privileges beyond writing its own output.
安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.02026/3/26

Initial release: Migration strategies and checklists for upgrading legacy JS + jQuery + HTML projects to React + TypeScript or Vue 3 + TypeScript. - Provides phased migration steps, concept mapping tables, and detailed analysis workflow. - Details implementation requirements for images, icons, and styles to ensure functional and visual equivalence. - Includes migration checklists to guarantee code quality and feature completeness. - Enforces constraints: no inline SVG, use original icon/resources, no copying legacy CSS, and phased rollout preferred. - Specifies report output format and integration points with related front-end standards/skills.

● 无害

安装命令 点击复制

官方npx clawhub@latest install legacy-to-modern-migration
镜像加速npx clawhub@latest install legacy-to-modern-migration --registry https://cn.clawhub-mirror.com

技能文档

适用于将 JavaScript + jQuery + HTML/CSS 多页面应用（MPA）或服务端模板渲染项目，迁移至 React + TypeScript 或 Vue 3 + TypeScript 单页面应用（SPA）的场景。

适用场景

  • 用户明确要求将 jQuery/MPA 项目重构为 React 或 Vue
  • 讨论技术栈升级、遗留系统现代化
  • 规划或执行从传统前端到 React/Vue 的迁移任务

迁移策略选择

策略适用情况优点风险
渐进式（Strangler Fig）大型项目、需持续交付、团队熟悉度不足风险可控、可分批上线、可回滚新旧并存期长、需维护两套代码
一次性重写中小型项目、业务稳定、有充足时间窗口目标架构清晰、无历史包袱周期长、上线压力大、回滚困难
推荐：优先考虑渐进式，除非项目规模小且业务简单。

概念映射

jQuery → React

遗留模式React 对应
$(selector).html(content)声明式 JSX + state 驱动渲染
$(document).on('click', '.btn', handler)onClick + 事件委托由 React 处理
$.ajax() / $.get()fetch / axios + React Query 或 SWR
全局变量 / 命名空间存储状态useState / useContext / Zustand
$(el).show() / $(el).hide()条件渲染 {visible && }
手动 DOM 操作 append / remove数据驱动，通过 setState 触发重渲染
模板字符串拼接 HTMLJSX 组件 + props
多页面 + 服务端路由React Router 客户端路由

jQuery → Vue 3

遗留模式Vue 3 对应
$(selector).html(content)模板 + ref / reactive 驱动渲染
$(document).on('click', '.btn', handler)@click + 事件修饰符
$.ajax() / $.get()fetch / axios + VueUse useFetch 或 Vue Query
全局变量 / 命名空间存储状态ref / reactive / Pinia
$(el).show() / $(el).hide()v-show / v-if
手动 DOM 操作数据驱动，通过响应式更新视图
模板字符串拼接 HTML单文件组件