#Claude Code 代码重构质量提升

所有的代码都值得用 AI 重新重构一遍。无论是刚写完的新代码，还是项目中沉淀多年的老代码，在结构、命名、冗余度上往往都有优化空间。本文介绍两个 Agent Skills——code-simplifier 和 vueuse-functions，让 Claude Code 在编码之后自动完成代码精简和重构，功能不变，质量提升。

• code-simplifier：通用代码简化与重构技能，适用于任何语言和项目
• vueuse-functions：Vue.js / Nuxt 项目专用，自动应用 VueUse 组合式函数替代手写代码

#code-simplifier：代码简化专家

#简介

code-simplifier 是一个通用代码简化技能，来源于 Anthropic 官方插件。它专注于在不改变代码功能的前提下，提升代码的清晰度、一致性和可维护性。

核心原则：只改变代码怎么写，不改变代码做什么。

#安装

npx skills add https://github.com/simonwong/agent-skills --skill code-simplifier

技能主页：https://skills.sh/simonwong/agent-skills/code-simplifier

#使用

code-simplifier 支持两种触发方式：

• 自动触发：安装后，Claude 在代码编写或修改后自动介入，无需手动操作
• 手动触发：通过斜杠命令指定目标文件

/code-simplifier src/services/userService.ts

#工作机制

code-simplifier 遵循以下流程：

flowchart LR
    A[识别修改范围] --> B[分析优化机会]
    B --> C[应用优化]
    C --> D[验证结果]

#优化规则

code-simplifier 遵循明确的优化方向和边界：

会做的事：

不会做的事：

#实际效果

优化前：

const getStatusText = (status: number) => {
  // 获取状态文本
  // 根据状态码返回对应的文本
  const text = status === 0 ? '待处理' : status === 1 ? '处理中' : status === 2 ? '已完成' : '未知'
  return text
}

优化后：

function getStatusText(status: number): string {
  switch (status) {
    case 0: return '待处理'
    case 1: return '处理中'
    case 2: return '已完成'
    default: return '未知'
  }
}

优化点：移除多余注释和临时变量，嵌套三元改为 switch，添加显式返回类型。

#vueuse-functions：VueUse 组合式函数助手

#简介

vueuse-functions 由 Anthony Fu（Vue/Nuxt 核心团队成员）维护，是 Vue.js / Nuxt 项目的专用技能。VueUse 相当于 Java 生态中的 Hutool / Apache Commons——提供 200+ 个开箱即用的组合式函数，覆盖状态管理、DOM 操作、浏览器 API、网络请求、防抖节流等常见场景。该技能在开发过程中自动识别可以用 VueUse 替代的手写逻辑，用社区验证的方案替代重复实现。

核心理念：优先使用 VueUse，而非手写重复逻辑。

#安装

npx skills add https://github.com/antfu/skills --skill vueuse-functions

技能主页：https://skills.sh/antfu/skills/vueuse-functions

#使用

vueuse-functions 支持两种触发方式：

• 自动触发：安装后，Claude 在编写 Vue/Nuxt 代码时自动识别可替换为 VueUse 的场景
• 手动触发：通过斜杠命令指定目标文件

/vueuse-functions src/views/dashboard/index.vue

#调用规则

vueuse-functions 对每个函数定义了三种调用级别：

#实际效果

优化前（手写实现）：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const isDark = ref(false)
const windowWidth = ref(window.innerWidth)
const searchText = ref('')
const debouncedSearch = ref('')

let timer: ReturnType<typeof setTimeout> | null = null

function toggleDark() {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
}

function handleResize() {
  windowWidth.value = window.innerWidth
}

function handleSearch(val: string) {
  if (timer) clearTimeout(timer)
  timer = setTimeout(() => {
    debouncedSearch.value = val
  }, 300)
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (timer) clearTimeout(timer)
})
</script>

优化后（使用 VueUse）：

<script setup lang="ts">
const isDark = useDark()
const toggleDark = useToggle(isDark)
const { width: windowWidth } = useWindowSize()
const searchText = ref('')
const debouncedSearch = refDebounced(searchText, 300)
</script>

优化点：30+ 行代码缩减为 5 行，自动处理事件监听的注册/销毁，防抖逻辑内置，暗色模式自动持久化。

#两个技能的协作

code-simplifier 和 vueuse-functions 可以叠加使用，在 Vue/Nuxt 项目中形成双重优化：

flowchart LR
    A[编写代码] --> B[vueuse-functions<br/>替换手写实现]
    B --> C[code-simplifier<br/>简化代码结构]
    C --> D[高质量代码]