mcpField
V
vue-best-practices

vue-best-practices

github.com/frankiglesias开发0187 次安装36 周前更新
代码仓库

关于 vue-best-practices

Vue Best Practices 是用于处理生产应用中常见 Vue 3 反模式的规则技能。它指导编码 Agent 按问题选择规则、进行最小修改，并检查项目行为及质量验证命令。

主要功能

  1. 01Vue 3 反模式指导
  2. 02按问题选择规则
  3. 03渐进式安全修改
  4. 04遵循项目状态管理模式
  5. 05运行 lint、测试和构建检查

适用场景

  1. 01修复常见 Vue 3 反模式
  2. 02依据仓库规则检查代码
  3. 03限制生产环境修复的改动范围

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/frankiglesias/vue-best-practices --skill vue-best-practices

安装后在 Claude Code 中输入/vue-best-practices确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
rules/
avoid-any-in-public-component-apis.md
avoid-deep-watchers.md
avoid-fetch-in-mounted.md
avoid-global-component-registration.md
avoid-importing-vue-compiler-macros.md
avoid-mutable-singletons.md
avoid-mutating-props.md
cancel-stale-requests.md
cleanup-side-effects.md
defer-third-party-scripts.md
follow-eslint-format-contract.md
guard-browser-apis-on-server.md
handle-optional-data-safely.md
isolate-direct-dom-access.md
lazy-load-routes-and-heavy-components.md
move-data-logic-to-composables.md
prefer-computed-for-derived-state.md
prefer-tree-shakable-imports.md
prevent-hydration-mismatch.md
prevent-request-waterfalls.md
split-large-reactive-objects.md
stabilize-v-for-keys.md
type-composables-and-emits.md
use-onerrorcaptured-boundaries.md

详细介绍

Vue 最佳实践

将此技能用作规则手册，修复生产应用中常见的 Vue 3 反模式。

工作流

  1. 打开 AGENTS.md。
  2. 仅从 rules/ 中选择相关规则文件。
  3. 应用能够解决问题的最小安全改动。
  4. 重新检查行为，并运行项目的 lint、测试和构建检查。

仓库规范

  • 使用 Vue 3 Composition API 和 <script setup lang="ts">。
  • 遵循项目已采用的状态管理模式（Vuex、Pinia 等）。
  • 不要创建新的全局组件。
  • 除非用户明确要求，否则不要添加注释。
  • 不要从 vue 导入 Vue 编译器宏（defineProps、defineEmits、defineExpose、withDefaults）。
  • 遵循此仓库 ESLint 的默认风格：使用分号、单引号、多行内容末尾加逗号、缩进 2 个空格。

输出要求

  • 说明应用了哪些规则以及原因。
  • 优先使用组合式函数和纯工具函数，而非临时编写的组件逻辑。
  • 保持改动渐进；除非用户要求，否则避免大范围重写。

评论

支持 Markdown