data-dashboard

スキル：データダッシュボード

ステップ 0：キットはありますか？ このスキルはキットからファイルを読み込みます。一度だけ確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルのフォルダーだけです。これは npx skills add の動作です。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、 そこで終了してください。開けなかったファイルの内容を推測してはいけません。

ダッシュボードは、誠実さを保つのが最も難しい画面です。情報が密集し、ほとんどが 非テキストであり、初期設定のほぼすべてが状況を悪化させます。これが ${CLAUDE_SKILL_DIR}/../../../examples/showcase/ と ${CLAUDE_SKILL_DIR}/../../../examples/terminal/ を生み出したレシピです。どちらも両方のテーマですべての チェックを通過します。

1. 描き始める前に要件を決める

それぞれ一行で答えるか、ユーザーから /grill-me で引き出してください：

• 誰が読み、そこからどのような判断をしますか？ オペレーター向けの売上コンソールと、 ディーラー向けのトレーディングデスクでは、見た目がまったく異なります。
• 最初に注目させる数値は何ですか？ 主役がないダッシュボードは、ただの壁です。
• 更新頻度はどのくらいですか？ 時間単位の数値には「最終実行」の行を付けます。リアルタイムの 数値には、ティッカーと行ごとのタイムスタンプを付けます。
• どの程度の密度が適切ですか？ ターミナルなら 12 パネルでも成り立ちます。週次レポートでは成り立ちません。

2. 同じサイズのカードを並べるのではなく、帯状にレイアウトする

同じサイズの統計カードを 4 枚並べるのは、誰も設計していないことを最も露骨に示すサインです。 それぞれ形の異なる帯を組み合わせます：

帯	内容	理由
1	本文の 3 倍のサイズのヒーロー指標と、その専用チャートを幅の大部分に配置	視線が一度で定まります
2	2～3 個の補助指標を縦に並べるか、狭い幅に配置	構成によって控えめに見せられます
3	形の異なるチャートを 3 つ横並びにする（ドーナツ、順位付き棒グラフ、スパークライン）	多様性が意図を伝えます
4	実際に並べ替えられるテーブルと、フィードまたはログ	概要のあとに詳細を示します
5	ページを締めくくるフッターの行	ページは意図的に終わらせる必要があります

span 8 / span 4 のような明示的なスパンを指定した 12 カラムのグリッドを使い、6 カラム、 さらに 1 カラムへと折りたたみます。主要な帯に repeat(auto-fit, …) を使ってはいけません。 避けようとしている、同じサイズのカードが並ぶ壁になってしまいます。

3. チャートの種類

以下はすべて viewBox を持つプレーンなインライン SVG で、CSS でサイズを設定し、 --color-chart-* から色を適用します。チャートライブラリも、実行時の依存関係も不要です。

チャート	形状	用途
バー／縦棒	バケットごとの <rect>。角を丸めるには rx を指定	離散的な期間
ローソク足	期間ごとの <line> のヒゲと <rect> の実体。上昇／下降に応じてクラスを指定	OHLC 価格
出来高	価格チャートの下に置く棒。同じ x 軸スケールを使い、opacity:.45 を指定	値動きの勢い
移動平均	ローソク足の上に重ねる <polyline>。2px、接続部は丸くする	ノイズの中のトレンド
折れ線／スパークライン	<polyline>。描画アニメーションには pathLength="1" を指定	セル内のトレンド
面グラフ／積み上げ面グラフ	帯ごとの <path>：上辺に沿って進み、直前のベースラインに沿って逆方向に戻り、閉じる	時間による構成の変化
デプス	中央値を挟んで左右対称に配置する、累積面グラフの 2 つのパス	オーダーブックの流動性
ウォーターフォール	各ステップの浮動する <rect> と、レベル間を結ぶ破線	要因分析
ドーナツ	セグメントごとに stroke-dasharray と rotate() を指定した <circle>	全体に対する割合。スライスは 3～5 個
ラジアルゲージ	同じ手法を使い、stroke-linecap:round を指定。270 度のスイープ	上限に対する単一の値
散布図／バブルチャート	<circle>。半径で第 3 の次元を表す	2 つの測定値と重み
相関マトリクス	HTML テーブル。color-mix でセルに色を付ける	ペアごとの関係
ヒートマップ	HTML テーブルまたは <rect> のグリッド。値に応じて色を付ける	コホート、カレンダー
オーダーブック	行ごとにデプスバーを付けた HTML テーブル	買い注文と売り注文

座標を手作業で置かず、形状を生成してください。 SVG 要素を出力する、小さくて決定論的な スクリプト（シード付きウォーク）を書き、その出力を貼り付けます。 座標を手入力するとずれが生じ、再生成もできません。

4. ドメインの正確さも技術の一部です

ゲートでは、美しく描かれていても意味をなさないチャートは検出できません。手作業で確認してください。

• 相関行列は対称で、対角要素は正確に 1 でなければなりません。両方の三角部分にランダムな値があると、日頃から相関行列を見ている人にはすぐに見抜かれます。
• 積み上げ面グラフの合計は総量と一致し、各帯が交差したり、隙間ができたりしてはいけません。よくあるバグは、座標ではなくインデックスでベースラインを反転させることです。その結果、帯の間に濃いくさび形の領域が現れます。
• ウォーターフォールチャートには接続線が必要で、終了バーは開始値に各ステップを加えた値と一致しなければなりません。
• 深度はミッドから離れるほど両側で増加し、減少してはいけません。
• 各セグメントの合計が全体にならないドーナツチャートは、嘘をついている円グラフです。

5. チャートごとのアクセシビリティ要件

• すべての SVG に role="img" と、aria-label または aria-labelledby で参照される <title>+<desc> を設定します。「チャートであること」ではなく、チャートが何を示しているかを説明してください。「範囲は 182.06～200.10、終値は 187.84」は「価格チャート」より適切です。
• 色だけで意味を伝えてはいけません。緑には + と上向き矢印、赤には - を付けます。上昇と下降は、表のセル内でも言葉で示します。
• 表には <caption>（パネルのヘッダーですでに内容が示されている場合は .sr-only を使用）、scope="col"／scope="row"、およびクリックすると実際に並べ替えが行われる場合に限り aria-sort を設定します。
• 並べ替え可能なヘッダー、範囲タブ、テーマ切り替えには、いずれも状態を宣言させます。そのため、実際のクリックで状態が変わらなければなりません。verify_interactive.mjs はこれらをクリックして確認します。

6. 測定して初めて見つかる落とし穴

これらはすべて、完成しているように見える画面で見つかりました。最初のグループはゲートで検出されました。「ゲートでは検出できない」と記したものは、スクリーンショットを開いて目視することで見つかりました。そのため、この手順は省略できません。

• チャートの配色はテキストの配色ではありません。 ダークテーマで、--color-chart-4 上の白いイニシャルのコントラスト比は 2.65:1 でした。チャートの色は、大きく塗りつぶされた形状向けに調整されています。
• 盛り上がった面上の成功を示す緑色のテキストは、コントラスト比が4.43:1でした。AAにわずか0.04届きません。色はアイコンと記号に使い、テキストはニュートラルな色にしてください。
• 遷移中にaxeを実行してはいけません。 テーマを切り替える前に遷移を無効化してください。そうしないと、色が変化している途中でコントラストが測定されます。
• 情報量の多いテーブルはスマートフォンには収まりません。 メディアクエリで、スマートフォンでは省いてもよい列（スパークラインや派生値など）を非表示にし、そのことをコメントに記してください。文字サイズをスケールより小さくしないでください。
• スタッガーにはトークンを使います： calc(var(--duration-fast) * 0.6 * n)。ミリ秒を直接入力してはいけません。
• グリッドの行はアイテムを引き伸ばします。 ヒントのあるフィールドとないフィールドを横に並べると、ヒントのないコントロールも高いほうの列に合わせて伸び、2つの入力欄の高さが異なってしまいます。フィールドに align-content: start を設定し、コントロールには明示的に block-size を指定してください。レンダリング後に高さを測定してください。スクリーンショットでは違いが明らかですが、マークアップからは分かりません。
• 同じ引き伸ばしはパネル全体にも起こりますが、ゲートでは検出できません。 行の高さは最も高いパネルに合わせられます。短いパネルは内容が上部に詰められ、下部に枠線だけの空白が残ります。たとえば、キャプションの下に130pxの空白があるヒートマップパネルや、隣のマップより2つ分パネルが少ない右カラムです。行内の各パネルで、どのように余白を扱うかを指定する必要があります。子要素の1つに余白を吸収させる（grid-template-rows:auto minmax(0,1fr) とし、その子要素自身のトラックも minmax(<min>,1fr) にして、行も伸びるようにする）、行全体で余白を分配する（align-content:space-between）、または短いカラムにパネルを追加する、のいずれかです。行のスクリーンショットを撮り、各パネルの下端を確認してください。これはマークアップには現れません。
• auto-fit は列を黙って削除しますが、ゲートでは検出できません。 幅約340pxのパネルに3つのゲージを配置し、minmax(min(100%,7rem),1fr) を指定すると、トラックが2つに解決され、3つ目が空のセルの隣に取り残されました。個数が固定されていて意味を持つ場合は、repeat(3,minmax(0,1fr)) を記述し、狭い幅には専用のルールを設けてください。
• カテゴリーチャートには、ページ上にカテゴリー名が必要ですが、ゲートでは検出できません。 5種類の欠陥を示すパレート図で、名前が aria-label にしかないと、見る人には無名の棒が並んでいるようにしか見えません。棒の下にラベルを配置してください。viewBox内でプロットを均等な間隔にレイアウトすれば、別の座標系を使わずに対応するラベルのグリッドを揃えられます。
• .sr-only には位置指定された祖先要素が必要です。 スクロール領域内では、そうでない場合、初期包含ブロックを基準に位置が解決されてビューポートの外に配置され、ドキュメントのスクロール幅が数百ピクセルも増えてしまいます。
• アニメーション中にだけ面積を持つゼロ面積の要素は、prefers-reduced-motion の設定下ではコンテンツが失われたように見えます。 レーダーの走査線には1pxの線ではなく、扇形を与えてください。
• レイアウト用と色用でクラス名を使い回してはいけません。 .c4 を4列分の幅指定と4番目のチャート色の両方に使った結果、パネル全体がピンクに塗られてしまいました。

7. ループ

node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs measure_render.mjs <file> && node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs measure_render.mjs --dark <file>
node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file>  && node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs axe_audit.mjs --dark <file>
node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_responsive.mjs <file> --scale=1.25
node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_interactive.mjs <file>
DS_REQUIRE_BROWSER=1 node ${CLAUDE_SKILL_DIR}/../../../scripts/slop_tells.mjs --strict <file> && DS_REQUIRE_BROWSER=1 node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs --strict <file>

次に、両方のテーマで、幅1600pxと390pxの状態をスクリーンショットに撮り、目視で確認してください。 ゲートを通過しても、チャートの描画が間違っていることがあります。対称でない相関行列は、ゲートが16項目すべてで合格を示していても、見るに堪えません。

動作確認済みの実例：${CLAUDE_SKILL_DIR}/../../../examples/showcase/index.html（収益コンソール）と ${CLAUDE_SKILL_DIR}/../../../examples/terminal/index.html（トレーディングデスク、10種類のチャート）。