以后 vue 开发者可以解放双手了。Vue AI 正式发布，由 Vue 技术大佬 SerKo 开发，尤雨溪也转发推荐了。

GitHub 仓库地址：https://github.com/vuejs-ai/skills

安装方式

直接安装

npx skills add vuejs-ai/skills

Claude Code 应用市场安装（专属方式）

Claude Code 用户可以通过以下方式使用：

# 添加技能市场源
/plugin marketplace add vuejs-ai/skills

# 安装单个技能
/plugin install create-adaptable-composable@vue-skills

# 批量安装多个技能
/plugin install create-adaptable-composable@vue-skills vue-best-practices@vue-skills

使用方式

为确保最佳效果，请在提示词开头添加固定前缀：

Use vue skill, <你的具体需求>

这个前缀会显式触发对应技能，确保 AI 严格遵循文档约定的开发范式。如果省略前缀，技能触发效果可能不稳定，取决于你的提示词与技能描述关键词的匹配度。

可用技能列表

目前 Vue AI 技能包包含以下技能：

• vue-best-practices：遵循 Vue 最佳实践，优化代码结构

• create-adaptable-composable：创建灵活的组合式函数

• 更多技能持续更新中

使用示例

1. vue-best-practices 技能

需求提示词：

Use vue skill, create a todo app

使用技能后的优化点：

• 代码可读性显著提升

• 组件按职责拆分更合理

• 状态逻辑抽离至独立组合式函数（useTodos.ts）

• 基础类型响应式数据使用 shallowRef 优化性能

2. create-adaptable-composable 技能

这个技能衍生自 serkodev/vue-skills 仓库的 create-agnostic-composable 技能。

需求提示词：

Use vue skill, create a reusable composable for controlling hidden for a element

生成代码示例：

export interface UseHiddenOptions {
  hidden?: MaybeRef<boolean> // 支持响应式/非响应式布尔值
  initialHidden?: MaybeRefOrGetter<boolean> // 支持 getter 函数/响应式/普通值
  syncAria?: boolean // 是否同步 aria-hidden 属性
}

export function useHidden(
  target?: MaybeRefOrGetter<htmlElement | null | undefined>, // 元素引用支持多类型输入
  options: UseHiddenOptions = {},
) {
  // 组合式函数逻辑...
}

使用技能后的优化点：

• 输入参数采用 MaybeRef 和 MaybeRefOrGetter 类型，兼顾响应式灵活性

• 支持多种参数传入方式，使用更灵活

• 类型定义完整，开发体验更好

写在最后

Vue AI 技能包的发布，意味着 Vue 开发者可以更高效地使用 AI 辅助开发。这些技能内置了 Vue 的最佳实践和常见模式，能帮你写出更规范、更易维护的代码。

不用再担心 AI 生成的 Vue 代码不符合规范，也不用每次都要手动调整代码结构。装好技能包，加个前缀，剩下的交给 AI。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13477