Skip to content

Commit 2c8ca8c

Browse files
AarebeccaAarebecca
authored
chore: update skills (#129)
* chore: adjust skills path and naming * docs: fix readme code * chore: add auto release workflow * docs: update site and readme to show how to use skills * chore: correct skills naming
1 parent 83a891d commit 2c8ca8c

17 files changed

Lines changed: 321 additions & 56 deletions

File tree

‎.github/workflows/release.yml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
name: release
2+
3+
on:
4+
push:
5+
tags:
6+
- "*"
7+
8+
permissions:
9+
contents: write
10+
11+
jobs:
12+
release:
13+
runs-on: ubuntu-latest
14+
steps:
15+
- name: ⤵️ Checkout
16+
uses: actions/checkout@v4
17+
18+
- name: 📦 Package skills
19+
run: zip -r ../skills.zip .
20+
working-directory: .skills
21+
22+
- name: 🚀 Create release
23+
uses: softprops/action-gh-release@v2
24+
with:
25+
files: skills.zip
26+
generate_release_notes: true

SKILL.md renamed to .skills/infographic-creator/SKILL.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
name: infographic-creation
2+
name: infographic-creator
33
description: Create beautiful infographics based on the given text content. Use this when users request creating infographics.
44
---
55

.skills/infographic-item-generator/SKILL.md renamed to .skills/infographic-item-creator/SKILL.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
name: infographic-item-generator
2+
name: infographic-item-creator
33
description: Generate or update infographic Item components for this repo (TypeScript/TSX in src/designs/items). Use when asked to design, implement, or modify data item visuals, layout logic, or registerItem composites.
44
---
55

.skills/infographic-item-generator/references/item-prompt.md renamed to .skills/infographic-item-creator/references/item-prompt.md

File renamed without changes.

.skills/infographic-structure-generator/SKILL.md renamed to .skills/infographic-structure-creator/SKILL.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
name: infographic-structure-generator
2+
name: infographic-structure-creator
33
description: Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
44
---
55

6-
# Infographic Structure Generator
6+
# Infographic Structure Creator
77

88
## Overview
99

.skills/infographic-structure-generator/references/structure-prompt.md renamed to .skills/infographic-structure-creator/references/structure-prompt.md

File renamed without changes.

.skills/infographic-syntax-generator/SKILL.md renamed to .skills/infographic-syntax-creator/SKILL.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
name: infographic-syntax-generator
2+
name: infographic-syntax-creator
33
description: Generate AntV Infographic syntax outputs. Use when asked to turn user content into the Infographic DSL (template selection, data structuring, theme), or to output `infographic <template>` plain syntax.
44
---
55

6-
# Infographic Syntax Generator
6+
# Infographic Syntax Creator
77

88
## Overview
99

.skills/infographic-syntax-generator/references/prompt.md renamed to .skills/infographic-syntax-creator/references/prompt.md

File renamed without changes.

‎README.md‎

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@ const infographic = new Infographic({
7979
infographic.render(`
8080
infographic list-row-simple-horizontal-arrow
8181
data
82-
items:
83-
- label: Step 1
84-
desc: Start
85-
- label: Step 2
86-
desc: In Progress
87-
- label: Step 3
88-
desc: Complete
82+
items
83+
- label Step 1
84+
desc Start
85+
- label Step 2
86+
desc In Progress
87+
- label Step 3
88+
desc Complete
8989
`);
9090
```
9191

@@ -109,6 +109,42 @@ for (const chunk of chunks) {
109109

110110
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e_PFSZrR9AQAAAAASdAAAAgAemJ7AQ/original" width="480" alt="AntV Infographic Streaming Rendering">
111111

112+
## 🔧 Skills Integration
113+
114+
AntV Infographic provides skills to integrate with AI agents:
115+
116+
- **infographic-creator**: Create an HTML file that renders an infographic
117+
- **infographic-syntax-creator**: Generate infographic syntax from descriptions
118+
- **infographic-structure-creator**: Generate custom structure designs
119+
- **infographic-item-creator**: Generate custom item designs
120+
- **infographic-template-updater**: (For developers) update the template library
121+
122+
### Claude Code
123+
124+
> We don't have a Claude marketplace entry yet, so install manually.
125+
126+
```bash
127+
set -e
128+
129+
VERSION=0.2.4 # Replace <VERSION> with the latest tag, e.g. 0.2.4
130+
BASE_URL=https://github.com/antvis/Infographic/archive/refs/tags
131+
mkdir -p ./claude/skills
132+
133+
curl -L -o skills.zip "$BASE_URL/$VERSION/skills.zip"
134+
tar -xf skills.zip -C ./claude/skills
135+
rm -f skills.zip
136+
```
137+
138+
### Codex
139+
140+
> Enter codex
141+
142+
```codex
143+
# Replace <SKILL> with the skill name, e.g. infographic-creator
144+
# https://github.com/antvis/Infographic/tree/main/.skills/<SKILL>
145+
$skill-installer install https://github.com/antvis/Infographic/tree/main/.skills/infographic-creator
146+
```
147+
112148
## 💬 Community & Communication
113149

114150
- Submit your questions or suggestions on GitHub

‎README.zh-CN.md‎

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@ const infographic = new Infographic({
7979
infographic.render(`
8080
infographic list-row-simple-horizontal-arrow
8181
data
82-
items:
83-
- label: Step 1
84-
desc: Start
85-
- label: Step 2
86-
desc: In Progress
87-
- label: Step 3
88-
desc: Complete
82+
items
83+
- label Step 1
84+
desc Start
85+
- label Step 2
86+
desc In Progress
87+
- label Step 3
88+
desc Complete
8989
`);
9090
```
9191

@@ -109,6 +109,42 @@ for (const chunk of chunks) {
109109

110110
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e_PFSZrR9AQAAAAASdAAAAgAemJ7AQ/original" width="480" alt="AntV Infographic 流式渲染">
111111

112+
## 🔧 Skills 集成
113+
114+
AntV Infographic 提供了多项能力，便于与 AI 大模型集成：
115+
116+
- **infographic-creator**：创建一个渲染信息图的 HTML 文件
117+
- **infographic-syntax-creator**：根据描述生成信息图语法
118+
- **infographic-structure-creator**：生成自定义的结构设计
119+
- **infographic-item-creator**：生成自定义的数据项设计
120+
- **infographic-template-updater**：（开发者使用）用于更新信息图模板库
121+
122+
### Claude Code
123+
124+
> 我们暂未提供 claude marketplace，因此需要手动集成。
125+
126+
```bash
127+
set -e
128+
129+
VERSION=0.2.4 # 将 VERSION 替换为最新版本号，例如 0.2.4
130+
BASE_URL=https://github.com/antvis/Infographic/archive/refs/tags
131+
mkdir -p ./claude/skills
132+
133+
curl -L -o skills.zip "$BASE_URL/$VERSION/skills.zip"
134+
tar -xf skills.zip -C ./claude/skills
135+
rm -f skills.zip
136+
```
137+
138+
### Codex
139+
140+
> 进入 codex
141+
142+
```codex
143+
# 将 <SKILL> 替换为需要安装的 skill 名称，例如 infographic-creator
144+
# https://github.com/antvis/Infographic/tree/main/.skills/<SKILL>
145+
$skill-installer install https://github.com/antvis/Infographic/tree/main/.skills/infographic-creator
146+
```
147+
112148
## 💬 社区与交流
113149

114150
- 在 GitHub 提交你的问题或建议

0 commit comments

Comments
 (0)