# agent-skills

**Repository Path**: liangxp/agent-skills

## Basic Information

- **Project Name**: agent-skills
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-30
- **Last Updated**: 2026-06-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SKILLS 集合

本仓库包含使用OpenTiny各产品开发相关的技能工具。

## 安装使用

### 方式一：通过 Claude Code Skills Market 添加（Claude Code用户推荐）

使用 Claude Code 内置的插件市场功能，可以快速安装 OpenTiny 技能。

```bash
# 启动claude code后添加市场及插件，也可以执行/plugin后在界面交互式添加及管理
/plugin marketplace add https://github.com/opentiny/opentiny-agent-skills
/plugin install tiny-vue-skill@opentiny-skills

# 或者在未启动状态可以执行下面命令添加市场及插件
claude plugin marketplace add https://github.com/opentiny/opentiny-agent-skills
claude plugin install tiny-vue-skill@opentiny-skills
```

### 方式二：使用 `skills` 工具安装

`skills` 是 vercel-labs 提供的一个npm 工具命令，辅助我们安装skill到本地环境上，详细内容请参见其[README.md](https://github.com/vercel-labs/skills)。 它支持列出 github 仓库中的 skills, 以及自动安装到用户工程或用户全局的位置。

```bash
  # 列出所有的可能技能
  npx skills add opentiny/agent-skills --list

  # 全局安装 tiny-vue-skill， 支持 claude-code/vs code
  npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent claude-code

  # 项目级安装 tiny-vue-skill， 支持 claude-code/vs code
  npx skills add opentiny/agent-skills --skill tiny-vue-skill --agent claude-code

```

### 方式三：克隆复制式使用

1. 克隆仓库到本地，然后将`skills` 文件夹复制到用户工程或都用户全局配置的指定路径中,具体位置请参考各IDE/CLI 的官方文档。以下为部分工具的安装位置：

<!-- available-agents:start -->

| Agent          | `--agent`        | 项目内路径          | 全局路径                        |
| -------------- | ---------------- | ------------------- | ------------------------------- |
| Amp            | `amp`            | `.agents/skills/`   | `~/.config/agents/skills/`      |
| Antigravity    | `antigravity`    | `.agent/skills/`    | `~/.gemini/antigravity/skills/` |
| Claude Code    | `claude-code`    | `.claude/skills/`   | `~/.claude/skills/`             |
| Clawdbot       | `clawdbot`       | `skills/`           | `~/.clawdbot/skills/`           |
| Codex          | `codex`          | `.codex/skills/`    | `~/.codex/skills/`              |
| Cursor         | `cursor`         | `.cursor/skills/`   | `~/.cursor/skills/`             |
| Droid          | `droid`          | `.factory/skills/`  | `~/.factory/skills/`            |
| Gemini CLI     | `gemini-cli`     | `.gemini/skills/`   | `~/.gemini/skills/`             |
| GitHub Copilot | `github-copilot` | `.github/skills/`   | `~/.copilot/skills/`            |
| Goose          | `goose`          | `.goose/skills/`    | `~/.config/goose/skills/`       |
| Kilo Code      | `kilo`           | `.kilocode/skills/` | `~/.kilocode/skills/`           |
| Kiro CLI       | `kiro-cli`       | `.kiro/skills/`     | `~/.kiro/skills/`               |
| OpenCode       | `opencode`       | `.opencode/skills/` | `~/.config/opencode/skills/`    |
| Roo Code       | `roo`            | `.roo/skills/`      | `~/.roo/skills/`                |
| Trae           | `trae`           | `.trae/skills/`     | `~/.trae/skills/`               |
| Windsurf       | `windsurf`       | `.windsurf/skills/` | `~/.codeium/windsurf/skills/`   |

<!-- available-agents:end -->

### 方式四：使用 `npx` 命令安装（目前只支持下载tiny-vue-skill）

```bash
  npx --yes git+https://github.com/opentiny/agent-skills.git
```
>安装限制
> ·`npx` 的方式依赖 `NodeJS`环境（推荐 `Node 22+` 以上 `LTS` 版本）
>
#### 安装后效果
```bash
  ~/.config/opencode/skills/tiny-vue-skill
```

> **IMPORTANT**: 不同的AI IDE/CLI， 对skill的配置可能不同，请严格参考其文档进行配置路径。

> **IMPORTANT**: TinyVue组件也会定期升级，需要重新复制或重新执行 skills add 命令来更新Skill 。

> **通过市场安装的优势**: 使用 `claude plugin marketplace` 安装后，可以使用 `claude plugin update` 命令轻松更新技能。

## 在 vscode 中启用skill

按快捷键 `ctrl + ,` 打开设置界面，搜索 `useagentskills` 会看到实验性支持`Use Agent Skills`功能， 勾选启用即可。

## 同步最新的TinyVue文档/示例

随着TinyVue的不断开发，此仓库的Skill资源肯定会落后于主仓库。需要同步时，手工执行一下”同步TinyVue仓库“的Github Action即可！

## 如何添加新的 Skill

本仓库采用 Claude Code Plugin Marketplace 规范结构，添加新技能需要以下步骤：

### 1. 创建技能目录结构

在 `skills/` 目录下创建新的技能目录：

```bash
mkdir -p skills/your-skill-name/.claude-plugin
```

### 2. 创建插件配置文件

在 `skills/your-skill-name/.claude-plugin/plugin.json` 中定义插件元数据：

```json
{
  "name": "your-skill-name",
  "description": "技能的简短描述",
  "version": "1.0.0",
  "author": {
    "name": "OpenTiny"
  },
  "license": "MIT"
}
```

### 3. 创建技能定义文件

在 `skills/your-skill-name/SKILL.md` 中定义技能：

```markdown
---
name: your-skill-name
description: 技能的详细描述
license: MIT
metadata:
  author: OpenTiny
  version: '1.0.0'
---

# 技能说明

这里是技能的详细使用说明...
```

之后可以按需添加其他的技能文档或者脚本等

### 4. 更新市场配置

在 `.claude-plugin/marketplace.json` 的 `plugins` 数组中添加新技能：

```json
{
  "name": "your-skill-name",
  "source": "./skills/your-skill-name",
  "description": "技能的简短描述",
  "version": "1.0.0",
  "author": {
    "name": "OpenTiny"
  },
  "license": "MIT",
  "tags": ["tag1", "tag2"],
  "keywords": ["keyword1", "keyword2"]
}
```

### 目录结构示例

```
skills/
├── your-skill-name/
│   ├── .claude-plugin/
│   │   └── plugin.json          # 插件元数据
│   └── SKILL.md                 # 技能定义文件
└── tiny-vue-skill/              # 现有技能
    └── ...
```

### 注意事项

- 技能名称使用 kebab-case（小写字母和连字符）
- 语义化版本号遵循 SemVer 规范
- 更新版本后记得同步修改 `plugin.json` 和 `marketplace.json`

## 使用示例

使用以下语句测试：

1. 在test目录中，新建一个vue工程，然后安装TinyVue组件，使用Grid组件开发一个中国省级信息查询的表格，要求有：序号，省名，人口，面积，GDP等信息，这些信息要支持排序的功能，省名的列要冻结在最左边。 表格的顶部有过滤查询省名的功能。

2. 为当前TinyVue的工程增加深色模式的能力