motherduck-design-dive

MotherDuck Dive を設計する

Dive のビジュアルシステムとインタラクションを設計する際に、このスキルを使用してください。最新の React と useSQLQuery の仕組みについては motherduck-create-dive と組み合わせ、分析のストーリーと SQL の定義もタスクに含まれる場合は motherduck-build-dashboard と組み合わせてください。

デザインのデフォルト

新しい Dive または全面的な再設計では、ユーザーのデザイン要件が異なる場合を除き、以下をデフォルトとして使用してください。範囲を限定した編集では、既存のビジュアルシステムを維持し、影響する状態を確認してください。

• 320 px のビューポートから着手し、広い画面へと拡張します
• 固定のデスクトップ幅ではなく、流動的なコンテナーとレスポンシブグリッドを使用します
• ライト／ダークのテーマ切り替えを設け、チャートと UI の色にはトークンを使用します。実用上可能であれば、システム設定を初期値にします
• 予測しやすいフィルター領域を確保します。広い画面では常時表示し、狭い画面ではドロワーまたはシートで表示します
• 読みやすいラベルをすべてのブレークポイントで維持できるよう、チャートを上限サイズのあるレスポンシブコンテナーに配置します
• 控えめなビジネス分析向けのビジュアル表現を採用します。ニュートラルなサーフェス、コンパクトな階層、明確な軸、控えめな境界線、装飾の抑制を基本とします
• 各 KPI コンポーネントは単独でも役立つようにします。値、ラベル、比較の文脈を含め、データが対応する場合は小さなトレンド表示または進捗表示も加えます
• 顧客ごとの差異は、情報アーキテクチャを変えるのではなく、データ、ラベル、ロゴ、テーマトークンで表現します
• キーボード操作、視認できるフォーカス、44 px のタッチターゲット、十分なコントラスト、色に依存しないステータス表示に対応します

装飾的なグラデーション、ガラス効果、発光するアクセント、過度に大きなヒーロー指標、装飾的なベントーレイアウト、多すぎるピル、浮遊する図形、マーケティング用ランディングページのような文章は避けてください。

ワークフロー

1. レイアウトを提案する前に、既存の Dive、提供されたデザインペーパー、スクリーンショット、ライブスキーマを確認します。
2. MotherDuck MCP を利用できる場合は、Dive のコードを記述する前、および save_dive または update_dive を実行するたびに get_dive_guide を呼び出します。予約済みの dives Guide トピックから得られる関連規約を適用します。ただし、ユーザーが別の方針を求めている場合はその限りではありません。一般的なスタイル例がユーザーの明示的なデザイン要件と矛盾する場合は、このスキルをレスポンシブなシェルに適用します。
3. 対象ユーザー、主な意思決定、指標の階層、フィルターの切り口、再利用の範囲を定義します。
4. まず 320 px での構成をスケッチします。ヘッダー、フィルターのトリガー、コンパクトな 1 列または 2 列の KPI グループ、メインチャート、補足セクション、詳細ビューを含めます。
5. 読み進める順序を変えずに、その構成をタブレットとデスクトップのグリッドへ拡張します。
6. セマンティックなデザイントークン、テーマ切り替え、再利用可能なカード、レスポンシブなチャートラッパー、フィルター状態を実装します。
7. クエリの正確性は別途検証し、読み込み中、空、エラー、長いラベル、密度の高いデータの各状態を含めて Dive 全体をプレビューします。
8. 対象となるビューポートとテーマで、レンダリング結果を確認します。新しいデザイン、広範な再設計、または証跡の引き渡しを求められた場合は、ビジュアル QA のリファレンス全体を使用します。ラベルや SQL の編集では、新たなデザインレポートは不要です。

回答、レビュー、計画の依頼では、Dive を変更せずに、求められたデザイン成果物を返します。構築または再設計の依頼では、対象範囲内の Dive を実装してプレビューします。依頼に操作が含まれる場合に限り、保存または更新します。

成果物

実装した変更または求められたデザイン、実施した確認、具体的な制限事項を返してください。デザインの全工程を引き渡す場合は、ビジュアル QA リファレンスで説明されている階層、フィルターの動作、レスポンシブルール、テーマトークン、コンポーネントの境界、証跡を含めてください。

レスポンシブ CSS を適用しただけで、モバイルフレンドリーと判断しないでください。実際に確認したビューポートと状態を報告してください。

リファレンス

現在のタスクに必要なリファレンスセクションだけを読みます。

• レイアウトグリッド、コンポーネントの構成、テーマトークン、フィルターモデル、アンチパターン、QA チェックリストについては references/RESPONSIVE_DIVE_DESIGN_SYSTEM.md を読んでください。
• スクリーンショットの作成、ビジュアル確認、反復、レビュー担当者への引き渡しの再現可能な手順については references/VISUAL_QA_PLAYBOOK.md を読んでください。

関連スキル

不足している機能に限り、関連スキルを読み込みます。確立済みのコンテキストは再利用してください。

• motherduck-create-dive：現在のコンポーネントの仕様、プレビュー、保存／更新、および必須リソースについて
• motherduck-build-dashboard：分析上のストーリー、セクションのクエリ、ダッシュボードのエンドツーエンドのワークフローについて
• motherduck-explore：実際のディメンションとフィルター候補の探索について
• motherduck-query：各ビジュアル状態を支える SQL の検証について