关于 frontend-refactor-planner
用于规划复杂前端代码安全分阶段重构的技能，帮助前端团队评估风险、确定改动优先级，并将工作拆分为渐进步骤，同时考虑测试和回滚。
主要功能
- 01评估前端复杂度与风险
- 02按影响和风险确定优先级
- 03规划小步可测试的重构阶段
- 04涵盖性能和无障碍改进
- 05纳入发布与回滚保障
适用场景
- 01拆分大型前端组件
- 02减少重复逻辑和状态复杂度
- 03规划无障碍改进
- 04制定含测试的渐进式重构方案
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/frontend-refactor-planner确认已加载。
详细介绍
前端重构规划器
为复杂的前端代码制定安全、分阶段的重构计划。
重构评估
识别问题：大型组件（超过 300 行）、属性逐层传递、逻辑重复、性能不佳、无障碍功能缺失、耦合紧密、代码未经测试
确定优先级：按风险（优先处理流量高的页面）和影响（优先解决面向用户的 Bug）排序
规划阶段：拆分为小型、可测试的增量步骤
常见重构模式
组件拆分：提取子组件、创建复合组件、分离逻辑与呈现
状态管理：向上提升状态、移至 Context/Zustand、移除不必要的状态
性能：记忆化（useMemo/useCallback）、代码拆分、延迟加载、虚拟化
无障碍功能：添加 ARIA 标签、键盘导航、焦点管理、语义化 HTML
测试：重构前添加测试，每次变更后进行测试
分阶段方法
阶段 1 - 稳定：添加测试、修复关键 Bug、记录当前行为
阶段 2 - 提取：提取实用工具、创建更小的组件、降低复杂度
阶段 3 - 简化：移除无用代码、合并重复内容、优化状态
阶段 4 - 打磨：优化性能、审查无障碍功能、完善文档
风险缓解
使用功能标志逐步发布，对重构版本与原版本进行 A/B 测试，监控错误率，制定回滚计划，对所有变更进行同行评审，增量部署。
完成标准
代码覆盖率超过 80%，性能指标有所改善，无障碍评分达到 95 分以上，测试无回归，通过代码审查，更新文档。
评论
支持 Markdown