{"id":"3a8494ce-25e3-4307-b12c-0bca2f01fcd7","entityType":"agent","slug":"clawhub-bovinphang-fec-legacy-to-modern-migration","name":"Legacy To Modern Migration","canonicalUrl":"https://www.xpersona.co/agent/clawhub-bovinphang-fec-legacy-to-modern-migration","canonicalPath":"/agent/clawhub-bovinphang-fec-legacy-to-modern-migration","generatedAt":"2026-10-14T06:57:06.745Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:40:35.588Z","emptyReason":null},"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; Chi","descriptionLabel":"Source description","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 974 downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-legacy-to-modern-migration","sourceUrl":"https://clawhub.ai/bovinphang/fec-legacy-to-modern-migration","homepage":"https://clawhub.ai/bovinphang/skills/fec-legacy-to-modern-migration","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/bovinphang/fec-legacy-to-modern-migration","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/bovinphang/skills/fec-legacy-to-modern-migration","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Legacy To Modern Migration technical dossier on Xpersona with agent coverage, OPENCLEW support, and live trust metadata."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:40:35.588Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:40:35.588Z","emptyReason":null},"stars":null,"forks":null,"downloads":974,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"2.9.0","tractionLabel":"974 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:40:35.522Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T23:40:35.588Z","lastCrawledAt":"2026-10-11T23:40:35.522Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T23:40:35.522Z","lastVerifiedAt":null,"highlights":[{"version":"2.9.0","createdAt":"2026-09-26T15:03:53.463Z","changelog":"- Updated skill documentation to English for broader accessibility. - Added LICENSE file to clarify usage and distribution terms. - Removed skill-card.md for streamlined project files. - No changes to migration strategy, procedures, or constraints—content remains equivalent in English.","fileCount":10,"zipByteSize":12613},{"version":"2.7.0","createdAt":"2026-06-11T02:12:05.535Z","changelog":"- Expanded scope to explicitly support migration toward any modern frontend stack, including React, Vue, Next.js, Nuxt, TypeScript, or modernized MPA. - Added new structured references for migration strategy, mapping, and execution checklist, shifting detailed guidance out of SKILL.md and into dedicated files. - Updated constraints to clarify requirements for code, visual, and functional verification; now mandates automated or manual regression checks for key user flows. - Refined guidance around icons, images, and inline styles, allowing well-justified exceptions and defining validation procedures. - Removed inlined concept mapping tables and phased migration steps from SKILL.md—these are now loaded from external reference files for better maintainability. - skill-card.md removed; migration documentation and references now provided through updated materials.","fileCount":9,"zipByteSize":12177},{"version":"2.5.0","createdAt":"2026-06-03T12:24:30.694Z","changelog":"- Skill renamed to `fec-legacy-to-modern-migration` for improved clarity and consistency. - Refined and clarified usage description and triggers; now explicitly excludes routine legacy bug fixes unless involving a stack migration. - Added internationalization (i18n) requirements and checklist items for new code and migration scenarios. - Reorganized sample report location: expects reference loading from `references/migration-report-template.md`. - Added files: `README.md`, `metadata.json`, `package.json`, and migration report template; removed unused `skill-card.md`. - General wording improvements, consistent table formatting, and enforced stricter output and implementation guidance.","fileCount":7,"zipByteSize":9276}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-legacy-to-modern-migration","setupComplexity":"low","setupSteps":["Install using `clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-legacy-to-modern-migration` in an isolated environment before connecting it to live workloads.","No published capability contract is available yet, so validate auth and request/response behavior manually.","Review the upstream CLAWHUB listing at https://clawhub.ai/bovinphang/fec-legacy-to-modern-migration before using production credentials."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-14T06:57:06.744Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-legacy-to-modern-migration/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:40:35.588Z","emptyReason":null},"readme":"Skill: Legacy To Modern Migration\n\nOwner: bovinphang\n\nSummary: 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\n\nTags: latest:2.9.0\n\nVersion history:\n\nv2.9.0 | 2026-09-26T15:03:53.463Z | user\n\n- Updated skill documentation to English for broader accessibility.\n- Added LICENSE file to clarify usage and distribution terms.\n- Removed skill-card.md for streamlined project files.\n- No changes to migration strategy, procedures, or constraints—content remains equivalent in English.\n\nv2.7.0 | 2026-06-11T02:12:05.535Z | user\n\n- Expanded scope to explicitly support migration toward any modern frontend stack, including React, Vue, Next.js, Nuxt, TypeScript, or modernized MPA.\n- Added new structured references for migration strategy, mapping, and execution checklist, shifting detailed guidance out of SKILL.md and into dedicated files.\n- Updated constraints to clarify requirements for code, visual, and functional verification; now mandates automated or manual regression checks for key user flows.\n- Refined guidance around icons, images, and inline styles, allowing well-justified exceptions and defining validation procedures.\n- Removed inlined concept mapping tables and phased migration steps from SKILL.md—these are now loaded from external reference files for better maintainability.\n- skill-card.md removed; migration documentation and references now provided through updated materials.\n\nv2.5.0 | 2026-06-03T12:24:30.694Z | user\n\n- Skill renamed to `fec-legacy-to-modern-migration` for improved clarity and consistency.\n- Refined and clarified usage description and triggers; now explicitly excludes routine legacy bug fixes unless involving a stack migration.\n- Added internationalization (i18n) requirements and checklist items for new code and migration scenarios.\n- Reorganized sample report location: expects reference loading from `references/migration-report-template.md`.\n- Added files: `README.md`, `metadata.json`, `package.json`, and migration report template; removed unused `skill-card.md`.\n- General wording improvements, consistent table formatting, and enforced stricter output and implementation guidance.\n\nArchive index:\n\nArchive v2.9.0: 10 files, 12613 bytes\n\nFiles: LICENSE (1089b), metadata.json (1993b), package.json (1191b), README.md (1325b), references/migration-execution-checklist.md (8631b), references/migration-report-template.md (751b), references/migration-strategy-and-mapping.md (3428b), skill-card.md (2014b), SKILL.md (5036b), _meta.json (149b)\n\nFile v2.9.0:SKILL.md\n\n---\nname: fec-legacy-to-modern-migration\ndescription: 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.\n---\n\n# Migration from traditional front-end to modern framework\n\nSuitable 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.\n\n## Purpose\n\nGuide 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.\n\n## Procedure\n\n1. First identify the target stack, migration boundaries and whether to retain the MPA/server template form.\n2. 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.\n3. Load [references/migration-execution-checklist.md](references/migration-execution-checklist.md) to complete inventory inventory, dependency analysis, prioritization and phased migration plan.\n4. When writing a migration analysis or migration plan report, load [references/migration-report-template.md](references/migration-report-template.md).\n5. Advance in the order of preparation, base layer, module/page migration, and closing, migrating one verifiable unit at a time.\n6. Each migration unit verifies functional equivalence, visual consistency, type safety, accessibility, i18n, resource and style boundaries.\n\n## Constraints\n\n- Before migration, a migration analysis report must be output to clarify strategies, priorities and risks.\n- Do not change the architecture, UI, and interfaces at the same time in one migration.\n- Prioritize functional equivalence before considering optimization and modernization.\n- Keep the old system operational during the migration process to avoid a big bang rollout.\n- 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.\n- 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.\n- 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.\n- The style refers to the original project effect but does not copy CSS. The target project style system is preferred; inline style exceptions must be local and interpretable.\n- The goal is to have consistent visuals and interactions, make the code simpler and easier to maintain, and business functions must not be missing.\n- For migrations involving pages, components, routing, forms, pop-ups, navigation or key user processes, a list of behaviors before and after refactoring must be established, and the critical paths must be compared and verified using Playwright or an equivalent real browser verification method.\n- For visually sensitive pages, screenshot comparison or manual screenshot acceptance should be supplemented; dynamic content, animation, fonts and environmental differences need to be clearly blocked, stabilized or explained.\n- For pure logic, type, build or UI-less migrations, Playwright is not forced and a validation layer closer to risk should be chosen: type-check, unit test, component test, build or lint.\n- The verification goal is not to be completely consistent at the pixel level, but to confirm that there are no missing business functions, key interactions are equivalent, there are no unexpected deviations in the main visual layout, and the code is clearer and maintainable than the old implementation.\n\n## Expected Output\n\n- The migration analysis report is saved as `reports/migration-plan-YYYY-MM-DD-HHmmss.md`, including strategy selection, inventory inventory, dependencies, phased steps, risks and rollback plans.\n- The migrated business functions are completely equivalent to those of the original project, with no missing functions.\n- The visuals and interactions are consistent with the original project, and there is no perceived difference for users.\n- Complete type definition, no `any` abuse, unified API calls and type safety.\n- Images use original project resources, and styles enter the target project style system. Exceptions for icons and inline styles have clear reasons.\n- The new code copy has been i18n, and the critical path is covered by tests.\n\nFile v2.9.0:README.md\n\n# Legacy system migration\n\nPlan an intentional migration from jQuery, templates, or older frontend stacks to modern modules.\n\n## Skill\n\n- ID: `fec-legacy-to-modern-migration`\n- Category: `legacy-migration`\n- Version: `2.9.0`\n- Source: `skills/fec-legacy-to-modern-migration/SKILL.md`\n\n## Description\n\nUse 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.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [references/migration-execution-checklist.md](references/migration-execution-checklist.md)\n- [references/migration-report-template.md](references/migration-report-template.md)\n- [references/migration-strategy-and-mapping.md](references/migration-strategy-and-mapping.md)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-legacy-web-standard`\n- `@bovinphang/fec-react-project-standard`\n- `@bovinphang/fec-vue3-project-standard`\n\n## License\n\nMIT\n\nFile v2.9.0:_meta.json\n\n{\n \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n \"slug\": \"fec-legacy-to-modern-migration\",\n \"version\": \"2.9.0\",\n \"publishedAt\": 1790435033463\n}\n\nFile v2.9.0:references/migration-execution-checklist.md\n\n# Migration execution and checklist\n\n## Pre-migration analysis\n\nBefore starting the migration, the following analysis must be completed and a **migration analysis report** must be output:\n\n1. **Inventory Count**\n - Number of pages and number of functional modules\n - Dependent jQuery plugins and alternatives (such as DataTables → TanStack Table)\n - Existing API calling methods and whether there is unified encapsulation\n - Are there any server-side templates (JSP/Thymeleaf/EJS, etc.) that need to be retained, partially replaced, or changed to pure front-end rendering?\n - Is the target stack React/Vue/Next/Nuxt, modern MPA, or just partial TypeScript/build/test modernization?\n\n2. **Dependencies**\n - JS/CSS modules shared between pages\n- Business logic reused across pages\n - Interface contract with the backend (whether it needs to be adjusted)\n\n3. **Migration Priority**\n - Sort by business value, complexity, coupling degree\n - Prioritize migrating independent modules and low-coupling pages\n - Identify reusable utility functions, constants, and type definitions\n\n## Phased migration process\n\n### Phase 0: Preparation\n\n- Build or identify target project skeleton: React/Vue/Next/Nuxt, modern MPA, or progressive TypeScript/build entry within existing projects\n- Configure ESLint, Prettier, and test framework\n- Establish `services/request.ts` unified request layer, compatible with existing API\n- Gradually migrate `utils` and `constants` in legacy projects and add types\n\n### Phase 1: Base Layer\n\n- Migrate and type API calls (`$.ajax` → `axios`/`fetch`)\n- Migration tool functions (date, formatting, verification, etc.)\n- Migrate constants, enumerations, and type definitions\n- Establish target navigation/page entry skeleton; unmigrated pages can continue to use old routing, redirection, iframe or micro-front-end embedding\n\n### Phase 2: Migration by module/page\n\n- Migrate one complete feature or page at a time\n- From simple to complex: static page → list page → form page → complex interactive page\n- Extract reusable components during migration, following the directory structure of the target React or Vue project\n- Supplementary unit testing and E2E critical path for each completed module\n\n### Phase 3: Closing\n\n- 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\n- Configure 404, error boundaries, and global error handling\n- Performance optimization (lazy loading, code splitting, caching strategy)\n- Document updates and deployment process adjustments\n\n## Refactoring implementation requirements\n\nThe following implementation constraints need to be followed when migrating to ensure consistent vision and interaction, and the code is simpler and easier to maintain.\n\n### Pictures and Icons\n\n- Directly use the image resource path of the original project without rehosting or replacing it.\n- SVG images (`` or CSS `background-image`) can be used; when icon components or accessible interactions require inline SVG, the target project icon specifications should be followed and the reasons should be explained.\n- If the original project uses iconfont or IcoMoon icons, priority should be given to continuing to use them during reconstruction to keep the icon system consistent; visual consistency, packaging, and maintenance costs need to be evaluated before replacing with other icon schemes.\n- For icons, priority is given to using existing icon files in the original project (iconfont / IcoMoon / existing SVG). If necessary, SVG files can be introduced as independent resources\n\n### Internationalization (i18n)\n\n- User-visible copy in the new stack code (React/Vue, etc.) must follow the project i18n, and do not hardcode Chinese/English copy in the new code\n- **Do not add** user-visible hard-coded copy in legacy HTML/JS, unless it is purely static and the warehouse does not yet have an available i18n access point; before changing the copy, check whether locales already has an entry, and synchronize the main language files\n- Keys are organized by page/module/semantics, and existing keys are reused; mapping transition is only done when the old key is an external contract. For details, see **Internationalization (i18n)** in the project rules (\"Legacy Code and Migration Scenarios\" in `templates/shared/rules/fec-i18n.md`)\n\n### Style\n\n- The layout style aligns with the visual effects of the original project, but **only refers to the original project effects and does not copy its CSS**\n- Prioritize the use of **flex elastic layout** to avoid `float`, complex `position`, and redundant nesting\n- Avoid unreasonable writing methods: such as `!important` abuse, excessively deep selectors, and repeated definitions\n- Prioritize to avoid inline styles (`style={{ ... }}` / `style=\"...\"`) in components; when it is necessary to use runtime dynamic values, third-party component APIs or CSS variable bridging, they should be kept local and interpretable and put into the target project style system first.\n\n### Target\n\n- **Visual and interactive**: consistent with the original project, no perceived difference by users\n- **Code Quality**: more concise, easier to maintain, and in line with the target framework specifications\n- **Business functions**: consistent with the original project, **no missing functions**; behaviors before and after migration are equivalent\n\n### Verification layering\n\n- If it involves the migration of pages, components, routing, forms, pop-ups, navigation or key user processes, first establish a list of behaviors before and after refactoring, and then use Playwright or an equivalent real browser verification method to compare and verify the critical paths.\n- For visually sensitive pages, supplement screenshot comparison or manual screenshot acceptance; dynamic content, animation, fonts and environmental differences need to be clearly blocked, stabilized or explained.\n- For pure logic, type, build or UI-less migrations, Playwright is not forced and a validation layer closer to risk should be chosen: type-check, unit test, component test, build or lint.\n- The verification goal is not to be completely consistent at the pixel level, but to confirm that there are no missing business functions, key interactions are equivalent, there are no unexpected deviations in the main visual layout, and the code is clearer and maintainable than the old implementation.\n\n## Migration Checklist\n\nAfter each migration unit is completed, confirm:\n\n- [ ] A behavioral list before and after refactoring has been established, covering public APIs, routing, forms, permissions, error status, cache, hidden points and key interactions\n- [ ] The business logic is consistent with the old implementation, no functions are missing, and the functions are completely equivalent.\n- [ ] Migration involving UI, interaction or critical processes has completed critical path comparison using Playwright or equivalent real browser verification\n- [ ] For visually sensitive pages, screenshot comparison or manual screenshot acceptance has been completed, and the method of handling differences in dynamic content, animation, fonts and environment has been explained.\n- [ ] Pure logic, type, build or no UI migrations have selected a validation layer that is closer to the risk and do not force the application of Playwright\n- [ ] Type definition is complete, no `any` abuse\n- [ ] API calls use a unified request layer, with complete error handling\n- [ ] Form verification, loading, empty state, and error state have been implemented\n- [ ] Accessibility: The form has a label and can be interacted with via the keyboard.\n- [ ] No XSS risk (user input is escaped or secure API is used)\n- [ ] Critical path has test coverage\n- [ ] Comply with the project specifications of the target stack (React / Vue / Next / Nuxt / MPA modernization, etc.)\n- [ ] Pictures use original project resources; icon systems give priority to the original project or target project specifications, exceptions have been explained\n- [ ] The style refers to the original project effect but does not copy the CSS. The target project style system is used first. The inline style exception has been explained.\n- [ ] The visual and interaction are consistent with the original project, and the code is simpler and easier to maintain.\n- [ ] The new code path copy has been i18n; the legacy layer has not been expanded and hardcoded; locales retrieval and multi-language synchronization have been completed (see i18n rule migration supplementary list)\n\nFile v2.9.0:references/migration-report-template.md\n\n# Migration analysis report template\n\n```markdown\n# Migration analysis report\n\n> Generation time: YYYY-MM-DD HH:mm\n> Review tool: frontend-craft\n\n## Strategy selection\n- Progressive/one-time rewrite:\n- Reason:\n\n## Inventory inventory\n- Number of pages:\n- Function modules:\n- jQuery plugin:\n- Server template:\n- API calling method:\n\n## Dependencies\n- Share JS/CSS:\n- Cross-page logic:\n- Backend interface contract:\n\n## Migration priority\n- First batch:\n- Second batch:\n- Suspension:\n\n## Phased steps\n- Stage 0:\n- Stage 1:\n- Stage 2:\n- Stage 3:\n\n## Risk and rollback\n- Risk:\n- Rollback plan:\n```\n\nAfter 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.\n\nFile v2.9.0:references/migration-strategy-and-mapping.md\n\n# Migration strategy and concept mapping\n\n## Migration strategy selection\n\n| Strategy | Applicability | Advantages | Risks |\n| --------------------------- | ------------------------------------ | ---------------------------- | ---------------------------- |\n| **Progressive (Strangler Fig)** | Large-scale projects, requiring continuous delivery, and insufficient team familiarity | Risks are controllable, can be launched in batches, and can be rolled back | Old and new coexist for a long time, and two sets of codes need to be maintained |\n| **One-time rewrite** | Small and medium-sized projects, stable business, sufficient time window | Clear target architecture, no historical baggage | Long cycle, high pressure to go online, difficult rollback |\n\n**Recommendation**: Prioritize the incremental approach unless the project is small and the business is simple.\n\n## Concept mapping\n\n### jQuery → React\n\n| Legacy Patterns | React Correspondence |\n| ------------------------------------------ | -------------------------------------- |\n| `$(selector).html(content)` | Declarative JSX + state-driven rendering |\n| `$(document).on('click', '.btn', handler)` | `onClick` + event delegation is handled by React |\n| `$.ajax()` / `$.get()` | Project request layer, `fetch` / `axios`, can be connected to TanStack Query or SWR on demand |\n| Global variables/namespace storage state | Local state, Context or the existing store of the project can be used as needed Zustand/Redux |\n| `$(el).show()` / `$(el).hide()` | Conditional rendering `{visible && }` |\n| Manual DOM operations `append` / `remove` | Data-driven, triggering re-rendering through setState |\n| Template string concatenation HTML | JSX component + props |\n| Multiple pages + server-side routing | React Router client-side routing |\n\n### jQuery → Vue 3\n\n| Legacy Mode | Vue 3 Compatibility |\n| ------------------------------------------ | -------------------------------------------------- |\n| `$(selector).html(content)` | Template + `ref` / `reactive` driven rendering |\n| `$(document).on('click', '.btn', handler)` | `@click` + event modifier |\n| `$.ajax()` / `$.get()` | Project request layer, `fetch` / `axios`, can be connected to VueUse, Nuxt `useFetch` or TanStack Query Vue adapter as needed |\n| Global variables / Namespace storage state | `ref` / `reactive` / Pinia |\n| `$(el).show()` / `$(el).hide()` | `v-show` / `v-if` |\n| Manual DOM manipulation | Data-driven, with responsive view updates |\n| Template string concatenation HTML | Single file component `