ダッシュボードスキル
単一画面の管理／分析ダッシュボードを生成します。
ワークフロー
- アクティブなDESIGN.mdを読む（上記インジェクト済）。色、タイポグラフィ、スペーシング、コンポーネントのスタイルはすべてこれに従います。新しいトークンを発明しないでください。
- 分類 — ダッシュボードが監視する対象（売上、トラフィック、使用状況、インシデント、運用など）を指示から特定します。具体的で妥当なメトリック名と値を生成してください。「メトリックA／メトリックB」のようなプレースホルダーは使わないでください。
- 必要な領域をレイアウト:
- 左サイドバー（220–260px）: 上部にブランドマーク、アイコン付きのナビリンクを6～8個、アクティブ状態はDSアクセントカラーを使用。
- トップバー: 左側にページタイトル、右側に検索入力とユーザーアバター／ステータス。
- メイン:
- 行1: 3～4個のKPIカード（ラベル＋大きな数値＋前期比の差分）。
- 行2: 1つの主要チャート（全幅または2/3幅） — インラインSVGの折れ線／棒／面グラフとして、実際の数値に基づいて描画。
- 行3: 1つの二次チャートまたはテーブル（最近のイベント、トップ項目など）。
- 1つの自己完結型HTML文書を作成:
<!doctype html>から</html>まで、CSSは1つのインライン<style>ブロックにまとめる。- 全体レイアウトにはCSS Grid、カード内部にはFlexboxを使用。
- セマンティックHTML:
<aside>,<header>,<main>,<section>を使用。 - 各論理領域にコメントモード用の
data-od-id="スラッグ"を付与。
- チャート: インラインSVGのみ、JSライブラリは使用しない。折れ線グラフは約10行の
<polyline>と微妙なエリア塗りつぶし。棒グラフはDSアクセント塗りの<rect>をN個配置。軸ラベルは控えめに（薄いテキスト、小さいスケール）。 - 自己チェック:
- すべての色はDESIGN.mdのトークンから取得。
- アクセントカラーは最大2回まで（サイドバーのアクティブ状態＋1つのチャートハイライト）。
- サイドバーとトップバーはスティッキー、メインは独立してスクロール。
- 密度はDSのムードに合わせる — 余白が多いDSではパディングを増やし、密集したDS（トレーディング、暗号資産）では行を詰める。
出力契約
<artifact> タグで囲んで出力:
<artifact identifier="dashboard-slug" type="text/html" title="ダッシュボードタイトル">
<!doctype html>
<html>...</html>
</artifact>
アーティファクトの前に1文だけ挿入し、その後には何も追加しないこと。