Add chart-visualization skill with 20 supported chart types and remove old prompts

[Copilot]

Implements a chart visualization skill for data visualization recommendations and GPT-Vis syntax generation, replacing the old prompts directory.

Structure

skills/chart-visualization/
├── SKILL.md          # Main skill (610 lines): metadata, workflow, chart table, syntax intro, framework integration, 20 examples
└── references/       # 21 knowledge files (20 charts + overview) with simplified names

Coverage

20 supported chart types:

• Statistical (17): line, column, bar, pie, area, scatter, dual-axes, histogram, boxplot, radar, funnel, waterfall, liquid, word-cloud, violin, venn, treemap
• Flow (1): sankey
• Data Display (2): table, summary

All charts match the actual exports in src/index.ts.

SKILL.md Structure

1. Metadata: YAML frontmatter with skill name and description following standard skill format
2. Workflow: Intent Recognition & Chart Selection → Syntax Generation → Code Generation (HTML/React/Vue)
3. Chart Table: Includes 名称, 别名, 英文名, 适用场景, 分析意图 for all 20 charts
4. Syntax Introduction: Overview of GPT-Vis syntax and features
5. Framework Integration: Complete examples for HTML/Vanilla JavaScript, React, and Vue with streaming support
6. Syntax Examples: One example per chart with reference links to detailed documentation

Example

vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
  - time 2022
    value 150
title 年度数据趋势

Framework Integration Example

import { GPTVis } from '@antv/gpt-vis';

const gptVis = new GPTVis({
  container: '#container',
  width: 600,
  height: 400,
});

gptVis.render(visSyntax);

Changes

• ✅ Added chart visualization skill structure at skills/chart-visualization/ with SKILL.md and references
• ✅ Added standard skill metadata frontmatter with name: chart-visualization and comprehensive description
• ✅ Removed legacy prompts/ directory (6 files) as it is superseded by the new skill
• ✅ Only included 20 charts that are actually supported by GPT-Vis (removed 7 unsupported charts)
• ✅ Added comprehensive framework integration examples for HTML, React, and Vue
• ✅ Simplified reference filenames (e.g., "折线图 - Line Chart.md" → "line.md")
• ✅ Enhanced Summary example with complex T8 syntax demonstrating semantic annotations
• ✅ Fixed all reference links to use clean paths without URL encoding
• ✅ Added Chart Skill links to both README files (English and Chinese) in the main navigation

README Updates

The Chart Skill is now prominently featured in the repository navigation:

English: 📖 Documentation • 🤖 Chart Skill • 🧠 Knowledge Base • 🎮 Try Demo • 🔌 MCP Server

Chinese: 📖 文档 • 🤖 图表技能 • 🧠 知识库 • 🎮 在线体验 • 🔌 MCP 服务器

The new skill provides a structured approach to chart visualization recommendations with proper workflow, framework integration, and syntax examples.

Original prompt

创建一个标准的 claude skill，名字为 chart-visualization，需要用到数据可视化的都可以使用。要求：

1. 放到 skills/chart-visualization 目录中。
2. 符合 claude skill 规范。
3. 需要包含现在支持图表的内容。包含：介绍，包含的图表结合，推荐逻辑，以及每一个图表一个最简案例，详细的知识库放到 references 中
4. knowledges 目录的知识库可以作为参考，相应图表的内容可以从 knowledges 复制到 skills/chart-visualization/references 中。

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1642612

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[hustcc]

@copilot 删除 prompts 目录。

[hustcc]

fixed #336

[Copilot]

@copilot 删除 prompts 目录。

Done. Removed the prompts directory in commit 0a287b6. The old prompts are superseded by the new Claude skill at skills/chart-visualization/.

[hustcc]

@copilot 不是很好，几个修改点：

1. skill.md 大写 SKILL.md
2. skill 中的 readme 不需要，删除
3. 目前本项目支持的图表如下，不支持的不需要放进来：

export { Area } from './vis/area';
export { Bar } from './vis/bar';
export { Boxplot } from './vis/boxplot';
export { Column } from './vis/column';
export { DualAxes } from './vis/dual-axes';
export { Funnel } from './vis/funnel';
export { Histogram } from './vis/histogram';
export { Line } from './vis/line';
export { Liquid } from './vis/liquid';
export { Pie } from './vis/pie';
export { Radar } from './vis/radar';
export { Sankey } from './vis/sankey';
export { Scatter } from './vis/scatter';
export { Summary } from './vis/summary';
export { Table } from './vis/table';
export { Treemap } from './vis/treemap';
export { Venn } from './vis/venn';
export { Violin } from './vis/violin';
export { Waterfall } from './vis/waterfall';
export { WordCloud } from './vis/word-cloud';

3. SKILL.md 的大概内容为：

   • Workflow：先根据用户的意图，选择最合适的图表类型，然后根据图表类型和数据，生成 syntax 语法，最后基于 html、react、vue 中的一种，生成可渲染的代码
   • 图表简单介绍的表格（名称、别名、场景和意图）
   • Syntax 的简单介绍
   • Syntax 案例：每一个图表提供一个 Syntax 的简单案例，更多介绍参考 references/<chart_type>.md
   • Syntax 使用：介绍在 html、react、vue 中怎么结合 gpt-vis 渲染 syntax

4. references 中只保留已经支持的 20 个图表，内容和 knowledges 保持一致，文件命名 使用 <chart_type>.md

基于上述在生成一个版本。

[Copilot]

@copilot 不是很好，几个修改点：

1. skill.md 大写 SKILL.md
   ...

All changes completed in commit a964184:

1. ✅ Renamed skill.md to SKILL.md (uppercase)
2. ✅ Deleted README.md from skill directory
3. ✅ Removed 7 unsupported charts, kept only 20 supported charts matching src/index.ts exports
4. ✅ Restructured SKILL.md with:
   • Workflow section (Intent Recognition → Syntax Generation → Code Generation)
   • Chart table with 名称、别名、英文名、适用场景、分析意图
   • Syntax introduction
   • Syntax examples for each chart with references to detailed docs

[hustcc]

@copilot 继续修改：

1. skill.md 中 summary syntax 不需要前缀： vis summary，另外这个案例有太简单了，稍微复杂一点。
2. skill.md 中增加 介绍在 html、react、vue 中怎么结合 gpt-vis 渲染 syntax
3. references 中文件命名改一下，比如 折线图 - Line.md 就改成 line.md ，这样会简洁很多

[Copilot]

@copilot 继续修改：

1. skill.md 中 summary syntax 不需要前缀： vis summary，另外这个案例有太简单了，稍微复杂一点。
   ...

All changes completed in commit f345355:

1. ✅ Fixed Summary syntax - removed "vis summary" prefix and created a complex Q4 sales report example with T8 semantic annotations (metric_name, metric_value, ratio_value, dim_value, contribute_ratio, etc.)

2. ✅ Added Framework Integration section with complete examples for:

   • HTML/Vanilla JavaScript
   • React (with hooks)
   • Vue 3 (Composition API)
   • Streaming support for AI token-by-token output

3. ✅ Simplified all reference filenames:

   • "折线图 - Line Chart.md" → "line.md"
   • "饼图 - Pie Chart.md" → "pie.md"
   • All 21 files renamed and links updated in SKILL.md

[hustcc]

@copilot syntax 案例中 「详细用法参考: references/sankey.md」 中的路径也改一下。

[Copilot]

@copilot syntax 案例中 「详细用法参考: references/sankey.md」 中的路径也改一下。

Fixed in commit 186006e. Updated all 20 reference links to use simplified filenames without URL encoding (e.g., references/sankey.md instead of references/桑基图%20-%20Sankey%20Chart.md).

[hustcc]

@copilot 将 SKILL 加到 readme 中。Knowledge Base 的前面。

📖 Documentation • 🧠 Knowledge Base • 🎮 Try Demo • 🔌 MCP Server

[Copilot]

@copilot 将 SKILL 加到 readme 中。Knowledge Base 的前面。

📖 Documentation • [🧠 Knowledge Base](https://github.com/antvis/GPT-Vis/blob/ai/knowledge...

Added in commit 442b7b1. Claude Skill link is now in both README files (English and Chinese) positioned before Knowledge Base:

• English: "🤖 Claude Skill"
• Chinese: "🤖 Claude 技能"

[hustcc]

@copilot skill.md 不符合标准，需要在头部有 skill 的名称和描述 的 meta 信息。下面可以参考：

---
name: narrative-text-visualization
description: Generate structured narrative text visualizations from data using T8 Syntax. Use when users want to create data interpretation reports, summaries, or structured articles with semantic entity annotations. T8 is designed for unstructured data visualization where T stands for Text and 8 represents a byte of 8 bits, symbolizing deep insights beneath the text.
---

markdown 中的 skill 不要加 Claude 前缀。

[Copilot]

@copilot skill.md 不符合标准，需要在头部有 skill 的名称和描述 的 meta 信息。下面可以参考：

...

Fixed in commit 1642612:

1. ✅ Added standard skill metadata frontmatter with name: chart-visualization and comprehensive description
2. ✅ Removed "Claude" prefix from all references:
   • README.md: "Claude Skill" → "Chart Skill"
   • README.zh-CN.md: "Claude 技能" → "图表技能"