mcpField
C
claud3

claud3

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

claud3 について

claud3 は、Edward Tufte のデータ可視化原則に基づいて D3.js のチャートを生成するスキルです。データの問いに合わせて 80 種類以上から選び、レスポンシブな単一ファイルの D3 v7 HTML を作成します。

主な機能

  1. 0180 種類以上のチャートから選択
  2. 02Tufte の可視化原則を適用
  3. 03単一ファイルの D3 v7 HTML を生成
  4. 04ダークテーマと直接ラベルを採用
  5. 05インタラクティブなチャート探索に対応

活用シーン

  1. 01データの問いに合うチャート形式の選定
  2. 02レスポンシブな D3.js 可視化の生成
  3. 03playground モードでのチャート探索と調整

インストール

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

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

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

同梱ファイルstub.yaml

詳細

claud3

カタログの概要 — パッケージ全体はこちら：dtran320/claud3

判断フロー

  1. パッケージはすでにインストールされていますか？ 確認：~/.design-agent-skills/skills/claud3/SKILL.md が存在するか。

    • はい → claud3 を呼び出して続行します
    • いいえ → 手順 2 に進みます

  2. シェルにアクセスできますか？

    • はい → 以下のインストールコマンドを実行し、スキルを呼び出します
    • いいえ → インストールコマンドを表示します。Claude Code では、! で始まるチャットメッセージとして送信します。グローバルにインストールするには -g を追加し、プロジェクトのみにインストールする場合は省略します

インストールコマンド

npx skills add dtran320/claud3

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

  • スキル名：claud3
  • トリガーフレーズ：「claud3」、「D3 Tufte」、「80 chart types」、「D3 dark theme」

機能

Edward Tufte のデータビジュアライゼーションの原則を、D3.js によるチャート生成に適用します。データの根本的な問いを分析して、80 種類以上の選択肢を揃えたライブラリから最適なチャートタイプを選び、D3 v7 を使用した、ダークテーマ、レスポンシブレイアウト、直接データラベル（独立した凡例なし）、状況に応じた注釈を備える、自己完結型の単一 HTML ファイルを生成します。インタラクティブな探索と調整ができるプレイグラウンドモードも含まれます。

使用しない場合

  • 複数のライブラリに対応するビジュアライゼーションエージェントの場合 — data-viz-agent を使用します
  • AntV/G2 のチャートの場合 — antvis-chart-skills を使用します
  • Tufte の制約がない簡易的な単一チャートの場合 — d3js-skill を使用します

コメント

Markdown 対応