본문으로 건너뛰기
cccskills
무료GitHub에 공개

fec-legacy-to-modern-migration

用于规划或实施从 JavaScript、jQuery、HTML/CSS、服务端渲染模板、MPA 遗留前端代码或旧框架代码迁移到现代前端技术栈，同时保持行为一致。不要用于仍留在旧技术栈内的日常遗留 bug 修复；中文触发词包括 遗留项目、技术栈升级、jQuery 迁移。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

bovinphang/frontend-craft
연동 도구Playwright
설치 방법 보기

포함된 파일(4)

  • SKILL.md3.8 KB
  • references/migration-execution-checklist.md6.3 KB
  • references/migration-report-template.md670 B
  • references/migration-strategy-and-mapping.md3.7 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

传统前端到现代框架迁移

适用于将 JavaScript + jQuery + HTML/CSS 多页面应用（MPA）、服务端模板渲染项目或旧框架代码，渐进迁移到 React、Vue、Next.js、Nuxt、TypeScript，或保留 MPA 形态但现代化模块、构建、类型和测试的场景。

用途

指导传统前端项目渐进迁移到目标现代栈，提供迁移策略、概念映射、分阶段步骤和实施约束，确保功能等价和风险可控。

流程

  1. 先识别目标栈、迁移边界和是否保留 MPA/服务端模板形态。
  2. 加载 references/migration-strategy-and-mapping.md，选择渐进式或一次性重写策略，并明确遗留模式到目标栈的映射。
  3. 加载 references/migration-execution-checklist.md，完成存量盘点、依赖分析、优先级排序和分阶段迁移计划。
  4. 撰写迁移分析或迁移计划报告时，加载 references/migration-report-template.md。
  5. 按准备、基础层、模块/页面迁移、收尾的顺序推进，每次迁移一个可验证单元。
  6. 每个迁移单元验证功能等价、视觉一致、类型安全、可访问性、i18n、资源和样式边界。

约束

  • 迁移前必须先输出迁移分析报告，明确策略、优先级和风险。
  • 不要在一次迁移中同时改架构、改 UI、改接口。
  • 优先保证功能等价，再考虑优化和现代化。
  • 迁移过程中保持旧系统可运行，避免大爆炸式上线。
  • 遇到 jQuery 插件无现成替代时，可暂时用 iframe 或微前端方式嵌入，待后续替换。
  • 目标栈先识别 React/Vue/Next/Nuxt、现代 MPA 或局部现代化目标，不默认强制改成 SPA。
  • 图片使用原项目资源；图标体系优先沿用原项目或目标项目规范；内联 SVG 例外需有可访问性、组件化或维护理由。
  • 样式参考原项目效果但不照搬 CSS，优先使用目标项目样式体系；内联样式例外需局部、可解释。
  • 目标是视觉与交互一致、代码更简洁易维护，业务功能不得缺失。
  • 涉及页面、组件、路由、表单、弹窗、导航或关键用户流程的迁移，必须建立重构前后的行为清单，并使用 Playwright 或同等真实浏览器验证方式对关键路径做对比验证。
  • 对视觉敏感页面，应补充截图对比或人工截图验收；动态内容、动画、字体和环境差异需明确屏蔽、稳定化或说明。
  • 对纯逻辑、类型、构建或无 UI 的迁移，不强制 Playwright，应选择更贴近风险的验证层：type-check、unit test、component test、build 或 lint。
  • 验证目标不是像素级完全一致，而是确认业务功能无缺失、关键交互等价、主要视觉布局无非预期偏差，并且代码比旧实现更清晰、可维护。

预期输出

  • 迁移分析报告保存为 reports/migration-plan-YYYY-MM-DD-HHmmss.md，包含策略选择、存量盘点、依赖关系、分阶段步骤、风险与回滚方案。
  • 迁移后的业务功能与原项目完全等价，无功能缺失。
  • 视觉与交互与原项目一致，用户无感知差异。
  • 类型定义完整，无 any 滥用，API 调用统一且类型安全。
  • 图片使用原项目资源，样式进入目标项目样式体系，图标和内联样式例外有明确理由。
  • 新代码文案已 i18n，关键路径有测试覆盖。

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

fec-accessibility-check

무료

Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

bovinphang/frontend-craft222026년 9월 26일 업데이트

fec-accessibility-check

무료

用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归；中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

bovinphang/frontend-craft222026년 9월 26일 업데이트

fec-alchemy

무료

Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

bovinphang/frontend-craft222026년 9월 26일 업데이트

fec-alchemy

무료

用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践，并通过原创的项目内重设计转化为当前项目能力，而不是复制原实现。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

bovinphang/frontend-craft222026년 9월 26일 업데이트

fec-api-integration

무료

Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

bovinphang/frontend-craft222026년 9월 26일 업데이트

fec-api-integration

무료

用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略；中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

bovinphang/frontend-craft222026년 9월 26일 업데이트

bovinphang의 스킬 모두 보기

이 스킬의 문제 신고