fec-legacy-to-modern-migrationUse when planning or implementing an intentional migration from JavaScript, jQuery, HTML/CSS, server-rendered templates, MPA legacy frontend code, or older framework code toward a modern frontend stack while preserving behavior. Do not use for routine legacy bug fixes that stay in the old stack; Chi
Install via ClawdBot CLI:
clawdbot install bovinphang/fec-legacy-to-modern-migrationGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/bovinphang/frontend-craftAudited Jun 4, 2026 · audit v1.0
Generated Sep 29, 2026
团队维护一套多年积累的 jQuery + HTML/CSS 多页面站点，业务仍在使用但代码难以维护。使用该技能做存量盘点、依赖分析并选择渐进式策略，按页面逐个迁移到 Vue 组件，并在每个单元用真实浏览器对比验证业务功能与视觉一致性。
Django/Rails 的服务端模板项目希望引入现代前端交互，但短期内无法完全重写后端。技能帮助保留服务端渲染思路，将页面逐步迁移为 Next.js，同时保持旧系统可运行、避免大爆炸式上线，并建立行为清单做关键路径验证。
使用早期 AngularJS 或 Knockout 的项目需要升级到 React + TypeScript，同时要保证业务逻辑等价。团队借助该技能输出迁移分析报告、选择一次性重写或渐进策略、处理 jQuery 插件替代问题，并对纯逻辑部分使用 type-check 和单元测试验证。
大型企业后台管理系统保留 MPA 形态，但希望现代化模块化、构建、类型和测试体系。技能指导识别 React/Vue 目标栈边界，渐进引入构建工具与 TypeScript，不强制改成 SPA，并对表单、弹窗、导航等关键流程进行 Playwright 对比验证。
电商前台基于 jQuery 和模板渲染，迁移到 Nuxt 时对视觉和交互一致性要求极高。技能帮助建立重构前后行为清单，对视觉敏感页面补充截图对比和人工验收，并处理动态内容、动画、字体差异的稳定化或屏蔽说明。
面向拥有遗留前端系统的企业，提供迁移策略评估、存量盘点、依赖分析与分阶段迁移计划报告。顾问团队输出迁移分析报告并指导技术选型，确保功能等价和风险可控。
接手中小型企业的 jQuery/MPA 项目整体或分阶段迁移到 React、Vue、Next.js 等现代栈，负责从准备、基础层到模块迁移和收尾的完整实施。以功能等价、视觉一致和关键路径测试作为交付标准。
为企业前端团队提供传统项目现代化迁移的方法论培训，覆盖策略选择、概念映射、Playwright 验证、i18n 与类型安全等内容。帮助团队建立内部迁移规范和检查清单。
💬 Integration Tip
先完成存量盘点和迁移分析报告再动代码，并确保旧系统在迁移期间始终可运行；对涉及页面与关键流程的迁移，务必用 Playwright 或同等真实浏览器方式做重构前后对比验证。
Scored Sep 29, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.