npm package: @ontology-platform/claude-plugin
Description: Claude Code 前端开发agent - Vue 3 专家，集成项目初始化、组件生成和状态管理生成功能
Author: 志刚
Latest version: 1.0.2

# @ontology-platform/claude-plugin

Claude Code 前端开发插件，包含 Vue 3 开发相关的 Skills 和 Agents。

## 安装

### 全局安装（推荐）

```bash
# 使用 npm
npm install -g @ontology-platform/claude-plugin

# 使用 pnpm
pnpm add -g @ontology-platform/claude-plugin

# 使用 yarn
yarn global add @ontology-platform/claude-plugin
```

安装后，插件会自动将 skills 和 agents 安装到 Claude Code 的配置目录（`~/.claude-code/`）。

### 手动安装

如果你克隆了本仓库，可以手动复制 `plugins/` 目录下的文件到 Claude Code 配置目录：

```bash
# Skills
cp plugins/skills/*.skill ~/.claude-code/skills/

# Agents
cp plugins/agents/*.agent ~/.claude-code/agents/
```

## 包含的内容

### Skills

- **frontend-cli** - 前端项目初始化工具
  - [使用文档](./skills/frontend-cli/README.md)
  - [Skill 配置](./skills/frontend-cli/SKILL.md)

- **vue-component-generator** - Vue 3 组件生成器
  - [使用文档](./skills/vue-component-generator/README.md)
  - [Skill 配置](./skills/vue-component-generator/SKILL.md)

- **pinia-store-generator** - Pinia Store 生成器
  - [使用文档](./skills/pinia-store-generator/README.md)
  - [Skill 配置](./skills/pinia-store-generator/SKILL.md)

### Agents

- **frontend-developer** - Vue 3 前端开发专家
  - [使用文档](./agents/frontend-developer/README.md)
  - [Agent 配置](./agents/frontend-developer/AGENT.md)

## 项目结构

```
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               # 包配置文件
```

## 开发指南

### 环境要求

- Node.js >= 14.x
- pnpm (推荐) 或 npm
- TypeScript 5.x

### 安装依赖

```bash
pnpm install
```

### 构建

```bash
# 构建所有
pnpm run build

# 构建单个 skill
pnpm run build:skill

# 构建单个 agent
pnpm run build:agent

# 构建所有 skills 和 agents
pnpm run build:all
```

### 开发模式

```bash
# 监听文件变化并自动构建
pnpm run dev
```

### 清理构建产物

```bash
pnpm run clean
```

## 创建新的 Skill

1. 在 `skills/` 目录下创建新文件夹：

```bash
mkdir skills/my-skill
```

2. 创建必需文件：

```
skills/my-skill/
├── SKILL.md              # Skill 配置（必需，给 Claude Code 看）
├── README.md             # 使用文档（推荐，给用户看）
├── scripts/              # 脚本目录（可选）
└── references/           # 参考文档（可选）
```

3. 编辑 `SKILL.md`（给 Claude Code 看的配置）：

```markdown
---
name: my-skill
description: Skill 描述
---

# My Skill

Skill 的详细说明...
```

4. 编辑 `README.md`（给用户看的使用文档）：

```markdown
# My Skill

使用说明...
```

5. 构建：

```bash
pnpm run build:skill
```

## 创建新的 Agent

1. 在 `agents/` 目录下创建新文件夹：

```bash
mkdir agents/my-agent
```

2. 创建必需文件：

```
agents/my-agent/
├── AGENT.md              # Agent 配置（必需，给 Claude Code 看）
├── README.md             # 使用文档（推荐，给用户看）
└── skills/               # 集成的 skills（可选）
```

3. 编辑 `AGENT.md`（给 Claude Code 看的配置）：

```markdown
---
name: my-agent
description: Agent 描述
model: inherit
---

# My Agent

Agent 的详细说明...
```

4. 编辑 `README.md`（给用户看的使用文档）：

```markdown
# My Agent

使用说明...
```

5. 构建：

```bash
pnpm run build:agent
```

## 发布

### 发布到 npm

```bash
# 确保已构建
pnpm run build

# 发布
npm publish
```

### 版本管理

使用 [Changesets](https://github.com/changesets/changesets) 管理版本：

```bash
# 添加变更集
pnpm changeset

# 更新版本
pnpm changeset version

# 发布
pnpm changeset publish
```

## 目录规范

### Skills 规范

每个 skill 应包含：

- `SKILL.md` - Skill 配置和说明（必需，给 Claude Code 看）
- `README.md` - 使用文档（推荐，给用户看）
- `scripts/` - Python/Shell 脚本（可选）
- `references/` - 参考文档和示例（可选）

### Agents 规范

每个 agent 应包含：

- `AGENT.md` - Agent 配置和说明（必需，给 Claude Code 看）
- `README.md` - 详细的使用文档（推荐，给用户看）
- `skills/` - 集成的 skill 文件（可选）

## 版本信息

### Skills

| Skill                   | 版本  | 说明                   |
| ----------------------- | ----- | ---------------------- |
| frontend-cli            | 1.1.0 | 前端项目初始化工具     |
| pinia-store-generator   | 1.0.0 | Pinia Store 模块生成器 |
| vue-component-generator | 1.0.0 | Vue 3 组件生成器       |

### Agents

| 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. 提交更改: `git commit -m "Add my feature"`
4. 推送分支: `git push origin feature/my-feature`
5. 创建 Pull Request

## 许可

MIT License

## 更新日志

查看 [CHANGELOG.md](./CHANGELOG.md)

## 相关资源

- [Claude Code 文档](https://docs.anthropic.com/claude-code)
- [Vue 3 文档](https://vuejs.org/)
- [TypeScript 文档](https://www.typescriptlang.org/)
- [Pinia 文档](https://pinia.vuejs.org/)