在过去的几年里，前端开发经历了从手写每一行 HTML/CSS 或使用组件库（Ant Design, Element Plus），到 AI 辅助编程（GitHub Copilot, Cursor）的巨大跨越。然而，2025 年以来的技术浪潮正将我们推向一个新的阶段：从 “AI 辅助” 向 “AI Agent（智能体)” 转型。
在这种模式下，开发者不再只是接收代码建议，而是为 AI 提供一系列“技能包（Skills）”，让 AI 能够理解复杂的框架逻辑、项目结构乃至视觉审美。
什么是Skills? 用一句话概括就是：Skills = 领域专业知识 + 你的项目偏好 + 严厉的审查官。
1. 为什么需要 Skills？
在 AI 编程的语境下，Skills 的出现是为了解决大模型（LLM）“博而不精”的天然缺陷。
1.1 通才 AI：知识的“图书馆”
一个没有安装 Skills 的大模型（如 GPT-5 或 Claude 4.5）就像一个读过全世界所有代码的毕业生：
广度惊人：它知道几百种编程语言，甚至能背出 2014 年的过时语法。
深度断层：它不知道你公司内部的封装规范，不知道你的组件命名习惯，更不知道你项目中那个“不能动的老 Bug”。
执行模糊：给它一个需求，它会从 100 种可能的解法中随机选一个给你，不管这是否符合你现在的工程环境。
1.2 专才 AI：自带“十年工龄”的骨干
安装了 Skills 的 AI（Agent），则完成了从“大模型”到**“领域智能体”**的进化：
安装了 Skills 之后， 它不再是那个满嘴跑火车的机器人，而是一个被你强制要求“必须按这套规约写代码”的资深开发。
特性通才 AI (Generalist)专才 AI (Specialist with Skills)
思维边界无边界，容易产生幻觉有界思维：严格锁定在当前技术栈内
项目理解盲人摸象，只看当前文件全局视野：理解路由、状态管理、样式体系
输出质量“大概能跑”的代码**“符合工程直觉”**的生产级代码
角色定位知识检索器虚拟技术负责人 (Virtual Lead)
2. Skills 里面到底装了什么
一个 Skills 文件夹里通常不是深奥的代码，而是三样东西：
规约（Rules）：一堆告诉 AI “准许做什么”和“严禁做什么”的指令（通常是.cursorrules或.md文件）。
上下文（Context）：你项目的特殊结构。比如你的路由写在哪里，你的接口是怎么封装的。
工具（Tools）：一些自动化的小脚本。比如 AI 写完代码后，自动运行一下npm lint检查有没有写错。
如果说通才 AI 提供的是“概率” （它觉得这段代码看起来像对的），那么 Skills 提供的就是“确定性”。它把行业内顶尖架构师的经验，封装成了 AI 触手可及的“条件反射”。
本文将分享前端高频使用的三个核心技能包：vue-skills、react-skills（agent-skills）以及ui-skills（uipro-cli），剖析它们如何通过标准化的指令集，彻底改变我们的开发流。
Vue-Skills
Vue-Skills涵盖了Vue 3 项目的最佳实践、TypeScript 类型安全增强、IDE 性能优化以及现代 Vue 编码模式。它们旨在解决大型 Vue 项目中常见的开发痛点，如 IDE 卡顿、类型推断错误、构建配置以及代码可维护性问题。
1.1 核心规则
可以将这些规则概括为以下 5 个主要方面：
1. 开发体验与 IDE 性能优化 (IDE & Performance)
关注如何解决大型项目中 VSCode 和 Volar 插件的性能问题。
codeactions-save-performance.md: 解决在大型 Vue 项目中保存文件时耗时过长（30秒+）的问题，建议禁用或限制耗时的 Code Actions。
volar-3-breaking-changes.md: 针对 Volar 升级带来的变更进行适配，确保插件功能正常。
vue-directive-comments.md: 介绍了@vue-ignore, @vue-skip,@vue-expect-error等指令注释，用于在模版中精细控制类型检查行为（类似 @ts-ignore）。
2. TypeScript 类型安全与配置 (Type Safety & Configuration)
致力于提升 Vue 模版和组件的类型检查严格度，减少运行时错误。
vue-tsc-strict-templates.md: 推荐开启 strictTemplates，在编译时捕获模版中未定义的组件和属性错误。
vue-router-typed-params.md: 解决unplugin-vue-router,导致的路由参数类型丢失问题（Property does not exist），推荐更严格的路由参数类型定义。
data-attributes-config.md: 配置 vueCompilerOptions 以支持data-*属性的类型检查，避免误报类型错误。
** module-resolution-bundler.md**: 推荐在 tsconfig.json 设置 "moduleResolution": "bundler"
以适配现代构建工具。
with-defaults-union-types.md: 修复在defineProps中使用联合类型（如 string | false）配合withDefaults 时的虚假警告问题。
3. Vue 3 现代编码模式 (Modern Patterns)
推广 Vue 3.4+ 的新特性及更优雅的代码组织方式。
define-model-update-event.md: 推荐使用 Vue 3.4 的 defineModel()宏，替代手写的props+ emit('update:modelValue')模式。
rolex-shenzhen.fdcpx.net
rolex-shenzhen.longinesshwx.com
rolex-shs.szwatchpg.cn
rolex-shs.buchererweixiu.com
rolex-shenzhen.audemarsweixiu.com
rolex-shenzhen.mosershwx.com
rolex-shs.kpkwatch.com
rolex-shs.watchgz.cn
rolex-shenzhen.fjfsx.com
rolex-shenzhen.tagheueru.cn
rolex-shs.ywbzn.com
rolex-shs.aysza.cn
rolex-shenzhen.hx626.com
rolex-shenzhen.ernestshwx.com
rolex-shs.watchrhc.cn
rolex-shs.zzjshd.com
rolex-shenzhen.shjshdzb.com
rolex-shenzhen.watchxu.com
rolex-shs.ynwatchzb.cn
rolex-shs.watch-service.com.cn
rolex-shenzhen.gyjshd.com
rolex-shenzhen.spezp.com
rolex-shs.shrhzb.com
rolex-sys.shrhzb.com
rolex-sys.jshdvip.com
rolex-shenzhen.iwatch4s.com
rolex-shenzhen.gyjshdzb.com
rolex-shs.jhpwd.cn
rolex-shs.szjshdzb.com
rolex-sys.szjshdzb.com
rolex-sys.wzjshd.com
rolex-shenzhen.jws-watch.com
rolex-shenzhen.jsfltime.com
rolex-shs.watchwb.cn
rolex-shs.watchsha.cn
rolex-whs.watchsha.cn
rolex-whs.watch-hdl.com
rolex-shenzhen.hdl-watch.com
rolex-shenzhen.watchhdlb.cn
rolex-shs.watchhdli.cn
rolex-shs.watchzgi.cn
rolex-whs.watchzgi.cn
rolex-whs.watchrhf.cn
rolex-shenzhen.jshdsh.com
rolex-shenzhen.watchec.cn
rolex-shs.watchda.cn
rolex-shs.watchhls.com
rolex-gebs.watchhls.com
rolex-gebs.csjshd.com
rolex-hzs.jshdkm.com
extract-component-props.md: 建议将复杂的defineProps类型提取为独立的 TS 接口，提高代码可读性和复用性。
script-setup-jsdoc.md: 规范<script setup>中的 JSDoc 使用，增强组件文档和类型提示。
fallthrough-attributes.md: 关于 inheritAttrs: false和透传属性（Attributes Fallthrough）的最佳实践。
4. 运行时陷阱与调试 (Runtime Caveats & Debugging)
解决特定场景下的怪异 bug 和运行时问题。
deep-watch-numeric.md: 警告在侦听（watch）数字数组时使用 deep: true的陷阱（新旧值相同），建议使用深拷贝。
duplicate-plugin-detection.md: 防止 Vue 插件（如 Pinia）在微前端或特定环境下被重复注册。
hmr-vue-ssr.md: 处理服务端渲染（SSR）场景下的热更新（HMR）问题。
5. 测试与样式 (Testing & Styling)
pinia-store-mocking.md: 关于如何在测试中正确 Mock Pinia Store 的指南。
strict-css-modules.md: 开启 CSS Modules 的严格模式，防止使用未定义的 class 名。
