trae skill通过项目专属skill.md文件将前端约束转化为ai自动遵守的铁律。需在.trae/skills/frontend-contract/下创建全大写的skill.md，明确组件名、路由路径、环境变量和api调用规范；重启trae切换agent模式或执行“trae: reload skills”加载规则；验证时ai应严格遵循约定，否则可拒绝并重申约束。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
让AI前端开发不写错组件名、不漏环境变量、不硬编码路径，直接复用项目已有规范而不是每次重说一遍——Trae Skill就是把前端项目的真实约束变成AI自动遵守的铁律。
生成项目专属skill.md
第一步：在项目根目录创建.trae/skills/文件夹（注意是隐藏目录，Windows需显示隐藏文件才能看到）。
第二步：进入.trae/skills/，新建一个文件夹，命名为frontend-contract（名字可自定义，但建议体现用途）。
第三步：在frontend-contract内新建文件，严格命名为【SKILL.md】（全大写，大小写错误Trae将完全忽略该Skill）。
第四步：打开SKILL.md，粘贴以下内容并保存：
# 角色<br>你是一名熟悉本项目技术栈的资深前端工程师，已完整读取项目结构与配置。<br><br># 约束<br>- 所有组件名必须与<code>src/components/</code>下实际文件夹名完全一致（区分大小写）
- 路由路径必须匹配
src/router/index.ts中routes数组的path字段- 环境变量一律从
.env.development或.env.production中读取，禁止硬编码- API请求地址必须使用
import { apiClient } from '@/utils/request'，不得直接调用fetch或axios.create让Trae真正读取并应用Skill
方法一：重启Trae并切换到Agent模式
关闭当前Trae窗口→重新以项目根目录为工作区打开→点击右下角状态栏“Normal”按钮→选择“Agent”模式。此时Trae会自动扫描.trae/skills/下的所有SKILL.md并加载。
方法二：强制重载Skill（调试时常用）
在Trae命令面板（Ctrl+Shift+P / Cmd+Shift+P）中输入“Trae: Reload Skills”，回车执行。这一步能跳过重启，但仅对已识别的Skill生效——如果之前没识别，先确认SKILL.md路径和命名是否正确。
【若AI仍无视规则，请检查package.json中是否含"trae": "latest"字段；缺失会导致Skill加载器不启用】
验证Skill是否生效
步骤一：在Trae中新建对话，输入：“帮我写一个用户列表页组件，需要调用/api/users接口”
步骤二：观察AI输出：
✅ 正确响应：自动导入apiClient，路径引用@/utils/request，组件名按src/components/UserList.vue格式生成，环境变量用import.meta.env.VITE_API_BASE；
❌ 错误响应：出现fetch('/api/users')、process.env.VUE_APP_API、组件名写成Userlist或user-list等不匹配项。
步骤三：若输出错误，立即点击AI回复右上角“×”拒绝该结果→在对话中追加一句：“请严格遵循.trae/skills/frontend-contract/SKILL.md中的约束”，AI将重新生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
