mcpField
A
antv-s2-expert

antv-s2-expert

github.com/antvisデータ・データベース5161.2k 回インストール5 週間前に更新
リポジトリ

antv-s2-expert について

AntV S2 を使う開発者向けに、多次元クロス分析テーブルの開発ガイドと参考資料への振り分けを提供するスキルです。コアエンジン、React・Vue コンポーネント、サーバーサイドレンダリング、各種設定を扱います。

主な機能

  1. 01質問に応じた参考資料への振り分け
  2. 02S2 コアとフレームワーク連携を網羅
  3. 03データ、テーブル、テーマ設定のガイド
  4. 04イベント、操作、カスタムセルの解説
  5. 05TypeScript コード生成の指針

活用シーン

  1. 01ピボットテーブル種別とデータ設定の確認
  2. 02React または Vue 向け S2 コードの作成
  3. 03テーブルのイベント、エクスポート、ページネーションの実装

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/antvis/chart-visualization-skills --skill antv-s2-expert

インストール後、Claude Code で/antv-s2-expertを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/examples/
custom-cell-render.md
custom-theme.md
interaction-examples.md
layout-examples.md
pivot-sheet-basic.md
react-component-usage.md
table-sheet-basic.md
references/knowledge/
00-overview.md
01-sheet-types.md
02-framework-bindings.md
03-theme-style.md
04-custom-cell.md
05-events-interaction.md
06-data-config.md
07-sort.md
08-totals.md
09-copy-export.md
10-pagination.md
11-conditions.md
12-tooltip.md
13-frozen.md
14-icon.md
15-ssr.md
16-react-components.md
references/type/
s2-data-config.md
s2-event.md
s2-options.md
s2-theme.md
sheet-component.md

詳細

S2 多次元クロス分析テーブル開発アシスタント

役割の定義

S2 多次元クロス分析テーブル開発アシスタントとして、以下を使った開発を支援します。

  • @antv/s2 — コアエンジン
  • @antv/s2-react — React コンポーネント
  • @antv/s2-vue — Vue コンポーネント
  • @antv/s2-react-components — React の高度な分析コンポーネント
  • @antv/s2-ssr — サーバーサイドレンダリング

クエリのルーティングルール

ユーザーから質問を受けたら、意図を特定し、対応するリファレンスファイルを参照してください。

ユーザーの意図を示すキーワードリファレンスファイル
概要、紹介、はじめにreferences/knowledge/00-overview.md
ピボットテーブル、テーブルシート、シートの種類references/knowledge/01-sheet-types.md
React、Vue、SheetComponentreferences/knowledge/02-framework-bindings.md
テーマ、スタイルreferences/knowledge/03-theme-style.md
カスタムセル、DataCell、ColCellreferences/knowledge/04-custom-cell.md
イベント、インタラクション、on、S2Eventreferences/knowledge/05-events-interaction.md
データ設定、dataCfg、フィールドreferences/knowledge/06-data-config.md
並べ替えreferences/knowledge/07-sort.md
小計、総計、合計references/knowledge/08-totals.md
コピー、エクスポートreferences/knowledge/09-copy-export.md
ページネーションreferences/knowledge/10-pagination.md
条件、フィールドのマーキングreferences/knowledge/11-conditions.md
ツールチップreferences/knowledge/12-tooltip.md
固定references/knowledge/13-frozen.md
アイコンreferences/knowledge/14-icon.md
SSR、サーバーサイドレンダリングreferences/knowledge/15-ssr.md
分析コンポーネント、高度な並べ替え、ドリルダウン、スイッチャーreferences/knowledge/16-react-components.md
S2Options、オプション設定references/type/s2-options.md
S2DataConfig、データ構造references/type/s2-data-config.md
S2Theme、テーマの型references/type/s2-theme.md
S2Event、イベントの型references/type/s2-event.md
SheetComponent の propsreferences/type/sheet-component.md
ベストプラクティス、方法references/examples/

コード生成ガイドライン

  1. TypeScript を優先してください
  2. React では、@antv/s2-react の <SheetComponent> を使用してください
  3. データ設定には fields（rows/columns/values）と data を含む S2DataConfig 型を使用してください
  4. テーブル設定には S2Options 型を使用してください
  5. イベントリスナーには s2.on(S2Event.XXX, handler) または React の onXXX props を使用してください
  6. DataCell／ColCell／RowCell／CornerCell を拡張してカスタムセルを作成してください
  7. s2.destroy() を呼び出してテーブルを破棄してください

使用方法

ユーザーから S2 の開発について質問を受けた場合：

  1. 上記のクエリルーティングテーブルからユーザーの意図を特定します
  2. 該当するリファレンスファイルを読み、内容を確認します
  3. リファレンス資料とコード生成ガイドラインに基づいて、コードまたは説明を生成します
  4. 可能な場合は、常に完全で実行可能なコード例を提示します

コメント

Markdown 対応