Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 51 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ npx skills add antvis/chart-visualization-skills

`AntV S2 Expert` helps users develop with the S2 multi-dimensional cross-analysis table engine. It provides comprehensive guidance on `@antv/s2` core engine, `@antv/s2-react` and `@antv/s2-vue` framework bindings, `@antv/s2-react-components` advanced analysis components, and `@antv/s2-ssr` server-side rendering. Covers pivot tables, table sheets, custom cells, theming, events, interactions, sorting, totals, tooltips, frozen rows/columns, icons, pagination, and more.

- 📈 **g2-chart**: G2 v5 chart code generator. Use when users need to generate G2 charts — bar charts, line charts, pie charts, scatter plots, area charts, heatmaps, and any statistical data visualization with the G2 library.
- 📈 **antv-g2-chart**: G2 v5 chart code generator. Use when users need to generate G2 charts — bar charts, line charts, pie charts, scatter plots, area charts, heatmaps, and any statistical data visualization with the G2 library.

`G2 Chart` generates accurate, runnable G2 v5 code following Spec Mode best practices. It covers 30+ chart types (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge, and more), data transforms (stackY, dodgeX, binX, fold, etc.), coordinate systems (cartesian, polar, theta, radial), scales, interactions (brush, slider, legend filter), components (axis, legend, tooltip, annotation), and multi-view compositions. Built-in guard rails prevent common v4→v5 migration pitfalls such as using deprecated chain APIs, invalid palette names, or referencing `d3` in user code.
`AntV G2 Chart` generates accurate, runnable G2 v5 code following Spec Mode best practices. It covers 30+ chart types (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge, and more), data transforms (stackY, dodgeX, binX, fold, etc.), coordinate systems (cartesian, polar, theta, radial), scales, interactions (brush, slider, legend filter), components (axis, legend, tooltip, annotation), and multi-view compositions. Built-in guard rails prevent common v4→v5 migration pitfalls such as using deprecated chain APIs, invalid palette names, or referencing `d3` in user code.

**Evaluation Results**

Expand All @@ -71,6 +71,55 @@ The results show that Harness Engineering enables LLMs to achieve near-productio
> [!TIP]
> More skills are coming soon.

## CLI Usage

We also provide a CLI tool for easy usage in your terminal, Install globally:

```bash
npm install -g chart-visualization-skills
```

**Retrieve or list skills by query**:

```bash
# Retrieve skills by query
chart-visualization-cli retrieve "bar chart" --library g2 --topk 10

# List all available skills
chart-visualization-cli list --library g2 --category core
```

**Usage for the command**:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

There's a leading space in this markdown heading which should be removed. Also, the title Usage for the command is a bit vague. Consider changing it to something more descriptive like Command Help Output to clarify that the following block shows the output of the help command.

Suggested change
**Usage for the command**:
**Command Help Output**:


```

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better syntax highlighting and accessibility, it's good practice to add a language identifier to fenced code blocks. For this block, which contains command-line help text, text would be appropriate.

Suggested change
```
```text

Usage: chart-visualization-cli [options] [command]

CLI tool for AntV chart visualization skills retrieval

Options:
-V, --version output the version number
-h, --help display help for command

Commands:
retrieve [options] <query> Search for skills matching a query
list [options] List all available skills
help [command] display help for command
```

## API Usage

```typescript
import { retrieve } from 'chart-visualization-skills';

const skills = retrieve('bar chart', 'g2', 5);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The current API usage example retrieve('bar chart', 'g2', 5) is correct, but since 'g2' is the default library, the example could be simplified to better showcase the use of default parameters. Using retrieve('bar chart') would be a more concise example that relies on both default library and topk values, which are documented in the table below.

Suggested change
const skills = retrieve('bar chart', 'g2', 5);
const skills = retrieve('bar chart');

```

| Parameter | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `query` | `string` | — | Search query |
| `library` | `string` | `'g2'` | Library filter (`g2` or `g6`) |
| `topk` | `number` | `7` | Number of results |

## License

MIT License - see the [LICENSE](LICENSE) file for details.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The file is missing a newline character at the end. It's a common convention to end files with a newline to prevent issues with file concatenation and some command-line tools.

Suggested change
MIT License - see the [LICENSE](LICENSE) file for details.
MIT License - see the [LICENSE](LICENSE) file for details.

2 changes: 1 addition & 1 deletion skills/g2/SKILL.md → skills/antv-g2-chart/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
name: g2-chart
name: antv-g2-chart
description: Generate G2 v5 chart code. Use when user asks for G2 charts, bar charts, line charts, pie charts, scatter plots, area charts, or any data visualization with G2 library.
---

Expand Down
4 changes: 2 additions & 2 deletions src/scripts/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const SKILLS_DIR = path.join(PKG_ROOT, 'skills');
const INDEX_DIR = path.join(PKG_ROOT, 'src', 'index');

const LIBRARY_PATHS: Record<string, string> = {
g2: 'g2/references',
g6: 'g6/references',
g2: 'antv-g2-chart/references',
g6: 'antv-g6-graph/references',
};

function parseFrontMatter(content: string): FrontMatter {
Expand Down
Loading