flowai-live-dashboard-template

FlowAI Dashboard Skill

FlowAI の美学に着想を得た、シングルスクリーンで複数のタブを備えるチーム管理ダッシュボードを作成します。出力は、組み込みのインタラクション（タブ切り替え、アニメーション付き棒グラフ、グラフ上のホバーツールチップ、クリックによるパネルの拡大表示、ダークモード切り替え、表示中のチームテーブルの CSV エクスポート）を備えた、自己完結型の HTML ファイルです（外部のランタイム依存関係はありません）。

リソースマップ

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # reference seed used as the starting structure
├── references/
│   └── checklist.md           # P0/P1/P2 quality gates
└── example.html               # complete hand-built sample (gallery preview)

ワークフロー

1. アクティブな DESIGN.md を読みます（上に挿入されています）。色、タイポグラフィ、間隔、コンポーネントのスタイル設定トークンを、assets/template.html で使われている CSS 変数に対応付けます。新しいトークンを作成しないでください。
2. assets/template.html をベースにします。シェルをゼロから生成しないでください。
3. 3 つのタブを維持します：Team Members、Team Details、Activity Log。タブは実際に切り替わり、常に 1 つのビューだけが表示されるようにしてください。
4. もっともらしく具体的なサンプルデータを生成します（実在しそうな名前、ID、役職、部署、日付、割合）。Member A / Metric B のようなプレースホルダーは使用しないでください。
5. 必須のインタラクション：
   • ハッシュと同期するタブ切り替え（#members | #details | #activity）
   • 詳細タブを初めて表示したときに、イージング付きで役割別棒グラフをアニメーション表示
   • グラフのホバーツールチップに正確なラベルと値を表示
   • 任意のパネル／カードをクリックして拡大表示し、もう一度クリックするか Esc キーを押すと元に戻す
   • CSS 変数からグラフの色を再導出するダークモード切り替え
   • チームテーブルに現在表示されているすべての行（Workflow 列を含む）をエクスポートする「Export CSV」ボタン
6. 最終出力の前に references/checklist.md の項目を確認します。

出力要件

短い案内文を 1 文出力し、その後に成果物を続けます。

<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>

成果物は、ビルド工程やネットワーク接続なしで、ディスクから直接開いても正しく表示される必要があります。