[!WARNING] 此仓库可能会被 nuxt-skill.onmax.me 取代。敬请关注。

_{设计灵感来自 HugoRCD 的作品}

面向 AI 编码助手的 Vue、Nuxt 和 NuxtHub 技能。

🔗 相关 Nuxt RFC：在 Nuxt 模块中打包代理技能

安装

npx skills add onmax/nuxt-skills

skills CLI 会自动检测您已安装的代理，并提供交互式选择器。使用 -g 可进行全局（用户范围）安装，或使用 -y 来安装所有技能。 支持 Claude Code、Cursor、Codex、OpenCode、GitHub Copilot、Antigravity、Roo Code 等。

Claude Code 市场

对于 Claude Code 用户，另一种方式是：

# 添加市场
/plugin marketplace add onmax/nuxt-skills

# 安装单个技能
/plugin install vue@nuxt-skills
/plugin install nuxt@nuxt-skills

# 安装多个技能
/plugin install vue@nuxt-skills nuxt@nuxt-skills nuxt-ui@nuxt-skills

手动安装

克隆仓库并将技能文件夹复制到您的代理技能目录中：

代理	项目路径	全局路径
Claude Code	.claude/skills/	~/.claude/skills/
Cursor	.cursor/skills/	~/.cursor/skills/
Codex	.codex/skills/	~/.codex/skills/
OpenCode	.opencode/skill/	~/.config/opencode/skill/
Copilot	.github/skills/	—

技能列表

技能	描述
vue	Vue 3 Composition API、组件、组合函数、测试
nuxt	Nuxt 4+ 服务器路由、路由、中间件、配置
nuxt-modules	使用 defineNuxtModule 创建 Nuxt 模块、Kit 工具、测试
nuxthub	NuxtHub v0.10 数据库、KV、Blob、缓存、多云
nuxt-content	Nuxt Content v3 集合、查询、MDC 渲染、NuxtStudio
nuxt-ui	Nuxt UI v4 组件、主题化、表单、覆盖层、组合函数
nuxt-better-auth	使用 @onmax/nuxt-better-auth 进行认证、useUserSession、路由保护、clientOnly
reka-ui	Reka UI 无头 Vue 组件、可访问性原语、props/emits/slots
document-writer	为 Nuxt 生态系统编写文档——MDC、样式、结构、代码示例
ts-library	TypeScript 库的编写——导出、tsdown、API 模式、类型技巧、CI
motion	Motion Vue 动画——motion 组件、组合函数、滚动、手势
vueuse	VueUse 组合函数——状态、浏览器、传感器、网络、动画工具
nuxt-seo	Nuxt SEO 元模块——robots、站点地图、og-image、schema-org、站点配置
vitest	Vitest 测试——测试 API、模拟、覆盖率、类型测试、环境
vite	Vite 构建工具——配置、插件、HMR、SSR、库模式、性能
pnpm	pnpm 包管理器——工作空间、目录、CLI 命令、CI/CD
tsdown	tsdown 打包工具——TypeScript 库、DTS 生成、包验证
tresjs	TresJS 3D 框架——TresCanvas、Cientos 辅助工具、后处理效果
writing-web-documentation	编写和审查开发者文档——页面类型、内部风格、模板、Web 项目规则

技能的工作原理

技能遵循 Agent Skills 开放格式。它们可以通过两种方式激活：

1. 自动发现——代理会读取每个技能的 description，并在与您的任务相关时加载该技能。
2. 手动调用——输入 /技能名（例如 /nuxt），即可显式加载该技能。

您正在处理...	代理可能会自动加载...
.vue 文件	vue 技能
server/api/ 路由	nuxt 技能
nuxt.config.ts	nuxt 技能
NuxtHub 存储	nuxthub 技能
认证/登录/会话	nuxt-better-auth

结构

遵循 agentskills 标准格式。

nuxt-skills/
├── skills/                 # 技能（agentskills 格式）
│   ├── vue/
│   │   ├── SKILL.md        # 具有 frontmatter 的入口文件
│   │   └── references/     # 按需加载的子文件
│   ├── nuxt/
│   ├── nuxt-modules/
│   ├── nuxthub/
│   ├── nuxt-content/
│   ├── nuxt-ui/
│   ├── nuxt-better-auth/
│   ├── reka-ui/
│   ├── document-writer/
│   ├── ts-library/
│   ├── motion/
│   ├── vueuse/
│   ├── nuxt-seo/
│   ├── vitest/
│   ├── vite/
│   ├── pnpm/
│   ├── tsdown/
│   ├── tresjs/
│   └── writing-web-documentation/
└── .claude-plugin/
    └── marketplace.json    # Claude Code 市场

自动化维护

技能通过 GitHub Actions 保持最新：

工作流	定期执行	目的
update-skills.yml	每周（周一）	从上游仓库重新生成 reka-ui、nuxt-ui 和 vueuse 的文档
skill-maintenance.yml	每两周一次（每月1日和15日）	Claude 分析上游的变更日志，如有需要则创建 Pull Request

维护工作流使用 claude-code-action 来智能检测来自上游源的重大变更、新功能以及弃用内容。

资源

• Agent Skills 规范 - 用于扩展 AI 代理能力的开放格式
• Claude Code 技能 - Claude Code 中的技能
• VS Code 代理技能 - VS Code 中的 GitHub Copilot 技能
• GitHub 代理技能文档 - 关于代理技能的介绍
• OpenCode 技能 - OpenCode 中的代理技能
• awesome-copilot - 社区整理的自定义代理和提示集合

致谢

• vue 技能中的注意事项来自 vuejs-ai/skills 的 vue-best-practices（200 多条规则）
• vitest、vite、pnpm、tsdown 技能来自 @antfu 的 skills

许可证

MIT

nuxt-skills 快速上手指南

nuxt-skills 是一套专为 AI 编程助手（如 Claude Code、GitHub Copilot、Cursor 等）设计的技能包，旨在提升 AI 在 Vue、Nuxt 及 NuxtHub 生态中的代码生成质量与上下文理解能力。

环境准备

• 系统要求：支持 macOS、Linux 或 Windows（需安装 Node.js 环境）
• 前置依赖：
  • 已安装任意支持的 AI 编程助手（如 Claude Code、Cursor、GitHub Copilot 等）
  • 已安装 Node.js (推荐 v18+) 和 npm/pnpm
  • 确保已安装 skills CLI 工具（通常随支持的 Agent 自动安装或可手动安装）

💡 提示：国内开发者若遇到 npm 源访问慢的问题，建议切换至淘宝镜像源：

npm config set registry https://registry.npmmirror.com

安装步骤

方式一：使用 CLI 自动安装（推荐）

运行以下命令，CLI 将自动检测你安装的 AI 助手并引导选择：

npx skills add onmax/nuxt-skills

• 添加 -g 参数可进行全局安装（对所有项目生效）：

  npx skills add onmax/nuxt-skills -g
  

• 添加 -y 参数可跳过交互，直接安装所有技能：

  npx skills add onmax/nuxt-skills -y
  

方式二：Claude Code 用户专属（通过 Marketplace）

如果你使用的是 Claude Code，也可通过其插件市场安装：

# 添加市场源
/plugin marketplace add onmax/nuxt-skills

# 安装单个技能
/plugin install vue@nuxt-skills
/plugin install nuxt@nuxt-skills

# 一次性安装多个技能
/plugin install vue@nuxt-skills nuxt@nuxt-skills nuxt-ui@nuxt-skills

方式三：手动安装（高级用户）

克隆仓库并将对应技能文件夹复制到你的 AI 助手技能目录：

git clone https://github.com/onmax/nuxt-skills.git

根据你使用的 Agent，复制 skills/ 下的对应文件夹到以下路径之一：

Agent	项目级路径	全局路径
Claude Code	.claude/skills/	~/.claude/skills/
Cursor	.cursor/skills/	~/.cursor/skills/
Codex	.codex/skills/	~/.codex/skills/
OpenCode	.opencode/skill/	~/.config/opencode/skill/
Copilot	.github/skills/	—

例如，为 Cursor 全局安装 nuxt 技能：

cp -r nuxt-skills/skills/nuxt ~/.cursor/skills/

基本使用

安装完成后，技能将根据你的工作内容自动激活，也可手动调用。

自动激活示例

当你在项目中编辑以下文件时，AI 会自动加载对应技能：

• 编辑 .vue 文件 → 自动加载 vue 技能
• 编写 server/api/ 路由 → 自动加载 nuxt 技能
• 修改 nuxt.config.ts → 自动加载 nuxt 技能
• 操作 NuxtHub 存储 → 自动加载 nuxthub 技能
• 处理登录/会话逻辑 → 自动加载 nuxt-better-auth 技能

手动调用示例

在聊天窗口中输入 /技能名 即可显式加载特定技能：

/nuxt 请帮我创建一个带有中间件的用户认证路由

/vue 如何用 Composition API 重写这个组件？

/nuxt-ui 生成一个带表单验证的登录页面

技能加载后，AI 将基于该领域的最佳实践提供更精准、符合规范的代码建议。