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
120 changes: 58 additions & 62 deletions skills/antv-g2-chart/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,31 +21,42 @@ chart.options({
chart.render();
```

## Quick Reference
### CDN Usage

```html
<script src="https://unpkg.com/@antv/g2@5/dist/g2.min.js"></script>
<script>
const chart = new G2.Chart({ container: 'container', autoFit: true });
chart.options({
type: 'interval',
data: [{ genre: 'Sports', sold: 275 }],
encode: { x: 'genre', y: 'sold' },
});
chart.render();
</script>
```

| User Intent | Retrieve Query |
|---|---|
| Chart initialization, container, autoFit | `POST /api/v1/context {"query":"chart init","library":"g2","topK":3,"content":true}` |
| Bar / column chart | `POST /api/v1/context {"query":"bar chart interval","library":"g2","topK":5,"content":true}` |
| Line / area chart | `POST /api/v1/context {"query":"line area chart","library":"g2","topK":5,"content":true}` |
| Pie / donut / rose chart | `POST /api/v1/context {"query":"pie chart theta","library":"g2","topK":5,"content":true}` |
| Scatter / bubble | `POST /api/v1/context {"query":"scatter point bubble","library":"g2","topK":5,"content":true}` |
| Treemap / sunburst / pack | `POST /api/v1/context {"query":"treemap sunburst pack","library":"g2","topK":5,"content":true}` |
| Heatmap / density / boxplot | `POST /api/v1/context {"query":"heatmap density boxplot","library":"g2","topK":5,"content":true}` |
| Funnel / gauge / wordcloud | `POST /api/v1/context {"query":"funnel gauge wordcloud","library":"g2","topK":5,"content":true}` |
| Encode channels (x, y, color, size) | `POST /api/v1/context {"query":"encode channel","library":"g2","topK":3,"content":true}` |
| Scale / palette / color range | `POST /api/v1/context {"query":"scale palette color","library":"g2","topK":3,"content":true}` |
| Coordinate (polar, theta, transpose) | `POST /api/v1/context {"query":"coordinate polar theta transpose","library":"g2","topK":5,"content":true}` |
| Transform (stack, normalize, sort) | `POST /api/v1/context {"query":"transform stack normalize","library":"g2","topK":5,"content":true}` |
| Axis / legend / tooltip / labels | `POST /api/v1/context {"query":"axis legend tooltip label","library":"g2","topK":5,"content":true}` |
| Interaction (brush, highlight, drilldown) | `POST /api/v1/context {"query":"interaction brush highlight","library":"g2","topK":5,"content":true}` |
| Theme / dark mode | `POST /api/v1/context {"query":"theme dark classicDark","library":"g2","topK":3,"content":true}` |
| Animation | `POST /api/v1/context {"query":"animation animate","library":"g2","topK":3,"content":true}` |
| Data fetch / filter / sort | `POST /api/v1/context {"query":"data fetch filter sort","library":"g2","topK":3,"content":true}` |
| Facet / view composition | `POST /api/v1/context {"query":"facet view composition","library":"g2","topK":3,"content":true}` |
| Chart type selection guide | `POST /api/v1/context {"query":"chart type selection","library":"g2","topK":3,"content":true}` |
| Rendering troubleshoot | `POST /api/v1/context {"query":"rendering troubleshoot debug","library":"g2","topK":3,"content":true}` |
| Library constraints (MUST read first) | `POST /api/v1/info {"library":"g2"}` |
## Content Retrieval

Skill content is retrieved via an antv HTTP API server using GET requests.

### `GET /api/v1/context/retrieve`

Retrieve skills by query (hybrid search = FTS + vector + RRF fusion). Setting `includeConstraints=true` will auto-prepend the library core constraints as the first result.

| Parameter | Type | Required | Description |
|---|---|---|---|
| `query` | string | ✅ | Search keywords, e.g. `bar chart interval` |
| `library` | string | ✅ | Library name: `g2`, `g6`, `x6` |
| `topK` | number | | Number of results to return (default: 5) |
| `content` | boolean | | Return full reference doc markdown (default: true) |
| `includeConstraints` | boolean | | Prepend core constraints as the first result (default: true) |
| `maxTokens` | number | | Max tokens per result (default: unlimited) |
| `progressiveLevel` | number | | Progressive disclosure level: `0`=full, `1`=summary+code, `2`=summary-only |

```bash
curl "https://antv.antgroup.com/api/v1/context/retrieve?query=bar+chart+stacked&library=g2&includeConstraints=true"
```

## Critical Rules

Expand Down Expand Up @@ -169,45 +180,30 @@ coordinate: { type: 'transpose' }
coordinate: { transform: [{ type: 'transpose' }] }
```

## Content Retrieval

Skill content is retrieved via an antv HTTP API server.

Then use POST requests to retrieve relevant reference docs:

```bash
# Retrieve skills by query (hybrid search = FTS + vector + RRF)
curl -X POST https://antv.antgroup.com/api/v1/context \
-H 'Content-Type: application/json' \
-d '{"query":"bar chart stacked","library":"g2","topK":5,"content":true,"includeInfo":true}'

# Get core constraints (always read first before generating code)
curl -X POST https://antv.antgroup.com/api/v1/info \
-H 'Content-Type: application/json' \
-d '{"library":"g2"}'

# Get a specific skill by exact ID
curl -X POST https://antv.antgroup.com/api/v1/get \
-H 'Content-Type: application/json' \
-d '{"id":"g2-comp-axis-config"}'

# List all available skills
curl -X POST https://antv.antgroup.com/api/v1/list \
-H 'Content-Type: application/json' \
-d '{"library":"g2"}'
```

**Important**: Always call `/api/v1/info` first to load the core constraints, then `/api/v1/context` for specific topic docs. The `includeInfo: true` option in `/api/v1/context` automatically prepends constraints as the first result.

## How to Use

When a user asks about G2 chart development:
## Quick Reference

1. Call `POST /api/v1/info {"library":"g2"}` to load the core constraints
2. Identify the user's intent from the Quick Reference table above
3. Call `POST /api/v1/context` with the matching query, `content: true`, `includeInfo: true`
4. Generate code following the Critical Rules and retrieved reference docs
5. Always provide complete, runnable code examples
| User Intent | Retrieve Query |
|---|---|
| Chart initialization, container, autoFit | `GET /api/v1/context/retrieve?query=chart+init&library=g2` |
| Bar / column chart | `GET /api/v1/context/retrieve?query=bar+chart+interval&library=g2` |
| Line / area chart | `GET /api/v1/context/retrieve?query=line+area+chart&library=g2` |
| Pie / donut / rose chart | `GET /api/v1/context/retrieve?query=pie+chart+theta&library=g2` |
| Scatter / bubble | `GET /api/v1/context/retrieve?query=scatter+point+bubble&library=g2` |
| Treemap / sunburst / pack | `GET /api/v1/context/retrieve?query=treemap+sunburst+pack&library=g2` |
| Heatmap / density / boxplot | `GET /api/v1/context/retrieve?query=heatmap+density+boxplot&library=g2` |
| Funnel / gauge / wordcloud | `GET /api/v1/context/retrieve?query=funnel+gauge+wordcloud&library=g2` |
| Encode channels (x, y, color, size) | `GET /api/v1/context/retrieve?query=encode+channel&library=g2` |
| Scale / palette / color range | `GET /api/v1/context/retrieve?query=scale+palette+color&library=g2` |
| Coordinate (polar, theta, transpose) | `GET /api/v1/context/retrieve?query=coordinate+polar+theta+transpose&library=g2` |
| Transform (stack, normalize, sort) | `GET /api/v1/context/retrieve?query=transform+stack+normalize&library=g2` |
| Axis / legend / tooltip / labels | `GET /api/v1/context/retrieve?query=axis+legend+tooltip+label&library=g2` |
| Interaction (brush, highlight, drilldown) | `GET /api/v1/context/retrieve?query=interaction+brush+highlight&library=g2` |
| Theme / dark mode | `GET /api/v1/context/retrieve?query=theme+dark+classicDark&library=g2` |
| Animation | `GET /api/v1/context/retrieve?query=animation+animate&library=g2` |
| Data fetch / filter / sort | `GET /api/v1/context/retrieve?query=data+fetch+filter+sort&library=g2` |
| Facet / view composition | `GET /api/v1/context/retrieve?query=facet+view+composition&library=g2` |
| Chart type selection guide | `GET /api/v1/context/retrieve?query=chart+type+selection&library=g2` |
| Rendering troubleshoot | `GET /api/v1/context/retrieve?query=rendering+troubleshoot+debug&library=g2` |

## Dependencies

Expand Down
115 changes: 57 additions & 58 deletions skills/antv-g6-graph/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,27 +25,45 @@ const graph = new Graph({
await graph.render();
```

## Quick Reference
### CDN Usage

```html
<script src="https://unpkg.com/@antv/g6@5/dist/g6.min.js"></script>
<script>
const graph = new G6.Graph({
container: 'container',
data: {
nodes: [{ id: 'node-1', style: { labelText: 'Node 1' } }],
edges: [{ source: 'node-1', target: 'node-2' }],
},
layout: { type: 'force' },
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
});
graph.render();
Comment on lines +33 to +42

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 are two issues in this CDN usage example:

  1. Missing Node: The edges array references node-2 as a target, but node-2 is not defined in the nodes array. This will cause rendering or data integrity issues in G6.
  2. Constructor Consistency: The code uses new G6.Graph(...), which contradicts the Critical Rule defined later in this file: "MUST: Use new Graph({...}) — NOT v4 new G6.Graph()". Destructuring Graph from G6 first allows using new Graph(...) consistently.
Suggested change
const graph = new G6.Graph({
container: 'container',
data: {
nodes: [{ id: 'node-1', style: { labelText: 'Node 1' } }],
edges: [{ source: 'node-1', target: 'node-2' }],
},
layout: { type: 'force' },
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
});
graph.render();
const { Graph } = G6;
const graph = new Graph({
container: 'container',
data: {
nodes: [
{ id: 'node-1', style: { labelText: 'Node 1' } },
{ id: 'node-2', style: { labelText: 'Node 2' } },
],
edges: [{ source: 'node-1', target: 'node-2' }],
},
layout: { type: 'force' },
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
});
graph.render();

</script>
Comment on lines +31 to +43
```

| User Intent | Retrieve Query |
|---|---|
| Graph initialization, container, render | `POST /api/v1/context {"query":"graph init render","library":"g6","topK":3,"content":true}` |
| Network / force graph | `POST /api/v1/context {"query":"network force layout","library":"g6","topK":5,"content":true}` |
| Tree / mindmap / fishbone | `POST /api/v1/context {"query":"tree mindmap fishbone layout","library":"g6","topK":5,"content":true}` |
| Dagre / hierarchy / flow chart | `POST /api/v1/context {"query":"dagre hierarchy flow chart","library":"g6","topK":5,"content":true}` |
| Circular / radial / grid layout | `POST /api/v1/context {"query":"circular radial grid layout","library":"g6","topK":5,"content":true}` |
| Node styles (rect, circle, diamond, html) | `POST /api/v1/context {"query":"node style rect circle diamond html","library":"g6","topK":5,"content":true}` |
| Edge types (line, cubic, polyline, loop) | `POST /api/v1/context {"query":"edge line cubic polyline loop","library":"g6","topK":5,"content":true}` |
| Combo / group nodes | `POST /api/v1/context {"query":"combo group node","library":"g6","topK":3,"content":true}` |
| Custom node / edge | `POST /api/v1/context {"query":"custom node edge element","library":"g6","topK":3,"content":true}` |
| Behaviors (drag, zoom, click-select, hover) | `POST /api/v1/context {"query":"behavior drag zoom click-select hover","library":"g6","topK":5,"content":true}` |
| Plugins (minimap, tooltip, toolbar, legend) | `POST /api/v1/context {"query":"plugin minimap tooltip toolbar legend","library":"g6","topK":5,"content":true}` |
| Events system | `POST /api/v1/context {"query":"events system click mouse","library":"g6","topK":3,"content":true}` |
| State / style animation | `POST /api/v1/context {"query":"state animation transform","library":"g6","topK":3,"content":true}` |
| Data structure / transforms | `POST /api/v1/context {"query":"data structure transforms","library":"g6","topK":3,"content":true}` |
| Theme / background | `POST /api/v1/context {"query":"theme background style","library":"g6","topK":3,"content":true}` |
| Lasso select / collapse-expand | `POST /api/v1/context {"query":"lasso collapse expand select","library":"g6","topK":3,"content":true}` |
| Library constraints (MUST read first) | `POST /api/v1/info {"library":"g6"}` |
## Content Retrieval

Skill content is retrieved via an antv HTTP API server using GET requests.

### `GET /api/v1/context/retrieve`

Retrieve skills by query (hybrid search = FTS + vector + RRF fusion). Setting `includeConstraints=true` will auto-prepend the library core constraints as the first result.

| Parameter | Type | Required | Description |
|---|---|---|---|
| `query` | string | ✅ | Search keywords, e.g. `force layout node` |
| `library` | string | ✅ | Library name: `g2`, `g6`, `x6` |
| `topK` | number | | Number of results to return (default: 5) |
| `content` | boolean | | Return full reference doc markdown (default: true) |
| `includeConstraints` | boolean | | Prepend core constraints as the first result (default: true) |
| `maxTokens` | number | | Max tokens per result (default: unlimited) |
| `progressiveLevel` | number | | Progressive disclosure level: `0`=full, `1`=summary+code, `2`=summary-only |

```bash
curl "https://antv.antgroup.com/api/v1/context/retrieve?query=force+layout+node+style&library=g6&includeConstraints=true"
```

## Critical Rules

Expand Down Expand Up @@ -140,45 +158,26 @@ const graph = new Graph({ data });
const graph = new Graph({ container: 'container', data, ... });
```

## Content Retrieval

Skill content is retrieved via a local HTTP API server.

Then use POST requests to retrieve relevant reference docs:

```bash
# Retrieve skills by query (hybrid search = FTS + vector + RRF)
curl -X POST https://antv.antgroup.com/api/v1/context \
-H 'Content-Type: application/json' \
-d '{"query":"force layout node style","library":"g6","topK":5,"content":true,"includeInfo":true}'

# Get core constraints (always read first before generating code)
curl -X POST https://antv.antgroup.com/api/v1/info \
-H 'Content-Type: application/json' \
-d '{"library":"g6"}'

# Get a specific skill by exact ID
curl -X POST https://antv.antgroup.com/api/v1/get \
-H 'Content-Type: application/json' \
-d '{"id":"g6-core-graph-init"}'

# List all available skills
curl -X POST https://antv.antgroup.com/api/v1/list \
-H 'Content-Type: application/json' \
-d '{"library":"g6"}'
```

**Important**: Always call `/api/v1/info` first to load the core constraints, then `/api/v1/context` for specific topic docs. The `includeInfo: true` option in `/api/v1/context` automatically prepends constraints as the first result.

## How to Use

When a user asks about G6 graph development:
## Quick Reference

1. Call `POST /api/v1/info {"library":"g6"}` to load the core constraints
2. Identify the user's intent from the Quick Reference table above
3. Call `POST /api/v1/context` with the matching query, `content: true`, `includeInfo: true`
4. Generate code following the Critical Rules and retrieved reference docs
5. Always provide complete, runnable code examples
| User Intent | Retrieve Query |
|---|---|
| Graph initialization, container, render | `GET /api/v1/context/retrieve?query=graph+init+render&library=g6` |
| Network / force graph | `GET /api/v1/context/retrieve?query=network+force+layout&library=g6` |
| Tree / mindmap / fishbone | `GET /api/v1/context/retrieve?query=tree+mindmap+fishbone+layout&library=g6` |
| Dagre / hierarchy / flow chart | `GET /api/v1/context/retrieve?query=dagre+hierarchy+flow+chart&library=g6` |
| Circular / radial / grid layout | `GET /api/v1/context/retrieve?query=circular+radial+grid+layout&library=g6` |
| Node styles (rect, circle, diamond, html) | `GET /api/v1/context/retrieve?query=node+style+rect+circle+diamond+html&library=g6` |
| Edge types (line, cubic, polyline, loop) | `GET /api/v1/context/retrieve?query=edge+line+cubic+polyline+loop&library=g6` |
| Combo / group nodes | `GET /api/v1/context/retrieve?query=combo+group+node&library=g6` |
| Custom node / edge | `GET /api/v1/context/retrieve?query=custom+node+edge+element&library=g6` |
| Behaviors (drag, zoom, click-select, hover) | `GET /api/v1/context/retrieve?query=behavior+drag+zoom+click-select+hover&library=g6` |
| Plugins (minimap, tooltip, toolbar, legend) | `GET /api/v1/context/retrieve?query=plugin+minimap+tooltip+toolbar+legend&library=g6` |
| Events system | `GET /api/v1/context/retrieve?query=events+system+click+mouse&library=g6` |
| State / style animation | `GET /api/v1/context/retrieve?query=state+animation+transform&library=g6` |
| Data structure / transforms | `GET /api/v1/context/retrieve?query=data+structure+transforms&library=g6` |
| Theme / background | `GET /api/v1/context/retrieve?query=theme+background+style&library=g6` |
| Lasso select / collapse-expand | `GET /api/v1/context/retrieve?query=lasso+collapse+expand+select&library=g6` |

## Dependencies

Expand Down
Loading
Loading