做 AI 友好的开源 Vue3 模板 🌈

Hello，我是 pany，好久不见~

我是开源项目 V3 Admin Vite / MobVue 的作者，这是我为提升它们的 AI Coding 体验而进行的第二期实践，旨在争做 AI 友好的 Vue 模板

早在一年前，我写了第一篇采用 Rules 的实践方案 第一款 AI 友好的开源 Vue3 模板 🌈，但是随着 AI 的发展，这已经远远不够了，所以需要在此基础上继续提升 AI Coding 体验！

让我们来一起看看如何实现这一想法

背景

程序员群体的 AI Coding 覆盖率已经接近 100%，虽然 AI 愈发强大，但是在让 AI 针对特定项目进行编码时依旧容易出现输出代码不理想的情况

为了减少这种情况的发生，V3 Admin Vite 开源项目在已有 Rules 的基础上，新增项目级约定和 Skills，以确保更可靠的 AI 输出

目标

完成项目级约定和 Skills 内置，让 AI Agent 更懂我们的项目、输出理想的代码

前置知识

这部分内容参考自 Claude Code 文档 features-overview

你需要先懂得区分它们三者：

方面	CLAUDE.md	Rules	Skill
加载	每次会话	每次会话，或打开匹配的文件时	按需，被调用或相关时
范围	整个项目	可以限定在文件路径范围内	特定的任务
最适合	核心约定和构建命令	特定语言或目录的指南	参考材料、可重复的工作流
何时使用	项目约定、"始终执行 X" 规则	/	可重用内容、参考文档、可重复的任务
示例	使用 pnpm，而不是 npm；提交前运行测试。	/	/deploy运行部署检查清单；熟悉 API 文档和端点模式

总结

• 对于每个会话需要的说明，使用 CLAUDE.md ： 构建命令、测试约定、项目架构
• 使用 Rules 来保持 CLAUDE.md 专注： 带有 paths frontmatter 的 Rules 仅在 Claude 处理匹配的文件时加载，节省上下文
• 对于 Claude 有时只需要的内容，使用 Skills ： 如 API 文档或您使用 /<skill-name> 触发的部署清单
• CLAUDE.md + Skills 的组合： CLAUDE.md 保存始终开启的规则，Skills 保存按需加载的参考材料。例如 CLAUDE.md 里说 "遵循我们的 API 约定"，Skill 则包含完整的 API 风格指南

翻译翻译

• CLAUDE.md： 每次都生效的通用约定
• Rules： 每次但局部生效的规则
• Skills： 按需并且局部场景固定的执行步骤

本期实现

新增项目级约定

Claude Code 文档将 CLAUDE.md 解释为项目上下文和约定

并规定了将其内容保持为 Claude 应该在每个会话中保持的事实，比如构建命令、约定、项目架构、"总是做 X" 规则，如果一个条目是多步骤过程或仅对代码库的一部分重要，需将其移到 Skill 或 Rules 中

为了更好地让 AI 理解项目、遵守约定，所以新增 AGENTS.md、CLAUDE.md 两个根目录配置文件，具体内容需包含以下模块（保持内容在 200 行以内）：

• 命令
• 架构
• 约定

在实践中，我选择在开源项目 andrej-karpathy-skills 的基础上完善以上三个模块

这个开源项目通过简单的四条原则来有效约束 AI 的输出和避免 AI 的陷阱，在实践中非常有效！

值得注意的是：

• CLAUDE.md 文件作用于 Claude Code 工具
• AGENTS.md 文件作用于 Cursor、Antigravity、Trae、CodeX 等工具

所以我们优先输出更加通用的 AGENTS.md 文件，然后将 AGENTS.md 与 CLAUDE.md 关联，避免书写两份一模一样的约定文件

新增项目 Skills

Claude Code 文档将 Skill 定义为可重用的知识和可调用的工作流

通常，你可以选择 skill-creator 这个官方工具来协助你完成你想要的 Skill，它比自己从零开始编写效率更高

如果你想仔细地学习如何写好一个 Skill，可以阅读：如何写好一个 Skill

在实践中，我们先将编写好的 Skill 存放在更加通用的 .agents/skills/ 目录下，然后与 .claude/skills/ 关联（关联方案采用软链接命令：ln -s，目的依旧是避免书写两份一模一样的文件）

针对 V3 Admin Vite 我们首期新增了以下项目 Skill（并严格保持每个 Skill 内容在 500 行以内）：

• v3-create-crud：创建增删改查页面
• v3-upsert-store：创建或更新全局状态
• v3-upsert-route：创建或更新路由表
• v3-use-utils：内置工具使用教程
• v3-use-composables：内置组合式函数使用教程

将这些后台管理系统中高频出现的需求抽象成 Skill 以后，AI Agent 能更加准确地产出你想要的代码并准确地实现你的需求

安装社区 Skills

除了项目 Skill，项目还引入了社区里对编写 Vue 项目非常友好的第三方 Skill，它们包括但不限于：

• pinia
• pnpm
• unocss
• vite
• vitest
• vue
• vue-best-practices
• vue-router-best-practices
• vue-testing-best-practices

它们主要来自于仓库：antfu/skills

这些第三方 Skill 以 skills-lock.json 文件的形式记录，Skill 本身并非默认包含在项目中。如果有需要，你可以运行 npx skills experimental_install 命令将它们安装到本地即可。安装后可在 .agents/skills/ 目录下找到它们

实践总结

至此，我们阶段性实现了标题提到的 AI 友好的开源 Vue3 模板

基于这套方案并配合软链接的方式，目前已支持了 Claude Code、CodeX、Cursor、Trae、Antigravity 等主流 AI Coding 工具

但，随着 AI Agent 的快速发展，将来可能还会有更多不一样的最佳实践，让我们共同期待~

源码

• 直达约定文件：AGENTS.md
• 直达技能目录：Skills
• 直达规则目录：Rules

获取开源项目完整代码：V3 Admin Vite / MobVue