legacy-to-modern-migration
指导将 JS + jQuery + HTML 传统前端项目迁移至 React + TypeScript 或 Vue 3 + TypeScript 的迁移策略、概念映射、分阶段步骤和检查清单。含图片、样式、功能等价等重构实施要求。当用户提到技术栈升级、jQuery 迁移、MPA 转 SPA、项目重构、遗留项目迁移为 React/Vue 时自动激活。
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/bovinphang/legacy-to-modern-migrationWhat This Skill Does
The legacy-to-modern-migration skill is a specialized architectural assistant designed to guide developers through the high-complexity task of refactoring monolithic legacy projects into modern SPA frameworks. It provides a structured methodology for converting JavaScript/jQuery/HTML applications into robust React/TypeScript or Vue 3/TypeScript architectures. The skill automates the generation of migration roadmaps, translates imperative jQuery DOM-manipulation patterns into declarative state-driven components, and suggests specific libraries to replace deprecated jQuery plugins.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/bovinphang/legacy-to-modern-migration
Use Cases
- Incremental Refactoring: Moving large-scale corporate web applications from legacy jQuery/MPA setups to modern frontends using the Strangler Fig pattern to ensure continuous delivery.
- Technical Debt Assessment: Analyzing existing legacy codebases to identify dependencies, module coupling, and high-priority refactoring targets before beginning a migration project.
- Framework Transition: Mapping outdated JavaScript logic to modern concepts like React Hooks, Pinia stores, and Vue 3 Composition API to maintain business logic parity while upgrading the underlying tech stack.
- Architecture Modernization: Transforming manual DOM-based event handling into declarative, data-driven architecture that is easier to test, maintain, and scale.
Example Prompts
- "I have a massive jQuery project with many AJAX calls. Can you help me map these to a React Query approach and create a migration roadmap?"
- "We need to convert our MPA JSP pages to a Vue 3 SPA. What is the best strategy to handle state migration and route management during the transition?"
- "Our team is struggling with legacy spaghetti code. Can you provide a checklist for extracting shared utility functions and constants before we start our React migration?"
Tips & Limitations
- Tip: Always prioritize the 'Migration Analysis Report' step mentioned in the skill documentation; having a clear inventory of dependencies prevents hidden bugs during the transition phase.
- Tip: Use the suggested concept mapping tables to train team members on the mental shift from imperative DOM manipulation to declarative rendering.
- Limitation: The skill provides architectural guidance and code strategy, but developers must still manually implement the actual business logic migration. It does not automate the physical rewriting of proprietary legacy scripts.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-bovinphang-legacy-to-modern-migration": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
frontend-code-review
从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码，并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。
legacy-web-standard
针对 JavaScript + jQuery + HTML/CSS 传统前端项目的开发与维护规范。当用户在非框架项目中工作，涉及 jQuery、原生 JS、传统多页面应用（MPA）、模板引擎渲染页面、或维护遗留代码时自动激活。
accessibility-check
审查或改进前端 UI 的语义结构、键盘支持、焦点管理、标签以及常见的 WCAG 相关问题，并将报告保存为 Markdown 文件。当用户提到无障碍、accessibility、a11y、WCAG，或在实现交互组件时自动激活。
security-review
前端代码安全审查，检测 XSS、CSRF、敏感数据泄露、不安全的用户输入处理和依赖风险，并将报告保存为 Markdown 文件。当用户要求安全检查、安全审查，或代码涉及用户输入、认证、支付、文件上传等敏感操作时自动激活。
nextjs-project-standard
Next.js 14+ 项目规范，涵盖 App Router、SSR/SSG、流式渲染、路由与布局、数据获取、中间件、元数据与 SEO。当用户在 Next.js 项目中创建、修改页面或模块时自动激活。