【自学AI】02 AI Agent Skills 深度解析（下）：前端开发实战指南

1
> 帮我写一个用户列表组件，要符合 Vue 3 最佳实践

1
> 用 vue-skills 帮我写一个表单组件

1
vue-skills/
2
├── SKILL.md                    # 核心指令
3
├── composition-api.md          # Composition API 规范
4
├── reactivity.md               # 响应式系统规范
5
├── vueuse.md                   # VueUse 最佳实践
6
└── references/
7
    └── vue3-migration-guide.md # Vue 3 迁移指南

1
---
2
name: vue-skills
3
description: |
4
  Vue 3 开发最佳实践。当需要编写或审查 Vue 组件时使用。
5

6
  触发条件：
7
  - 用户说"写 Vue 组件"
8
  - 用户说"审查 Vue 代码"
9
  - 用户说"优化 Vue 组件"
10
---
11

12
# Vue 3 开发最佳实践
13

14
## 核心规则
15

16
### 1. 必须使用 Composition API
17
详见 composition-api.md
18

19
### 2. 响应式数据规范
20
详见 reactivity.md
21

22
### 3. 优先使用 VueUse
23
详见 vueuse.md
24

25
## 快速检查清单
26

27
- [ ] 使用 `<script setup>` 语法
28
- [ ] Props 和 Emits 有完整的 TypeScript 类型
29
- [ ] 优先使用 VueUse 组合式函数
30
- [ ] 避免解构 reactive 对象
31
- [ ] ref 的 .value 使用正确

1
# Composition API 规范
2

3
## 必须使用 `<script setup>`
4

5
❌ 错误：
6
\`\`\`vue
7
<script>
8
export default {
9
  data() {
10
    return { count: 0 }
11
  }
12
}
13
</script>
14
\`\`\`
15

16
✅ 正确：
17
\`\`\`vue
18
<script setup lang="ts">
19
import { ref } from 'vue'
20
const count = ref(0)
21
</script>
22
\`\`\`
23

24
## Props 和 Emits 定义
25

26
✅ 正确：
27
\`\`\`vue
28
<script setup lang="ts">
29
interface Props {
30
  title: string
31
  count?: number
32
}
33

34
const props = defineProps<Props>()
35

36
interface Emits {
37
  (e: 'update', value: number): void
38
}
39

40
const emit = defineEmits<Emits>()
41
</script>
42
\`\`\`

1
// ❌ 错误：失去响应性
2
const state = reactive({ count: 0 })
3
const { count } = state
4
count++ // 不会触发更新
5

6
// ✅ 正确：使用 toRefs
7
const state = reactive({ count: 0 })
8
const { count } = toRefs(state)
9
count.value++ // 触发更新

1
// ❌ 错误：忘记 .value
2
const count = ref(0)
3
console.log(count) // RefImpl 对象
4

5
// ✅ 正确：使用 .value
6
const count = ref(0)
7
console.log(count.value) // 0

1
// ❌ 错误：失去响应性
2
const list = reactive([1, 2, 3])
3
list = [4, 5, 6] // 失去响应性
4

5
// ✅ 正确：使用数组方法
6
const list = reactive([1, 2, 3])
7
list.splice(0, list.length, 4, 5, 6)

1
// ❌ 错误：无法监听到变化
2
const state = reactive({ nested: { count: 0 } })
3
watch(() => state.nested, () => {
4
  console.log('changed')
5
}) // 不会触发
6

7
// ✅ 正确：使用 deep 选项
8
watch(() => state.nested, () => {
9
  console.log('changed')
10
}, { deep: true })

1
// ❌ 错误：在 computed 中修改状态
2
const count = ref(0)
3
const doubled = computed(() => {
4
  count.value++ // 副作用！
5
  return count.value * 2
6
})
7

8
// ✅ 正确：computed 只做计算
9
const count = ref(0)
10
const doubled = computed(() => count.value * 2)

1
// ❌ 错误：手动实现
2
const count = ref(0)
3
const stored = localStorage.getItem('count')
4
if (stored) count.value = JSON.parse(stored)
5
watch(count, (val) => {
6
  localStorage.setItem('count', JSON.stringify(val))
7
})
8

9
// ✅ 正确：使用 VueUse
10
import { useLocalStorage } from '@vueuse/core'
11
const count = useLocalStorage('count', 0)

1
// ❌ 错误：手动实现
2
const width = ref(window.innerWidth)
3
const handleResize = () => {
4
  width.value = window.innerWidth
5
}
6
onMounted(() => window.addEventListener('resize', handleResize))
7
onUnmounted(() => window.removeEventListener('resize', handleResize))
8

9
// ✅ 正确：使用 VueUse
10
import { useWindowSize } from '@vueuse/core'
11
const { width } = useWindowSize()

1
// ❌ 错误：手动实现
2
let timer: NodeJS.Timeout
3
const handleInput = (e: Event) => {
4
  clearTimeout(timer)
5
  timer = setTimeout(() => {
6
    // 处理逻辑
7
  }, 300)
8
}
9

10
// ✅ 正确：使用 VueUse
11
import { useDebounceFn } from '@vueuse/core'
12
const handleInput = useDebounceFn((e: Event) => {
13
  // 处理逻辑
14
}, 300)

1
<script setup lang="ts">
2
// ✅ 正确：完整的类型定义
3
interface Props {
4
  title: string
5
  count?: number
6
  items: Array<{ id: number; name: string }>
7
}
8

9
const props = withDefaults(defineProps<Props>(), {
10
  count: 0
11
})
12

13
interface Emits {
14
  (e: 'update', value: number): void
15
  (e: 'delete', id: number): void
16
}
17

18
const emit = defineEmits<Emits>()
19

20
// 使用
21
emit('update', props.count + 1) // 类型安全
22
emit('delete', 123) // 类型安全
23
</script>

1
> 用 vue-skills 和 vueuse-skills 帮我写一个注册表单

1
> 用 react-skills 帮我优化这个组件的性能

1
'use client'
2
import { useEffect, useState } from 'react'
3

4
export default function Dashboard() {
5
  const [user, setUser] = useState(null)
6
  const [posts, setPosts] = useState([])
7
  const [comments, setComments] = useState([])
8

9
  useEffect(() => {
10
    // 请求瀑布：串行获取数据
11
    fetch('/api/user').then(res => res.json()).then(data => {
12
      setUser(data)
13
      fetch(`/api/posts?userId=${data.id}`)
14
        .then(res => res.json())
15
        .then(posts => {
16
          setPosts(posts)
17
          fetch(`/api/comments?postId=${posts[0].id}`)
18
            .then(res => res.json())
19
            .then(setComments)
20
        })
21
    })
22
  }, [])
23

24
  return <div>...</div>
25
}

1
// Server Component（无需 'use client'）
2
export default async function Dashboard() {
3
  // 并行获取数据，消除请求瀑布
4
  const [user, posts, comments] = await Promise.all([
5
    fetch('/api/user').then(res => res.json()),
6
    fetch('/api/posts').then(res => res.json()),
7
    fetch('/api/comments').then(res => res.json())
8
  ])
9

10
  return <div>...</div>
11
}

1
---
2
name: team-code-review
3
description: |
4
  团队代码审查。自动检查代码是否符合团队规范。
5
---
6

7
# 团队代码审查
8

9
## 审查流程
10

11
### 1. TypeScript 检查
12
- 所有文件必须是 .ts 或 .tsx
13
- 禁止使用 any 类型
14
- 禁止使用类型断言（as）
15

16
### 2. 单元测试检查
17
- 每个源文件必须有对应的测试文件
18
- 测试文件命名：.test.ts 或 .spec.ts
19
- 测试覆盖率 ≥ 80%
20

21
### 3. 函数复杂度检查
22
- 使用 ESLint 的 complexity 规则
23
- 阈值：10
24
- 超过阈值的函数必须拆分
25

26
## 审查报告格式
27

28
\`\`\`markdown
29
# 代码审查报告
30

31
## ✅ TypeScript 使用
32
- 所有文件都使用 TypeScript
33

34
## ❌ 单元测试
35
- 缺少测试文件：src/utils/helper.ts
36

37
## ✅ 函数复杂度
38
- 所有函数复杂度 ≤ 10
39
\`\`\`

1
> 帮我审查这个项目的代码

1
> 用 ecommerce-order skill 帮我写订单处理逻辑

1
---
2
description: |
3
  当用户说"写 Vue 组件"、"审查 Vue 代码"时使用。
4
---

1
❌ 错误：避免解构 reactive 对象
2
✅ 正确：
3
\`\`\`typescript
4
const state = reactive({ count: 0 })
5
const { count } = toRefs(state)
6
\`\`\`

1
## 执行前检查
2
- [ ] 确认项目使用 Vue 3
3
- [ ] 确认已安装 VueUse
4

5
## 错误处理
6
### 错误 1：未安装 VueUse
7
提示：检测到项目未安装 VueUse，是否需要安装？

1
## 边缘情况
2
### 情况 1：用户上传的文件格式不支持
3
处理：自动转换为支持的格式

1
---
2
description: |
3
  触发条件：
4
  - 用户说"写 Vue 组件"
5
  - 用户说"审查 Vue 代码"
6
---