Xpersona
L

Legacy To Modern Migration

CLAWHUB · Unverified

Use 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

62
Rank
84
Safety
974
Downloads
Oct 11, 2026
Updated

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 974 downloads reported by the source. Last updated 10/11/2026.

Avoid when

  • Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Install and run

Setup complexity: low.

clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-legacy-to-modern-migration
  1. Install using `clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-legacy-to-modern-migration` in an isolated environment before connecting it to live workloads.
  2. No published capability contract is available yet, so validate auth and request/response behavior manually.
  3. Review the upstream CLAWHUB listing at https://clawhub.ai/bovinphang/fec-legacy-to-modern-migration before using production credentials.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

58,177 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: fec-legacy-to-modern-migration
description: Use 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; Chinese triggers include legacy projects, technology stack upgrades, jQuery migration.
---

# Migration from traditional front-end to modern framework

Suitable for scenarios where you are gradually migrating JavaScript + jQuery + HTML/CSS multi-page applications (MPA), server-side template rendering projects, or legacy framework code to React, Vue, Next.js, Nuxt, TypeScript, or retaining MPA form but modernizing modules, builds, types, and tests.

## Purpose

Guide the gradual migration of traditional front-end projects to the target modern stack, provide migration strategies, concept mapping, phased steps and implementation constraints to ensure functional equivalence and controllable risks.

## Procedure

1. First identify the target stack, migration boundaries and whether to retain the MPA/server template form.
2. Load [references/migration-strategy-and-mapping.md](references/migration-strategy-and-mapping.md), select a progressive or one-time rewrite strategy, and clarify the mapping of legacy patterns to the target stack.
3. Load [references/migration-execution-checklist.md](references/migration-execution-checklist.md) to complete inventory inventory, dependency analysis, prioritization and phased migration plan.
4. When writing a migration analysis or migration plan report, load [references/migration-report-template.md](references/migration-report-template.md).
5. Advance in the order of preparation, base layer, module/page migration, and closing, migrating one verifiable unit at a time.
6. Each migration unit verifies functional equivalence, visual consistency, type safety, accessibility, i18n, resource and style boundaries.

## Constraints

- Before migration, a migration analysis report must be output to clarify strategies, priorities and risks.
- Do not change the architecture, UI, and interfaces at the same time in one migration.
- Prioritize functional equivalence before considering optimization and modernization.
- Keep the old system operational during the migration process to avoid a big bang rollout.
- When there is no ready replacement for the jQuery plug-in, you can temporarily embed it using iframe or micro-front-end and wait for subsequent replacement.
- The target stack first identifies React/Vue/Next/Nuxt, modern MPA or partial modernization targets, and does not force the change to SPA by default.
- Images use original project resources; the icon system prefers to use the original project or target project specifications; inline SVG exceptions must have accessibility, componentization or maintenance reasons.
- The style refers to the original project effect but does not copy CSS

README.md

# Legacy system migration

Plan an intentional migration from jQuery, templates, or older frontend stacks to modern modules.

## Skill

- ID: `fec-legacy-to-modern-migration`
- Category: `legacy-migration`
- Version: `2.9.0`
- Source: `skills/fec-legacy-to-modern-migration/SKILL.md`

## Description

Use 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; Chinese triggers include legacy projects, technology stack upgrades, jQuery migration.

## Usage

Install or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.

## Packaged Files

- [references/migration-execution-checklist.md](references/migration-execution-checklist.md)
- [references/migration-report-template.md](references/migration-report-template.md)
- [references/migration-strategy-and-mapping.md](references/migration-strategy-and-mapping.md)

## Optional Related Packages

- `@bovinphang/fec-legacy-web-standard`
- `@bovinphang/fec-react-project-standard`
- `@bovinphang/fec-vue3-project-standard`

## License

MIT

_meta.json

{
  "ownerId": "kn7b0nh7hvj1pffeqc8y0dqwwh83m726",
  "slug": "fec-legacy-to-modern-migration",
  "version": "2.9.0",
  "publishedAt": 1790435033463
}

references/migration-execution-checklist.md

# Migration execution and checklist

## Pre-migration analysis

Before starting the migration, the following analysis must be completed and a **migration analysis report** must be output:

1. **Inventory Count**
   - Number of pages and number of functional modules
   - Dependent jQuery plugins and alternatives (such as DataTables → TanStack Table)
   - Existing API calling methods and whether there is unified encapsulation
   - Are there any server-side templates (JSP/Thymeleaf/EJS, etc.) that need to be retained, partially replaced, or changed to pure front-end rendering?
   - Is the target stack React/Vue/Next/Nuxt, modern MPA, or just partial TypeScript/build/test modernization?

2. **Dependencies**
   - JS/CSS modules shared between pages
- Business logic reused across pages
   - Interface contract with the backend (whether it needs to be adjusted)

3. **Migration Priority**
   - Sort by business value, complexity, coupling degree
   - Prioritize migrating independent modules and low-coupling pages
   - Identify reusable utility functions, constants, and type definitions

## Phased migration process

### Phase 0: Preparation

- Build or identify target project skeleton: React/Vue/Next/Nuxt, modern MPA, or progressive TypeScript/build entry within existing projects
- Configure ESLint, Prettier, and test framework
- Establish `services/request.ts` unified request layer, compatible with existing API
- Gradually migrate `utils` and `constants` in legacy projects and add types

### Phase 1: Base Layer

- Migrate and type API calls (`$.ajax` → `axios`/`fetch`)
- Migration tool functions (date, formatting, verification, etc.)
- Migrate constants, enumerations, and type definitions
- Establish target navigation/page entry skeleton; unmigrated pages can continue to use old routing, redirection, iframe or micro-front-end embedding

### Phase 2: Migration by module/page

- Migrate one complete feature or page at a time
- From simple to complex: static page → list page → form page → complex interactive page
- Extract reusable components during migration, following the directory structure of the target React or Vue project
- Supplementary unit testing and E2E critical path for each completed module

### Phase 3: Closing

- Remove or freeze old code entries according to the migration strategy; if MPA is retained, the old entries will be converged and the modernization boundary will be completed
- Configure 404, error boundaries, and global error handling
- Performance optimization (lazy loading, code splitting, caching strategy)
- Document updates and deployment process adjustments

## Refactoring implementation requirements

The following implementation constraints need to be followed when migrating to ensure consistent vision and interaction, and the code is simpler and easier to maintain.

### Pictures and Icons

- Directly use the image resource path of the original project without rehosting or replacing it.
- SVG images (`<img src="*.svg" />` or CSS

references/migration-report-template.md

# Migration analysis report template

```markdown
# Migration analysis report

> Generation time: YYYY-MM-DD HH:mm
> Review tool: frontend-craft

## Strategy selection
- Progressive/one-time rewrite:
- Reason:

## Inventory inventory
- Number of pages:
- Function modules:
- jQuery plugin:
- Server template:
- API calling method:

## Dependencies
- Share JS/CSS:
- Cross-page logic:
- Backend interface contract:

## Migration priority
- First batch:
- Second batch:
- Suspension:

## Phased steps
- Stage 0:
- Stage 1:
- Stage 2:
- Stage 3:

## Risk and rollback
- Risk:
- Rollback plan:
```

After migration analysis or planning is completed, save the report to `reports/migration-plan-YYYY-MM-DD-HHmmss.md` and inform the user of the report path.

Sponsored

Ads related to Legacy To Modern Migration and adjacent AI workflows.