一、项目核心 Skills（两套标准，各司其职）
1）vue-best-practices
下载地址：npx skills add https://github.com/hyf0/vue-skills --skill vue-best-practices
负责：组件结构与逻辑正确性适用范围：
.vue组件、页面- Vue Router / Pinia / 组合式逻辑
- 组件拆分、数据流、状态管理
关键约束：
- 统一使用 Vue 3 + Composition API
- 遵循 Props Down / Events Up 单向数据流
- 状态最小化，优先 computed 派生
- 复杂逻辑抽离为
useXxxComposable - 先保证功能正确，再做性能优化
2）scss-layout-best-practices
负责：多端布局一致性适用范围：
- uni-app 页面 / 组件样式
- 小程序、Android、iOS 多端兼容
关键约束：
- 布局单位优先使用
rpx - 主布局优先
flex - 控制选择器嵌套深度，提升可维护性
- 颜色 / 间距 / 字号统一变量，禁止硬编码
- 动效优先
transform/opacity，降低性能损耗
二、为什么必须显式使用 Skills
传统 “想到哪改到哪” 的痛点：
- 组件持续膨胀，职责边界模糊
- 样式临时修补，多端表现不一致
- AI 每次重新理解项目，输出风格漂移
- Code Review 大量消耗在规范而非业务
Skills 的价值：把经验变成规则
- AI 按统一标准输出，不再随机发挥
- 新需求复用同一套决策路径
- 评审聚焦业务，规范问题前置解决
三、实战流程：如何在项目中落地
1）先定任务边界，再匹配 Skill
- 页面逻辑 / 状态 / 组件拆分 → 用
vue-best-practices - 布局 / 样式 / 多端兼容 → 用
scss-layout-best-practices - 逻辑 + 样式同时修改 → 先逻辑后样式，两套并用
2）按固定顺序执行改动
Vue 任务执行顺序
- 划分组件职责（状态 vs 展示）
- 定义 props /emits 接口契约
- 复杂逻辑抽离 Composable
- 保证行为与功能正确
- 最后优化渲染与性能
SCSS 任务执行顺序
- 保持交互与功能不变
- 统一布局（flex /rpx）
- 抽取变量与公共样式
- 检查层级、滚动性能
- 多端验证（小程序 / Android /iOS）
3）每次输出固定交付物
每个任务必须包含：
- 改动清单（按文件说明改了什么）
- 风险点（端差异、状态流、性能）
- 验证步骤（最小可复现检查点）
确保开发者、AI、评审者使用同一套标准。
四、项目内通用提示词模板
请完成指定任务，并严格遵循项目 Skills：
- Vue 相关：遵循 vue-best-practices
- 样式相关：遵循 scss-layout-best-practices
- 不做无关重构，不修改无关文件
输出格式：
1. 改动点（按文件）
2. 风险点（多端兼容/状态/性能）
3. 验证步骤（小程序 / Android / iOS）
五、落地收益
- AI 输出更稳定：不再上下文漂移、风格失控
- 代码更易维护：组件边界清晰，样式策略统一
- 多端更可靠：提前规避多端差异兼容问题
- 协作更高效：任务交接、Code Review 更快更清晰
