mcpField
S
social-media-matrix-tracker-template

social-media-matrix-tracker-template

github.com/nexu-ioマーケティング・グロース104.6k69 回インストール今日更新
リポジトリ

social-media-matrix-tracker-template について

ソーシャルメディア分析用の単体 HTML テンプレートを調整するスキルです。情報量の多いダッシュボード向けに、デザイン手順、データ整合性、成果物の形式を定めています。

主な機能

  1. 01DESIGN.md のトークンに合わせた調整
  2. 02プラットフォーム一覧と KPI 構成
  3. 03インタラクティブなチャートとライブ分析
  4. 04ダーク・ライトテーマ
  5. 05CSS と JavaScript を内包

活用シーン

  1. 01ソーシャルメディア分析ダッシュボードの作成
  2. 02サンプル指標の実データへの置き換え
  3. 03納品前のチャート操作検証

インストール

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

$npx skills add https://github.com/nexu-io/open-design --skill social-media-matrix-tracker-template

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

同梱ファイル

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

example.html
assets/
template.html
references/
checklist.md

詳細

ソーシャルメディア・マトリックストラッカーのテンプレート

データ密度が高く、実運用レベルのマイクロインタラクションを備えた、プレミアムでシネマティックなソーシャルメディア分析テンプレートを作成します。

リソースマップ

social-media-matrix-tracker-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

ワークフロー

  1. まず有効な DESIGN.md を読み、トークンを CSS 変数に割り当ててから、assets/template.html を調整します。
  2. 構造的な情報アーキテクチャを維持します。ヒーロー＋プラットフォームマトリックス＋KPI ストリップ＋複数のチャートを含む詳細セクション。
  3. インタラクションの忠実度を保ちます。
    • ダーク／ライトテーマの切り替え
    • チャートのホバーツールチップ（ビューポート内に自動で収める）
    • クリックによるチャートポイントの固定
    • ドラッグによる区間分析
    • Shift＋ドラッグによる複数範囲の比較
    • インサイトパネルのライブ更新（すべてのチャート：折れ線／積み上げ／ドーナツ／地理）
    • 折れ線チャートでのタッチ操作とキーボードの矢印キー対応（a11y）
  4. テンプレートは自己完結型（インライン CSS／JS を含む単一 HTML、フレームワーク依存なし）にします。
  5. デフォルトのサンプルデータは、現実的でカードやチャート間の整合性が取れたものにします。
  6. 成果物を出力する前に、references/checklist.md で検証します。
サンプルデータを安全に調整する

assets/template.html には、手作業で調整したサンプル配列が含まれています。実データに差し替える場合は、チャートとインサイトの整合性を保つため、次の契約に従ってください。

  • 個別のインデックスではなく、配列全体を一度に置き換えます。折れ線チャートでは values[] と xLabels[] の長さが同じで、インデックスごとに対応していることが前提です。
  • 既存の単位＋小数点以下の桁数を合わせます。hourChart（エンゲージメント数／decimals: 0）、slaChart（分／decimals: 0）、roiChart（倍率 x／decimals: 1）、cohortChart（%／decimals: 0）。単位が一致しないと、ツールチップと A/B インサイトの文面が崩れます。
  • 4つの折れ線シリーズはすべて同じ長さ（デフォルトは7ポイント）にします。長さが異なると、共通のインデックスを前提とする A/B 比較に影響します。
  • mixChart では、各 bars[i].stack を3要素の配列（[Video, Thread, Carousel]）に保ちます。sentimentChart では、arcs[] のパーセンテージの合計を100にします。
  • KPI ストリップとプラットフォームカードの指標を連動して更新します。成果物の「ライブ概要」インサイトは、同じ数値から生成されます。
  • 1点のみのデータセットはガードされており（ラベル付きの点として描画されます）が、UX が低下します。調整時は、チャートごとに3点以上にすることを推奨します。

出力仕様

成果物の前に短い文を1つ出力します（例：「シネマティックなソーシャルメディア・マトリックストラッカー — デフォルトはダークテーマで、すべてのインタラクションが機能します。」）。その後、自己完結型の HTML 成果物を1つだけ出力します。

  • 成果物には、以下に示す <artifact> ラッパーを必ず使用してください。デーモンパーサーはこのラッパー要素を基準に処理します。
  • identifier="social-media-matrix-tracker" は正式な ID です（プロジェクト名を追加しないでください）。
  • type="text/html" と title は必須です。
  • インライン CSS＋JS のみを使用します。外部フレームワーク／CDN は使用しないでください。template.html にすでに宣言されているものを除き、外部フォントもインポートしないでください。
  • 最終ドキュメントは、DESIGN.md のトークンを適用した調整済みの template.html です。内容をそのままコピーしたものや、別の index.html ではありません。両方を出力しないでください。
<artifact identifier="social-media-matrix-tracker" type="text/html" title="Social Media Matrix Tracker">
<!doctype html>
<html>...</html>
</artifact>

コメント

Markdown 対応