Coding

Refactor Clean

Try it

Use when safely removing dead frontend code, unused exports, stale components, obsolete routes, unused dependencies, or cleanup targets found by tools such as knip, depcheck, ts-prune, TypeScript, ESLint, or manual review. Do not use for feature rewrites that change behavior; Chinese triggers includ

What it does

在验证保护下识别并清理无用前端代码，减少技术债，同时避免误删动态引用、路由入口、配置文件和运行时约定。

The skill document

重构清理

Purpose

在验证保护下识别并清理无用前端代码，减少技术债，同时避免误删动态引用、路由入口、配置文件和运行时约定。

Procedure

  1. 先建立基线：运行或确认当前 lint、type-check、test、build 的状态。
  2. 收集候选项：
    • 优先使用仓库已有工具，如 knip、depcheck、ts-prune、eslint、TypeScript。
    • 没有工具时，用 rg 检查引用、导出、路由、注册点和文档入口。
  3. 按风险分类：
    • SAFE：测试夹具、未引用工具函数、明确未导出的私有组件。
    • CAUTION：共享组件、feature 入口、样式文件、Storybook stories。
    • DANGER：路由、配置、package scripts、运行时模板、动态 import、插件元数据。
    • UPGRADE：过期依赖、重复依赖、未使用依赖和安全告警先进入依赖升级或依赖清理评估，不与死代码删除混做。
  4. 只自动处理 SAFE 项；CAUTION 和 DANGER 需输出建议和证据，不直接删除。
  5. 每批清理后运行受影响验证命令。
  6. 若验证失败，停止扩大清理范围，先定位该批次。
  7. 清理结束后做行为等价复核：公开 API、路由、命令、模板、metadata、文档示例和报告输出仍可被引用。
  8. 对技术债排序：优先清理有验证保护、影响开发效率或阻塞升级的项目；低证据的大范围重写只输出建议。

Frontend-Specific Checks

  • 检查 JSX/模板字符串、路由配置、barrel export、Storybook、测试、文档示例和动态组件注册。
  • 样式文件需检查 className、CSS Modules、Tailwind safelist、全局选择器和主题变量。
  • 依赖清理需检查构建插件、运行时模板、CLI scripts、monorepo 子包和 peer dependency。

Constraints

  • 不改变用户可见行为。
  • 不删除无法证明无引用的公开 API、路由、模板或配置。
  • 不用“一次大删除”替代可验证的小批次清理。
  • 不把格式化、重命名或架构重写混入死代码清理。
  • 不用“看起来没人用”作为证据；必须有搜索、工具输出、类型错误消失或测试保护。
  • 不把依赖大版本升级伪装成清理；升级风险、release notes 和 lockfile 变更应分流到依赖升级工作流。

详细参考

撰写清理报告时，加载 references/report-template.md。

Expected Output

  • 清理报告保存为 reports/refactor-clean-YYYY-MM-DD-HHmmss.md。
  • 代码清理后相关验证命令通过，或明确说明阻塞原因。

Related skills

Git

Run Git operations — commits, branches, merges, rebases, conflict resolution, and recovery — with safety rules enforced.

by Iván535 installs31 stars

diagram-generator

Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.

by nssa.io1.0k installs47 stars

Productivity

Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.

by Iván855 installs69 stars

Join meeting

Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.

by johnpatternai22 installs8 stars

Memory

Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.

by Iván559 installs18 stars

More from bovinphang

Browse all skills

Image Generation

Generate or edit diagrams, visual assets, and image workflows with reviewable PNG self-checks and bounded self-repair.

by bovinphang9 installs1 stars

Drawio Studio

Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI expo

by bovinphang5 installs

UI Design

Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or

by bovinphang8 installs

Nextjs Project Standard

Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventio

by bovinphang10 installs1 stars

Monorepo Project Standard

Use when creating, reviewing, or restructuring frontend monorepos with pnpm workspace, Turborepo, Nx, multi-package dependency boundaries, task orchestration, package naming, or package publishing; Chinese triggers include monorepo, workspace, multi-package.

by bovinphang10 installs1 stars

Nuxt Project Standard

Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chines

by bovinphang10 installs1 stars