Claude Code 前端开发agent - Vue 3 专家，集成项目初始化、组件生成和状态管理生成功能
npm install @ontology-platform/claude-pluginClaude Code 前端开发插件，包含 Vue 3 开发相关的 Skills 和 Agents。
``bash使用 npm
npm install -g @ontology-platform/claude-plugin
安装后，插件会自动将 skills 和 agents 安装到 Claude Code 的配置目录（
）。$3
如果你克隆了本仓库，可以手动复制
plugins/ 目录下的文件到 Claude Code 配置目录：`bash
Skills
cp plugins/skills/*.skill ~/.claude-code/skills/Agents
cp plugins/agents/*.agent ~/.claude-code/agents/
`包含的内容
$3
- frontend-cli - 前端项目初始化工具
- 使用文档
- Skill 配置
- vue-component-generator - Vue 3 组件生成器
- 使用文档
- Skill 配置
- pinia-store-generator - Pinia Store 生成器
- 使用文档
- Skill 配置
$3
- frontend-developer - Vue 3 前端开发专家
- 使用文档
- Agent 配置
项目结构
claude-code/
├── skills/ # Skills 源码目录
│ ├── frontend-cli/ # 前端 CLI skill
│ │ ├── SKILL.md # Skill 配置（给 Claude Code 看）
│ │ └── README.md # 使用文档（给用户看）
│ ├── pinia-store-generator/ # Pinia Store 生成器
│ │ ├── SKILL.md
│ │ └── README.md
│ └── vue-component-generator/ # Vue 组件生成器
│ ├── SKILL.md
│ └── README.md
│
├── agents/ # Agents 源码目录
│ └── frontend-developer/ # 前端开发 agent
│ ├── AGENT.md # Agent 配置（给 Claude Code 看）
│ └── README.md # 使用文档（给用户看）
│
├── plugins/ # Skills 和 Agents 打包输出目录
│ ├── skills/ # 打包后的 .skill 文件
│ └── agents/ # 打包后的 .agent 文件
│
├── dist/ # npm 包构建输出目录
│ ├── bin/ # CLI 可执行文件
│ ├── index.js # 主入口文件
│ └── ... # 其他编译后的文件
│
├── scripts/ # 构建脚本目录
│ ├── build-skill.ts # 构建单个 skill
│ ├── build-agent.ts # 构建单个 agent
│ └── build-all.ts # 构建所有
│
├── src/ # 源码目录
│ └── bin/ # CLI 工具源码
│ ├── install.ts # 安装脚本
│ └── uninstall.ts # 卸载脚本
│
└── package.json # 包配置文件
开发指南
$3
- Node.js >= 14.x
- pnpm (推荐) 或 npm
- TypeScript 5.x
$3
bash
pnpm install
`$3
bash
构建所有
pnpm run build构建单个 skill
pnpm run build:skill构建单个 agent
pnpm run build:agent构建所有 skills 和 agents
pnpm run build:all
`$3
bash
监听文件变化并自动构建
pnpm run dev
`$3
bash
pnpm run clean
`创建新的 Skill
1. 在
目录下创建新文件夹：`bash
mkdir skills/my-skill
`2. 创建必需文件：
skills/my-skill/
├── SKILL.md # Skill 配置（必需，给 Claude Code 看）
├── README.md # 使用文档（推荐，给用户看）
├── scripts/ # 脚本目录（可选）
└── references/ # 参考文档（可选）
3. 编辑
（给 Claude Code 看的配置）：`markdown
---
name: my-skill
description: Skill 描述
---My Skill
Skill 的详细说明...
`4. 编辑
（给用户看的使用文档）：`markdown
My Skill
使用说明...
`5. 构建：
bash
pnpm run build:skill
`创建新的 Agent
1. 在
目录下创建新文件夹：`bash
mkdir agents/my-agent
`2. 创建必需文件：
agents/my-agent/
├── AGENT.md # Agent 配置（必需，给 Claude Code 看）
├── README.md # 使用文档（推荐，给用户看）
└── skills/ # 集成的 skills（可选）
3. 编辑
（给 Claude Code 看的配置）：`markdown
---
name: my-agent
description: Agent 描述
model: inherit
---My Agent
Agent 的详细说明...
`4. 编辑
（给用户看的使用文档）：`markdown
My Agent
使用说明...
`5. 构建：
bash
pnpm run build:agent
`发布
$3
bash
确保已构建
pnpm run build发布
npm publish
`$3
使用 Changesets 管理版本：
bash
添加变更集
pnpm changeset更新版本
pnpm changeset version发布
pnpm changeset publish
`目录规范
$3
每个 skill 应包含：
-
- Skill 配置和说明（必需，给 Claude Code 看）
- README.md - 使用文档（推荐，给用户看）
- scripts/ - Python/Shell 脚本（可选）
- references/ - 参考文档和示例（可选）$3
每个 agent 应包含：
-
AGENT.md - Agent 配置和说明（必需，给 Claude Code 看）
- README.md - 详细的使用文档（推荐，给用户看）
- skills/ - 集成的 skill 文件（可选）版本信息
$3
| Skill | 版本 | 说明 |
| ----------------------- | ----- | ---------------------- |
| frontend-cli | 1.1.0 | 前端项目初始化工具 |
| pinia-store-generator | 1.0.0 | Pinia Store 模块生成器 |
| vue-component-generator | 1.0.0 | Vue 3 组件生成器 |
$3
| Agent | 版本 | 集成 Skills | 说明 |
| ------------------ | ----- | -------------------------------------------------------------------- | -------------------- |
| frontend-developer | 1.1.0 | frontend-cli, vue-component-generator, pinia-store-generator | Vue 3 前端开发专家 |
贡献指南
1. Fork 项目
2. 创建分支:
git checkout -b feature/my-feature
3. 提交更改:
4. 推送分支: MIT License
查看 CHANGELOG.md