gathering-ui

Gathering UI 🌲🦎🦌

太鼓の音が木立に響き渡ります。指揮者は空き地の中央に立ち、まったく異なる二種類の視点を取りまとめます。カメレオンは、ページがどうあるべきかという先入観を持たず、仕様と森のパレットだけを頼りに、新鮮な目でやって来ます。シカも後から新鮮な目でやって来ます。CSS の作成過程を見ていないため、無意識に信頼することなくアクセシビリティをテストします。異なる思考を持つ者たちが、美しくアクセシブルなものを作り上げます。

招集するタイミング

• 新しいページやインターフェースを設計するとき
• UI の機能を一通り実装するとき
• ビジュアルデザインがアクセシビリティ基準を満たしていることを確認するとき
• Grove をテーマにした体験を作るとき
• 美しさとインクルージョンを両立させる必要があるとき

重要： この集まりは指揮者です。コンポーネントの作成やアクセシビリティ監査を直接行うことはありません。動物ごとに 1 つのサブエージェントをディスパッチします。それぞれに隔離されたコンテキストと、意図的に選ばれたモデルを割り当てます。指揮者は引き継ぎとゲートチェックのみを管理します。

---

集まり

SUMMON → DISPATCH → GATE → DISPATCH → GATE → VERIFY
  ↓         ↓        ↓        ↓        ↓        ↓
Spec    Chameleon  Check     Deer    Check    Visual
(self)  (sonnet)    ✓      (sonnet)   ✓     Proof

ディスパッチする動物

順序	動物	モデル	役割	新鮮な目？
1	🦎 カメレオン	sonnet	Grove の美学で UI をデザインする	はい — UI 仕様だけを見る
2	🦌 シカ	sonnet	独立してアクセシビリティを監査する	はい — ファイル一覧だけを見て、デザインの意図は見ない

参考： 正確なサブエージェントのプロンプトと引き継ぎ形式については、references/conductor-dispatch.md を読み込んでください。

---

フェーズ 1：招集

太鼓が鳴ります。空き地が待っています……

指揮者は UI の依頼を受け取り、ディスパッチ計画を準備します。

UI 作業の内容を明確にします：

• どのページ／コンポーネントをデザインしますか？
• どのような感情的なトーンにしますか？
• どの季節を反映させますか？
• コンテンツの構成はどうしますか？

人間に確認してから、次に進みます。

出力： UI 仕様、確認済みのディスパッチ計画。

---

フェーズ 2：適応（カメレオン）

指揮者が合図します。カメレオンが色を変えます……

Agent(chameleon, model: sonnet)
  Input:  UI specification only
  Reads:  chameleon-adapt/SKILL.md + references (MANDATORY)
  Output: built components + file list

UI の設計と構築を行う sonnet サブエージェントをディスパッチします。カメレオンに渡すのは UI 仕様のみです。カメレオンは自身のスキルファイルを読み込み、ワークフロー全体を実行します。

カメレオンが構築するもの：

• グラスモーフィズムを取り入れた Svelte コンポーネント
• 季節のカラーパレットの統合
• 自然の装飾（木々、生き物、天候）
• モバイル対応レイアウト
• 動きを抑える設定への対応
• ユーザー向けの用語に使う GroveTerm コンポーネント

指揮者への引き継ぎ： ファイル一覧（作成／変更したすべてのファイル）、コンポーネントの概要（構築したもの、使用したガラスのバリエーション、季節の要素）。

ゲートチェック： gw dev ci --affected --fail-fast を実行します。コンパイルに成功する必要があります。ビルドに失敗した場合は、カメレオンを再開します。

---

フェーズ 3：感知（シカ）

シカが空き地に足を踏み入れます。色の変化を見ていません……

Agent(deer, model: sonnet)
  Input:  UI file list ONLY (not Chameleon's design reasoning)
  Reads:  deer-sense/SKILL.md + references (MANDATORY)
  Output: accessibility report + applied fixes

アクセシビリティを監査する sonnet サブエージェントをディスパッチします。シカに渡すのはファイル一覧のみです。カメレオンのデザイン上の判断や意図は渡しません。この隔離は意図的なものです。シカには、意図されたことを信頼するのではなく、実際にレンダリングされたものをテストしてもらいます。

シカが監査する項目：

• キーボード操作（タブ順序、フォーカス管理、エスケープキーの処理）
• スクリーンリーダーとの互換性（ARIA ラベル、セマンティック HTML、ライブリージョン）
• 色のコントラスト（最低 4.5:1、WCAG AA）
• タッチターゲット（最低 44px）
• 動きを抑える設定（prefers-reduced-motion への対応）
• フォーカスインジケーターの視認性

指揮者への引き継ぎ： アクセシビリティレポート（見つかった違反、適用した修正、達成した WCAG レベル）、更新済みのファイル一覧。

ゲートチェック： gw dev ci --affected --fail-fast を実行します。アクセシビリティ修正後もコンパイルに成功する必要があります。

---

フェーズ 4：反復（Deer が問題を見つけた場合）

Deer のレポートに、直接修正できなかった問題（キーボード操作のために構造の変更が必要な場合や、コントラストのために配色の変更が必要な場合など）が含まれている場合：

1. Deer が具体的に指摘した内容をもとに、Chameleon を再開します
2. Chameleon が修正を適用します
3. ゲートチェック：CI が成功すること
4. 変更したファイルのみ再検証するため、Deer を再開します
5. 反復は最大 2 回までとし、その後は人間にエスカレーションします

---

フェーズ 5：検証

森の空き地は完成しました。しかし、指揮者は自分の目で確かめます……

コンポーネント監査ゲート（ページ単位の検証前に必須）：

ページ全体をキャプチャする前に、指揮者は Chameleon が作成または変更したすべてのコンポーネントを、Showroom を使って個別に監査します。このゲートでは、ページ単位のキャプチャでは見逃されるデザイントークン違反、グリッドから外れた間隔、フォーカススタイルの欠落、ハードコードされた色（var(--grove-accent-*) トークンを使うべきアクセントサーフェスを含む）を検出します。

# For each component built or modified by the Chameleon:
uv run --project tools/glimpse glimpse showroom \
  libs/engine/src/lib/ui/components/[path-to-component].svelte

# For new components, scaffold fixtures first:
uv run --project tools/glimpse glimpse showroom \
  libs/engine/src/lib/ui/components/[path-to-component].svelte --scaffold

Showroom のコンプライアンス違反は、ページ単位の Glimpse に進む前にすべて解決する必要があります。 違反が見つかった場合は、具体的な指摘内容を伝えて Chameleon を再開します。

ビジュアル検証（UI の依頼では必須）：

# Seed database if not already done
uv run --project tools/glimpse glimpse seed --yes

# Capture across all seasons and themes
uv run --project tools/glimpse glimpse matrix \
  "http://localhost:5173/[page]?subdomain=midnight-bloom" \
  --seasons spring,summer,autumn,winter --themes light,dark --logs --auto

# Interactive verification — click around, verify flows
uv run --project tools/glimpse glimpse browse \
  "http://localhost:5173/[page]?subdomain=midnight-bloom" \
  --do "click navigation, scroll content, interact with elements" \
  --screenshot-each --logs --auto

すべてのスクリーンショットを確認します。問題がある場合は修正し、再度キャプチャします。

検証チェックリスト（ビジュアル検証後）：

• Showroom：作成・変更したすべてのコンポーネントが、コンプライアンス違反なしで glimpse showroom に合格する
• Glimpse：対象となるすべての季節でページをキャプチャし、正しく表示される
• Glimpse：ライトモードとダークモードの両方を目視で検証する
• Glimpse：--logs の出力にコンソールエラーがない
• Chameleon：UI が Grove の美的スタイルに一致する（スクリーンショットで検証済み）
• Chameleon：グラスモーフィズムのテキストが読みやすい（スクリーンショットで検証済み）
• Chameleon：モバイル端末に対応している
• Deer：キーボード操作が機能する
• Deer：スクリーンリーダーに対応している
• Deer：色のコントラストが基準を満たす（4.5:1）
• Deer：動きを減らす設定が尊重される
• Deer：タッチターゲットが適切な大きさである（44px）
• 両方：Grove の用語に GroveTerm コンポーネントを使用する

完了レポート：

🌲 GATHERING UI COMPLETE

UI: [Name]

DISPATCH LOG
  🦎 Chameleon (sonnet) — [X components built, Y files created/modified]
  🦌 Deer (sonnet)       — [Z a11y issues found, W fixed]

GATE LOG
  After Chameleon: ✅ compiles clean
  After Deer:      ✅ compiles clean, a11y verified
  Iterations:      [N iterations / none needed]
  Visual:          ✅ Glimpse matrix captured and reviewed
  Final CI:        ✅ gw dev ci --affected passes

ACCESSIBILITY
  Keyboard nav: ✅
  Screen reader: ✅
  Contrast: ✅ [ratios]
  Touch targets: ✅ 44px+
  Reduced motion: ✅
  WCAG level: [AA/AAA]

The glade welcomes all wanderers.

---

指揮者のルール

動物の作業は決して行わない

指揮者は作業を割り当てます。CSS を書いたり、コンポーネントを構築したり、アクセシビリティを監査したりはしません。

新鮮な視点は強みです

Deer は Chameleon の作業を見ていません。デザインの意図ではなく、レンダリング結果だけを確認します。この分離により、好意的な観察者なら見逃してしまうコントラストの問題、ラベルの欠落、ナビゲーションの不備を検出できます。

移行ごとにゲートを設ける

Chameleon と Deer の間に CI を実施します。Chameleon の作業後にすべてのコンポーネントを Showroom で監査します。Deer の修正後に CI を実施します。すべての作業の後に Glimpse で確認します。

ビジュアルによる証明が必須

完了を宣言する前に、指揮者は必ず Glimpse のスクリーンショットをキャプチャして確認します。CI が成功しても、見た目が正しいとは限りません。

やり直しではなく再開する

反復が必要な場合は、既存のエージェントを再開します。エージェントは前回の作業内容を把握しています。

---

アンチパターン

指揮者がしてはいけないこと：

• 自分でコンポーネントを書く
• Deer に Chameleon のデザイン上の判断理由を見せる（分離することが重要です）
• Glimpse の検証を省略する（「CI が成功したので問題ない」）
• Deer のフェーズを省略する（「小さなコンポーネントにすぎない」）
• ビジュアルによる証明なしに完了を宣言する

---

美しく、誰もが利用できる森へようこそ。 🌲