チャート可視化エージェントスキル

チャート可視化スキル

データを視覚言語に変換し、より良い思考を実現します。

概要

データドリブンな意思決定の時代において、効率的かつ正確なデータ可視化と分析が最も重要です。AntVはプロフェッショナルな可視化ソリューション群を提供し、チャート設計からインタラクティブな探索、深いデータ分析に至るワークフロー全体をカバーする堅牢なツールキットと包括的なスキルセットを提供します。ユーザーは複雑なデータセットを直感的なビジュアルチャートに素早く変換でき、インテリジェントなデザイン仕様と豊富なコンポーネントライブラリによって作成のハードルを大幅に下げます。日常的なレポート作成、動的なダッシュボード、高度なインタラクティブ分析のいずれにおいても、AntVは信頼性の高いサポートを提供します。AI機能の統合により、これらのツールは可視化の生成と最適化をさらに効率化し自動化します。これにより、アナリストは洞察の発見とビジネス上の意思決定により集中できるようになり、データを真に可視化し理解可能にします。

[!WARNING] このプロジェクトはAIが生成したコードをマージするだけです。

貢献方法:

1. 問題を明確に説明するIssueを作成してください
2. 要件とともに@copilotにアサインしてください

使用方法

このマーケットプレイスをClaude Codeに追加します：

/plugin marketplace add antvis/chart-visualization-skills

または、複数のエージェントに対して直接スキルをインストールすることもできます：

npx skills add antvis/chart-visualization-skills

利用可能なスキル

• 📊 chart-visualization: AntVを活用した包括的なチャート生成スキルで、26種類以上のチャートタイプによるインテリジェントなデータ可視化を提供します。

Chart Visualizationは、利用可能な26種類以上のチャートタイプから最適なものをインテリジェントに選択し、詳細な仕様に基づいてパラメータを抽出して高品質なチャート画像を生成します。時系列、比較、部分対全体、関係性、地理、階層、統計、特殊な可視化をカバーしています。

• 🎨 infographic-creator: 与えられたテキストコンテンツに基づいて美しいインフォグラフィックを作成します。ユーザーがインフォグラフィックの作成を依頼したときに使用します。

Infographic Creatorは、AntV Infographicを使用してデータ、情報、知識を知覚可能な視覚言語に変換します。視覚デザインとデータ可視化を組み合わせ、50以上のテンプレート（リスト、シーケンス、階層、比較、関係、チャートなど）を提供します。直感的な記号で複雑な情報を圧縮し、オーディエンスが重要なポイントを素早く理解し記憶できるようにします。

• 🖼️ icon-retrieval: アイコンライブラリからアイコンSVG文字列を検索して取得します。デフォルトで最大5つの一致するアイコンを返します（カスタマイズ可能）。

Icon Searchは、インフォグラフィック、Web開発、デザインなど様々なユースケースに適したアイコンを見つけるのを支援します。キーワードで検索し、利用可能なアイコンを発見し、そのSVG文字列を直接取得します。各検索では、デフォルトで最大5つの一致するアイコン（topKパラメータでカスタマイズ可能）がURLと完全なSVGコンテンツとともに返されます。

• 📝 narrative-text-visualization: T8 Syntaxを使用して、データから構造化されたナラティブテキスト可視化を生成します。

Narrative Text Visualization（T8）は、T8 Syntax（エンティティ注釈付きのデータナラティブを作成するための宣言的Markdown風言語）を使用して、非構造化データを意味的に豊かなナラティブレポートに変換します。LLMフレンドリーでフレームワークに依存せず、HTML、React、Vueとシームレスに動作します。メトリクス、値、トレンド、ディメンションなどのエンティティが適切にラベル付けされたデータ分析レポート、サマリー、インサイトドキュメントの作成に最適です。組み込みのミニチャート、標準化されたスタイリング、プロフェッショナルなフォーマットが特徴です。本物のデータソースをサポートし、軽量でテクノロジーに依存しないレンダリングを提供します。

• 📋 antv-s2-expert: S2多次元クロス分析テーブル開発アシスタント。ユーザーがS2ピボットテーブル、テーブルシート、または@antv/s2関連の開発で支援が必要なときに使用します。

AntV S2 Expertは、S2多次元クロス分析テーブルエンジンを使った開発を支援します。@antv/s2コアエンジン、@antv/s2-reactおよび@antv/s2-vueフレームワークバインディング、@antv/s2-react-components高度な分析コンポーネント、@antv/s2-ssrサーバーサイドレンダリングに関する包括的なガイダンスを提供します。ピボットテーブル、テーブルシート、カスタムセル、テーマ設定、イベント、インタラクション、ソート、合計、ツールチップ、固定行/列、アイコン、ページネーションなどをカバーします。

• 🕸️ antv-g6-graph: G6 v5グラフ可視化コードジェネレーター。ユーザーがネットワークグラフ、ツリーグラフ、フローチャート、マインドマップ、および関係性やグラフ構造化データの可視化をG6ライブラリで生成する必要があるときに使用します。

AntV G6 Graphは、ベストプラクティスに従った正確で実行可能なG6 v5コードを生成します。コアグラフの初期化、データ構造（ノード、エッジ、コンボ）、10以上のレイアウトアルゴリズム（force、dagre、circular、grid、mindmap、fishboneなど）、すべての組み込みノード/エッジ/コンボタイプ、状態管理、15以上のビヘイビア（drag-canvas、zoom-canvas、click-select、lassoなど）、10以上のプラグイン（minimap、tooltip、toolbar、legend、timebarなど）、カスタムエレメント開発、トランスフォーム、アニメーションをカバーします。非推奨のG6.Graph()コンストラクタ、graph.data() API、Modeベースのビヘイビア設定など、v4からv5への移行でよくある落とし穴を防ぐガードレールが組み込まれています。

• 📈 antv-g2-chart: G2 v5チャートコードジェネレーター。ユーザーが棒グラフ、折れ線グラフ、円グラフ、散布図、面グラフ、ヒートマップなどの統計データ可視化をG2ライブラリで生成する必要があるときに使用します。

AntV G2 Chartは、Spec Modeのベストプラクティスに従った正確で実行可能なG2 v5コードを生成します。30以上のチャートタイプ（interval、line、area、point、rect、cell、treemap、sankey、chord、wordCloud、gaugeなど）、データ変換（stackY、dodgeX、binX、foldなど）、座標系（cartesian、polar、theta、radial）、スケール、インタラクション（brush、slider、legend filter）、コンポーネント（axis、legend、tooltip、annotation）、マルチビューコンポジションをカバーします。非推奨のチェーンAPI、無効なパレット名、ユーザーコード内でのd3参照など、v4からv5への移行でよくある落とし穴を防ぐガードレールが組み込まれています。

評価結果

Harness Engineeringアプローチは174のチャート生成テストケースに対して厳密にテストされ、ベースライン手法に対する大幅な改善を示しました：

この結果は、Harness EngineeringによってLLMが本番環境に近い精度（最大98.2%）を達成でき、Context7ベースラインアプローチを大幅に上回ることを示しています。

[!TIP] さらに多くのスキルが近日公開予定です。

ライブラリの使用

CLIとAPIを使って、Node.jsプロジェクトでライブラリとして使用できます。

CLIの使用

ターミナルで簡単に使用できるantvという名前のCLIツールも提供しています。グローバルにインストールしてください：

npm install -g @antv/chart-visualization-skills

クエリによるスキルの取得または一覧表示:

# クエリでスキルを取得（メタデータのみ）
antv retrieve "bar chart" --library g2 --topk 10

# 完全なマークダウンコンテンツを含むスキルを取得（コア制約は自動的に先頭に追加されます）
antv retrieve "bar chart" --library g2 --content

# スキルを取得してJSONとして出力
antv retrieve "bar chart" --library g2 --output json

# 正確なIDでスキルを取得
antv get g2-mark-interval-basic --library g2

# 利用可能なすべてのスキルを一覧表示
antv list --library g2 --category core

# スキルを一覧表示してJSONとして出力
antv list --output json

# スキル情報を表示（SKILL.mdからのコア制約）
antv info --library g2

# スキル情報をJSONとして表示
antv info --library g2 --output json

コマンドの使用方法:

使用方法: antv [オプション] [コマンド]

AntVチャート可視化スキル取得のためのCLIツール

オプション:
  -V, --version               バージョン番号を出力
  -h, --help                  コマンドのヘルプを表示

コマンド:
  retrieve [オプション] <クエリ>  クエリに一致するスキルを検索
  get [オプション] <ID>          正確なIDでスキルを取得
  list [オプション]              利用可能なすべてのスキルを一覧表示
  info [オプション]              SKILL.mdからのスキル情報を表示
  help [コマンド]              コマンドのヘルプを表示

retrieveのオプション:
  --library <lib>             ライブラリでフィルタ（例: g2, g6）
  --topk <n>                  返す結果の数（デフォルト: 7）
  --content                   結果にマークダウンコンテンツ本体を含める；コア制約（SKILL.mdセクション1-2）は常に最初の結果として先頭に追加される
  --output <format>           出力形式: json | text（デフォルト: "text"）

注意: --contentは常にライブラリのコア制約（SKILL.mdのセクション1と2、<!-- CONSTRAINTS:END -->マーカーまで）を最初の結果として先頭に追加し、モデルが参照ドキュメントとともに必須ルールを確実に受け取るようにします。

APIの使用

import { retrieve } from '@antv/chart-visualization-skills';

// メタデータのみ（コンテンツなし）
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// 完全なマークダウンコンテンツを含む（コア制約は自動的に最初の結果として先頭に追加）
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// コンテンツあり、コア制約なし
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

retrieve(query: string, options?: RetrieveOptions): Skill[]

interface RetrieveOptions {
  library?: string;   // ライブラリフィルタ、例: 'g2' または 'g6'
  topK?: number;      // 結果の数（デフォルト: 7）
  content?: boolean;  // マークダウンコンテンツ本体を含める（デフォルト: false）
  includeInfo?: boolean; // SKILL.mdのコア制約を先頭に追加（デフォルト: contentと同じ）
}

注:

• デフォルトの取得では、contentフィールドのない軽量な結果オブジェクトが返されます。
• content: trueはマークダウンコンテンツ本体を返します（フロントマターメタデータは除外されます）。
• includeInfoがtrue（content: trueの場合のデフォルト）の場合、コア制約ブロック — SKILL.mdの<!-- CONSTRAINTS:END -->まで — が最初の要素（IDに__info__のプレフィックスが付く）として挿入され、モデルが常に必須ルールを確認できるようにします。

import { info } from '@antv/chart-visualization-skills';

const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }

info(library?: string): SkillInfo | undefined

interface SkillInfo {
  name: string;
  description: string;
  content: string;            // SKILL.mdの本文全体（フロントマターの後）
  constraintsContent: string; // <!-- CONSTRAINTS:END -->マーカーまでのSKILL.md本文; includeInfo: trueのときにretrieveによって挿入される
}

ライセンス

MITライセンス - 詳細はLICENSEファイルを参照してください。