Appearance
Claude Code Skill实战教程：四步创建项目规范说明书
Skill就是给AI看的"说明书"。一次配置，永久生效。
真实场景
团队做Vue3项目重构，代码规范统一是个大问题：
| 问题 | 说明 |
|---|---|
| 组件风格 | 有的用Options API，有的用Composition API |
| 样式方案 | 有的写CSS，有的写Less |
| 命名方式 | 五花八门，没有统一规范 |
Code Review时光改风格问题就花了不少时间。
Skill解决这个问题。
什么是Skill？
Skill就是给Claude看的"说明书"。
你把项目的技术栈、代码规范、组件模板写在一个Markdown文件里，放在.claude/skills/文件夹下。Claude执行任务时，会先看这个说明书，然后按你的规矩来生成代码。
示例规范：
- 必须用Vue3的
<script setup>语法 - 组件样式必须用Less并且要写
scoped - 按钮必须用Element Plus的
ElButton
这样Claude生成出来的代码，直接符合项目规范，不用手动改。
四步创建流程
第一步：创建文件夹
在项目根目录下打开终端：
bash
mkdir -p .claude/skills这个文件夹存放所有Skill。
第二步：新建Skill
创建一个Vue3项目的Skill：
bash
mkdir -p .claude/skills/vite-project-skill在vite-project-skill文件夹里创建SKILL.md文件：
markdown
---
name: vue3-skill
description: Vue3 + Vite + Element Plus 开发规范
---
# Vue3 组件规范
1. 使用 `<script setup lang="ts">`
2. 组件必须定义 name：
```ts
defineOptions({ name: 'XXX' })- 样式用 Less，必须加 scoped
**注意**：文件名必须大写`SKILL.md`。写成小写`skill.md`会识别不了。
**description很重要**：Claude根据这段描述判断什么时候用这个Skill。
### 第三步：检查是否生效
打开Claude Code，输入：/skills list
如果能看到你刚创建的vite-project-skill，说明配置成功。
### 第四步：开始使用
配置好后正常用就行。Claude会自动识别什么时候需要用你的Skill。
比如输入：帮我写一个用户列表组件
Claude会读取你的Skill，知道你用的是Vue3 + Element Plus，然后按你定好的规范来生成代码。
生成的东西直接就能用，基本不需要手动改。
## 三点建议
| 建议 | 说明 |
|------|------|
| **一个Skill做一件事** | 不要搞大而全，分开管理更方便。比如`vue3-component-skill`只管组件，`vue3-api-skill`只管接口调用 |
| **description写触发条件** | Claude靠这个判断要不要用你的Skill，写得太模糊可能不会自动激活 |
| **内容不用太长** | 几百行就够了，又不是写文档。核心规范写清楚，复杂的东西用时再说 |
**改完Skill记得重启Claude**，不然不会生效。
## 总结
Skill不是什么黑科技，就是一个配置文件。但它确实能让你和AI配合得更顺。
| 对比 | 之前 | 现在 |
|------|------|------|
| 规范说明 | 每次手动说一遍 | 写进Skill自动生效 |
| 代码质量 | 需要手动调整 | 直接符合规范 |
| 维护成本 | 重复劳动多 | 一次配置永久生效 |
**如果你也在用Claude Code写代码，试试把自己的规范整理成一个Skill。**
---
**关键词**：Claude Code, Skill, 教程, SKILL.md, Vue3, 代码规范