aurora-ember-bio-lab/splatstudio

FlowAI ダッシュボードスキル

FlowAI美学にインスパイアされた、シングルスクリーン・マルチタブ形式のチーム管理ダッシュボードを生成します。出力は、外部依存関係なしで動作する自己完結型HTMLファイルで、タブ切り替え、アニメーション棒グラフ、チャートホバーツールチップ、クリックズームパネル、ダークモード切り替え、表示中のチームテーブルのCSVエクスポートなどのインタラクションを内蔵しています。

リソースマップ

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # 起点として使用する参照シード
├── references/
│   └── checklist.md           # P0/P1/P2品質ゲート
└── example.html               # 完全な手動作成サンプル（ギャラリープレビュー）

ワークフロー

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変数からチャートの色を再派生させる
   • 「CSVエクスポート」ボタンで、チームテーブルの現在のすべての行（Workflow列を含む）をエクスポートする
6. 最終出力の前にreferences/checklist.mdを確認する。

出力契約

短いオリエンテーションの文を1行出力し、その後に成果物を出力する:

<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI チームダッシュボード">
<!doctype html>
<html>...</html>
</artifact>

成果物は、ビルド手順やネットワークアクセスなしでディスクから直接開いたときに正しくレンダリングされる必要がある。