mcpField
D
d3js-skill

d3js-skill

github.com/podoデータ・データベース29169 回インストール1 日前に更新
リポジトリ

d3js-skill について

d3js-skillは、D3.jsでデータ可視化を作成する開発者向けのスキルです。データバインディング、スケール、軸、トランジション、操作性を扱い、データ変換に基づく構造化SVGを生成します。

主な機能

  1. 01多様なD3.jsチャートの生成
  2. 02データバインディングと変換
  3. 03スケールと軸の設定
  4. 04トランジションと操作性の追加
  5. 05構造化SVGの生成

活用シーン

  1. 01棒・折れ線・散布図の作成
  2. 02ヒートマップやカスタムチャートの作成

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill d3js-skill

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

同梱ファイルstub.yaml

詳細

d3js-skill

カタログの概要 — 完全版スキル：chrisvoncsefalvay/claude-d3js-skill

判断フロー

  1. 完全版スキルはすでにインストールされていますか？ この場所にあるスキルに、まだ das: ブロックがあるか確認します：

    • グローバル：grep -q "^das:" ~/.agents/skills/d3js-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • プロジェクト：grep -q "^das:" .agents/skills/d3js-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • das: ブロックがない場合 → 完全版スキルがインストール済みです。これを呼び出して続行します
    • das: ブロックがある場合 → ステップ 2 に進みます

  2. スコープを検出してからインストールします：

    スコープを検出するには：

    [ -e ~/.agents/skills/d3js-skill ] && echo "global" || echo "project"

    グローバル（-g を付けてインストール）：

    npx skills add chrisvoncsefalvay/claude-d3js-skill --skill d3js-skill -g -y

    プロジェクト（-g を付けずにインストール）：

    npx skills add chrisvoncsefalvay/claude-d3js-skill --skill d3js-skill -y

    Claude Code： 会話から離れずに実行するには、どちらかのコマンドを先頭に ! を付けてチャットメッセージとして送信します。

インストール後の呼び出し

  • スキル名：d3js-skill
  • トリガーフレーズ：「D3.js」、「D3 chart」、「D3 visualization」、「data visualization D3」

機能

適切なデータバインディングパターン、スケール、軸、トランジション、インタラクティブ機能を備えた、高度な D3.js データ可視化を生成します。棒グラフ、折れ線グラフ、散布図、ヒートマップ、カスタムグラフの種類に対応します。静的な例だけでなく、実際のデータセットを変換し、適切に構成された SVG を生成します。

コメント

Markdown 対応