mcpField
T
trading-analysis-dashboard-template

trading-analysis-dashboard-template

github.com/nexu-ioデザイン・UI104.6k64 回インストール今日更新
リポジトリ

trading-analysis-dashboard-template について

テンプレートから単一ファイルのHTML取引ダッシュボードを作るデザインスキルです。チャート操作、テーマとモードの切り替え、検証を扱い、不明な数値は明示するよう定めています。

主な機能

  1. 01ライト・ダークモード切り替え
  2. 02ライブ・デモモード
  3. 03チャートの十字線とツールチップ
  4. 04フローティングチャート表示
  5. 05キーボードコマンドパレット

活用シーン

  1. 01取引分析ダッシュボードの作成
  2. 02銘柄名や見出しのカスタマイズ
  3. 03単一HTML成果物の生成

インストール

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

$npx skills add https://github.com/nexu-io/open-design --skill trading-analysis-dashboard-template

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

同梱ファイル

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

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

詳細

トレーディング分析ダッシュボードのテンプレート

自己完結型の HTML アーティファクトとして、プレミアムな、データを豊富に含むウォール街スタイルのトレーディングダッシュボードを作成します。

リソース一覧

trading-analysis-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

ワークフロー

  1. 有効な DESIGN.md を読み、タイポグラフィ、色、レイアウトを CSS 変数に反映します。
  2. assets/template.html を index.html にコピーします。
  3. 見出し、銘柄名、数値ラベルをユーザーの依頼内容に合わせて調整します。
  4. インタラクションの忠実度を維持します。
    • ライト／ダークモードの切り替え
    • ライブ／デモモード
    • チャートのホバー時のクロスヘアとツールチップ
    • クリックでチャートにフォーカス（フローティングモーダル形式）
    • キーボードのコマンドパレット（/）
  5. 出力は単一ファイルの HTML にします（CSS と JS をインライン化し、フレームワークへの依存をなくします）。
  6. 実際の数値が不明な場合は、プレースホルダー（— または中立的なラベル）を適切に使用します。
  7. 出力前に references/checklist.md に照らして検証します。

出力仕様

アーティファクトの前に1文を置き、その後に続けます。

<artifact identifier="trading-analysis-dashboard" type="text/html" title="Trading Analysis Dashboard">
<!doctype html>
<html>...</html>
</artifact>

コメント

Markdown 対応