trae skill需主动构建语义索引层才能准确读取前端项目上下文。启用workspace级上下文是前提,通过状态栏#图标加载全部文件;若索引异常,检查.trae/.ignore是否误屏蔽src/等关键目录;索引完成后可用#workspace触发全局检索,并支持#folder、#code、#doc三种方式精准注入上下文。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

让Trae Skill准确读取前端项目上下文,不是靠AI“猜”或“扫一眼”,而是要主动构建可被SKILL.md引用的语义索引层。项目里有src/、vite.config.js、package.json这些关键文件,但若不显式注入,Skill执行时就只能看到当前编辑器打开的单个文件,无法识别组件import链、环境变量注入逻辑或路由守卫依赖关系。
启用Workspace级项目上下文
这是Skill能跨文件理解项目的前提,没有这一步,所有后续步骤都失效。
1. 在Trae右下角状态栏点击#图标 → 选择#Workspace → 等待提示“已加载全部项目文件(共XX个)”出现。
2. 若提示未出现或数字异常偏低(如仅显示3~5个),说明索引未完成或被忽略规则拦截。此时需检查.trae/.ignore是否误写了src/或vite.config.js——【.trae/.ignore是独立于.gitignore的配置,写错会导致整个src目录不可见】。
3. 索引完成后,在任意对话中输入#Workspace即可触发全局语义检索,AI将自动解析AST并建立模块间调用图谱,例如识别useAuthStore()实际来自src/stores/auth.ts而非当前文件。
为Skill定向注入关键上下文
Workspace提供全景视图,但Skill执行时需要更精准的上下文切片。以下三种方式可组合使用:
方法一:用#Folder锚定核心目录
在Skill提示词开头添加#Folder:src/components,AI将只加载该目录下所有.vue/.tsx文件及其直接依赖,避免加载测试用例或废弃组件干扰判断。
方法二:用#Code定位函数级上下文
在SKILL.md的Steps部分写明:#Code:setupRouter,Trae会提取src/router/index.ts中setupRouter函数体、其调用的createRouter参数、以及被import的routes定义文件——【此操作会强制AI跳过类型声明文件.d.ts,只读运行时代码】。
方法三:用#Doc关联外部规范
若项目遵循《Dify前端接入规范》,可在SKILL.md的references目录放入rule_spec.md,并在Precondition中声明“优先读取references目录规范”。执行时AI会自动对齐文档中“API响应字段必须含code/message/data三元组”的约束,校验src/api/user.ts的返回类型定义。
验证上下文是否生效
执行以下三步快速确认Skill已获得完整上下文:
① 在对话框输入:“列出当前项目中所有以use开头的Composition API函数,并标注它们所在的文件路径。”
② 若返回结果包含src/composables/useDarkMode.ts、src/hooks/usePermission.ts等真实路径,说明Workspace索引成功;若只返回空列表或报错“未找到相关文件”,则需重新构建索引。
③ 进入src/views/Dashboard.vue,选中<usercard></usercard>标签 → 右键 → “发送至AI”,观察AI是否能自动展开UserCard组件的props定义、emit事件清单及父组件Dashboard中对该组件的slot使用方式——这验证了动态上下文感知与变量生命周期追踪机制已激活。











