mcpField
I
infographic-syntax-creator

infographic-syntax-creator

github.com/antvisデザイン・UI7.0k152 回インストール1 週間前に更新
リポジトリ

infographic-syntax-creator について

ユーザーの入力から AntV Infographic の構文を生成するスキルです。内容の構造に合うテンプレートを選び、プロジェクトの書式ルールに従って出力します。

主な機能

  1. 01内容構造に応じたテンプレート選択
  2. 02タイトル、項目、階層、指標の抽出
  3. 03構文と配列の書式設定
  4. 04意味に応じたアイコンの指針
  5. 05コードフェンス内に構文のみを出力

活用シーン

  1. 01手順をインフォグラフィック構文に変換
  2. 02比較や階層の内容を整理
  3. 03指標をインフォグラフィック構文に整形

インストール

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

$npx skills add https://github.com/antvis/infographic --skill infographic-syntax-creator

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

同梱ファイルreferences/prompt.md

詳細

インフォグラフィック構文の作成

概要

references/prompt.md のルールに従い、ユーザーのコンテンツから AntV インフォグラフィック構文を生成します。

ワークフロー

  1. 構文ルール、テンプレート、出力制約について、references/prompt.md を読みます。
  2. ユーザーが有効なテンプレートまたはテンプレートファミリーを明示的に指定した場合は、まずそれに従います。指定がない場合は、構造(シーケンス/リスト/比較/階層/チャート)に最も適したテンプレートを選びます。
  3. ユーザーの主要な構造を抽出します:タイトル、説明、項目、階層、指標。不足している要素は必要に応じて推測します。
  4. 書式の基準として references/prompt.md を使用し、構文を作成します。
  5. すべての出力で、以下の厳格な制約を守ります:
    • 出力は構文のみを含む単一のフェンス付きコードブロックとし、余分なテキストは含めません。
    • 1 行目は infographic <template-name> とします。
    • インデントには半角スペースを 2 つ使用します。キーと値のペアは key value 形式、配列には - を使用します。
    • ユーザーが翻訳または二言語での出力を明示的に求めない限り、ユーザー向けのテキストはすべてユーザーの入力と同じ言語にします。
    • 意味を表すデータ項目には、デフォルトで icon の生成を優先します。リスト項目、ステップ、ノード、比較の分岐、比較の子項目に明確な概念がある場合は、ユーザーがテキストのみの出力を明示的に希望している場合、またはテンプレートがチャート専用の場合を除き、icon を含めます。
    • 選択したテンプレート名または項目のスタイルがアイコンを示唆する場合、icon は省略可能ではなく、すべての主要データに必要なものとして扱います。
    • icon をキーワード句として記述する場合は、単語をハイフンではなくスペースで区切ります。正確なアイコン ID では、本来の句読点を使用できます。
    • compare-binary-*/compare-hierarchy-left-right-* では、ルートノードを必ず 2 つにし、実際の比較ポイントは各ルートノードの children に配置します。
    • compare-swot/compare-quadrant-* はそれぞれ独自のルートノード数に従い、二分構造を無理に適用しません。

注意事項

  • このスキルが返すのは構文のみです。ユーザーがレンダリング済みの HTML ファイルや完成品を求めている場合は、infographic-creator を優先してください。
  • references/prompt.md のテンプレート一覧は代表例であり、網羅的なものではありません。不適切なテンプレートを無理に使うのではなく、構造的に適合する登録済みテンプレートを優先してください。

コメント