chameleon-adapt

カメレオン適応

カメレオンは、環境を無理に変えようとはしません。光を読み取り、自分の生息地を理解します。姿をスケッチして、構造を作ります。色合いを変えて、周りの森になじみます。質感を加えます。ざらざらした樹皮、なめらかな葉、移り変わる光。最後に、完全に適応し、周囲と一体になります。結果は自然になじみ、まるで最初からそこにあるべきだったかのように感じられます。

起動するタイミング

• ユーザーが「このページをデザインして」や「Groveらしい見た目にして」と依頼した場合
• ユーザーが「見た目を少し洗練して」や「テーマを適用して」と言った場合
• ユーザーが /chameleon-adapt を呼び出した場合、またはカメレオンや適応に言及した場合
• Grove サイトのページを作成または拡張する場合
• 季節の装飾や天候効果を実装する場合
• 読みやすさを高めるためのグラスモーフィズムコンテナを構築する場合
• 自然のコンポーネント（木、鳥、パーティクル）を追加する場合
• カラーパレットシステムを使用する場合

---

適応の手順

READ → SKETCH → COLOR → TEXTURE → ADAPT
  ↓       ↲        ↓         ↲         ↓
Understand Create   Apply    Add      Final
Light    Structure Palette  Effects  Form

---

参照先ルーティング表

フェーズ	参照先	読み込むタイミング
READ	—	参照は不要（コンテキストの評価）
SKETCH	references/layout-patterns.md	ページ構造をデザインするとき
COLOR	references/color-palette.md	季節の色を適用するとき
COLOR	references/groveterm-system.md	ユーザー向けのテキストを書くとき
TEXTURE	references/glass-components.md	グラスモーフィズムを追加するとき
TEXTURE	references/nature-components.md	自然の装飾を追加するとき

---

フェーズ 1：READ

カメレオンは光を読み取り、自分の生息地を理解します……

色をひとつ選ぶ前に、環境を理解します。次の 3 つを評価します。

季節はいつですか？

import { season } from '$lib/stores/season';

const isSpring = $derived($season === 'spring');
const isAutumn = $derived($season === 'autumn');
const isWinter = $derived($season === 'winter');
// Summer is the default (no flag needed)

どのような感情的な雰囲気ですか？

トーン	季節	雰囲気
希望、新たな始まり	Spring	桜、新芽
成長、温もり	Summer	生い茂る葉、活気
収穫、内省	Autumn	落ち葉、暖色
休息、静けさ	Winter	雪、霜、常緑樹
夢、遠い未来	Midnight	紫の輝き、ホタル

季節と雰囲気の概要：

季節	主な色	雰囲気
Spring	springFoliage、cherryBlossomsPeak、wildflowers	新たな始まり、希望
Summer	greens、cherryBlossoms	成長、温もり
Autumn	autumn、autumnReds	収穫、内省
Winter	winter（霜、雪、霜に覆われた松）	休息、静けさ

ページの目的は何ですか？

• 物語／ナラティブページ — 季節の雰囲気を全面的に演出
• データが密集したインターフェース — 装飾を最小限に抑え、読みやすさを重視
• ランディング／ヒーローセクション — 天候効果、ランダムに配置された森
• フォーム／管理画面 — すっきりとしたガラス面、気を散らす要素なし

出力： 季節の選択と装飾レベルの決定（最小限／中程度／全面的）

---

フェーズ 2：スケッチ

カメレオンが姿を描き出し、構造を作り上げます……

グラスモーフィズムのレイヤーでページの骨格を組み立てます。レイヤー構成のルールを定め、ガラス風コンテナを配置し、スティッキーナビゲーションのパターンを組み込みます。

重要な判断事項：各コンテナに適したガラスのバリエーションはどれですか？コンテンツは z-index スタックのどこに配置しますか？レスポンシブ時のレイアウトはどう分けますか？

リファレンス： レイヤー構成のルール、スティッキーナビゲーションのパターン、ページセクションのテンプレート、レスポンシブグリッドのパターン、スペーシングシステム、アクセシビリティに配慮したレイアウトルールについては、references/layout-patterns.md を読み込んでください。

手早く始められるガラス風コンポーネント：

import { Glass, GlassCard, GlassButton } from '@lattice/ui/ui';

<Glass variant="tint" class="p-6 rounded-xl">
	<p>Readable text over busy backgrounds</p>
</Glass>

リファレンス： すべてのガラスのバリエーション、props、CSS ユーティリティクラス、コンポジションのパターンについては、references/glass-components.md を読み込んでください。

出力： ガラス風コンテナと z-index レイヤーを配置したページ構造

---

フェーズ 3：カラー

カメレオンが周囲の森に溶け込むよう、色合いを変化させます……

@autumnsgrove/lattice/ui/nature の季節ごとのカラーパレットを適用します。READ で特定した感情的なトーンに合わせてパレットを選びます。季節ヘルパー関数（getSeasonalGreens、getCherryColors）を使用して、シーン全体に一貫した奥行きを持たせます。

アクセントカラー： アクセントカラーを使う面（ボタン、リンク、ハイライト、フォーカスリング）には、ハードコードした緑色の16進数値ではなく、var(--grove-accent-*) トークンを使用します。ユーザーのアクセントカラーは緑色とは限りません。単色には var(--grove-accent)、ホバー時には var(--grove-accent-dark)、不透明度を変えた色合いには var(--grove-accent-N) を使用します。pre-commit フックによって適用されます。ブランドカラーの緑（自然を表す SVG、ロゴ）には // accent-ok を付ければ使用できます。

また、GroveTerm コンポーネントを使って Grove の用語を適用します。ユーザー向けテキストに Grove 固有の用語をハードコードしてはいけません。

リファレンス： 16進数値を含むすべてのカラートークン、季節ごとのパレット（Spring／Summer／Autumn／Winter／Midnight）、アクセントパレット、ヘルパー関数、背景のグラデーションパターンについては、references/color-palette.md を読み込んでください。

リファレンス： GroveTerm コンポーネント一式、[[term|standard]] 構文、一般的な用語の一覧、アクセシビリティルールについては、references/groveterm-system.md を読み込んでください。

出力： 適切なインポートと季節ごとのバリエーションを適用したカラースキーム。ユーザー向けテキストには GroveTerm コンポーネントを使用

---

フェーズ 4：テクスチャ

カメレオンが深みを加えます——ざらついた樹皮、なめらかな葉、移ろう光……

自然を表現するコンポーネントを重ねて、雰囲気を作り出します。ランダムな森を生成します（木々は重ならず、最小間隔は8％です）。季節に合った天候エフェクトを追加します。季節の鳥を配置して生き生きとした雰囲気を加えます。Lucide アイコンを組み込みます（絵文字は使用しません）。レスポンシブ時の表示密度テーブルに従います。

リファレンス： コンポーネントの全一覧、ランダムな森の生成アルゴリズム、天候エフェクトのスニペット、季節の鳥の配置、アイコンレジストリのパターン、モバイル時のパーティクル数の調整については、references/nature-components.md を読み込んでください。

出力： 適切な z-index とレスポンシブ表示密度で自然を表現するコンポーネントを配置

フェーズ 5：適応

カメレオンは周囲と一体化します——完全な適応です……

最終調整とアクセシビリティ対応を行います。モバイルではパーティクル数を減らします。ナビゲーション用のモバイル向けオーバーフローシートメニューを追加します。すべてのパーティクルレイヤーが prefers-reduced-motion で囲まれていることを確認します。すべてのタッチターゲットが最小 44x44px であることを確認します。ダークモードのガラス表現を確認します。CI を実行します。

検証（必須）：

pnpm install
gw ci --affected --fail-fast --diagnose

CI が失敗した場合：診断結果を読み、修正して、再実行します。カメレオンは色を変えても、壊れたコードを残しません。

コンポーネント監査ゲート（コンポーネントの作成・変更時は必須）：

ページレベルの検証の前に、カメレオンは Showroom を使い、作成または変更したすべてのコンポーネントを個別に監査します。これにより、フルページのキャプチャでは見落とされるデザイントークン違反、グリッドに沿わない間隔、フォーカススタイルの欠落、ハードコードされた色を検出できます。

# For each component built or modified, run a Showroom audit
uv run --project tools/glimpse glimpse showroom \
  libs/engine/src/lib/ui/components/[path-to-component].svelte

# Scaffold a fixture for new components (generates .showroom.ts with scenarios)
uv run --project tools/glimpse glimpse showroom \
  libs/engine/src/lib/ui/components/[path-to-component].svelte --scaffold

これは必須のゲートです。 カメレオンが触れたすべてのコンポーネントは、ページレベルの Glimpse に進む前に Showroom に合格する必要があります。すべての準拠違反を修正してから先に進んでください。

ビジュアル検証（UI 作業では必須）：

カメレオンは作るだけではなく、作ったものを 見て 確認します。Glimpse を使って結果をキャプチャし、デザインがイメージに合うまで反復します。

# Prerequisite: seed the database if not already done
uv run --project tools/glimpse glimpse seed --yes

# Capture the page you just built (--auto starts the dev server)
# Local routing uses ?subdomain= for tenant isolation
uv run --project tools/glimpse glimpse capture \
  "http://localhost:5173/[your-page]?subdomain=midnight-bloom" \
  --season autumn --theme dark --logs --auto

# Verify all season × theme combos render correctly
uv run --project tools/glimpse glimpse matrix \
  "http://localhost:5173/[your-page]?subdomain=midnight-bloom" \
  --seasons spring,summer,autumn,winter --themes light,dark --auto

# Interactive check: click around, verify flows work visually
uv run --project tools/glimpse glimpse browse \
  "http://localhost:5173/[your-page]?subdomain=midnight-bloom" \
  --do "click navigation links, scroll down" --screenshot-each --logs --auto

# Optional: verify with random data too (proves UI handles any content)
uv run --project tools/glimpse glimpse seed --profile fake --fake-posts 5 --yes
# Then capture with the randomly generated subdomain from seed output

反復ループ： キャプチャ → スクリーンショットを確認 → 問題を見つける → 修正 → 再度キャプチャ。適応が完了するまで繰り返します。実際に見ていない UI をリリースしないでください。

最終チェックリスト（CI の合格後、かつビジュアル検証の完了後）：

• CI：gw ci --affected が問題なく合格する
• Glimpse：キャプチャしたページがすべての対象シーズンで正しく表示される
• Glimpse：ダークモードとライトモードの両方を視覚的に確認した
• Glimpse：--logs の出力にコンソールエラーがない
• 煩雑な背景の上でテキストを読みやすくするために、ガラス効果を使用しているか？
• 絵文字ではなく Lucide アイコンを使用しているか？
• ナビゲーション項目用のモバイル向けオーバーフローメニューがあるか？
• 装飾要素が prefers-reduced-motion を尊重しているか？
• タッチターゲットが少なくとも 44x44px あるか？
• 季節の色がページの感情的なトーンに合っているか？
• 木が適切な間隔（最小 8% の間隔）を保ってランダムに配置されているか？
• 適切なガラス表現を使ってダークモードに対応しているか？
• ユーザー向けテキストが Grove の声に沿っているか？
• Grove 用語で GroveTerm コンポーネントを使っているか（ハードコードしていないか）？
• データ駆動型コンテンツ文字列で [[term]] 構文を使っているか？

成果物： 本番環境に対応した、適応が完了し、アクセシブルでレスポンシブな UI — ビジュアル検証済み

---

カメレオンのルール

意図

色の選択はすべてコンテンツに役立つものでなければなりません。装飾は読みやすさを高めるものであり、妨げてはなりません。

節度

すべてのページに森が必要なわけではありません。データが密集したインターフェースには、気を散らすもののない、すっきりしたガラス面が適しています。

真正性

季節システムは意図されたとおりに使用します。春は単なる「明るい色」ではなく、再生と希望を表します。

コミュニケーション

適応のメタファーを使います。

• 「光を読み取っています……」（コンテキストの理解）
• 「形を描いています……」（構造の構築）
• 「色合いを変えています……」（色の適用）
• 「テクスチャを加えています……」（コンポーネントのレイヤリング）
• 「完全な適応……」（最終調整）

---

使用する場面

パターン	適している用途
グラスモーフィズム	背景上のテキスト、ナビゲーションバー、カード、モーダル
ランダム化された森	ストーリーページ、概要ページ、ビジュアルセクション
季節のテーマ	ロードマップ、タイムライン、感情に訴えるストーリーテリング
真夜中の開花	将来の機能、夢、神秘的なコンテンツ
天候のパーティクル	ヒーローセクション、季節の移り変わり
鳥	森の風景に生き生きとした雰囲気を加える、季節の指標

使用しない場合

パターン	避けるべき状況
装飾が多い	データ密度の高いページ、管理インターフェース、フォーム
パーティクルエフェクト	パフォーマンスが重要なページ、アクセシビリティ上の懸念
季節ごとの色	一貫した色が必要な、ブランドが重要となる場面
複数のガラスレイヤー	ぼかし処理によるパフォーマンスの問題が発生する可能性がある
ランダム化	セッション間でコンテンツを一致させる必要がある場合
複雑な森	モバイルファーストのページ、シンプルな情報コンテンツ

---

適用例

ユーザー：「この概要ページをGroveのような雰囲気にしてください」

Chameleonの流れ：

1. READ — 「ページはチームの歩みについてです。感情的なトーン：振り返り。季節：秋（収穫）。装飾レベル：フル。」

2. SKETCH — 「references/layout-patterns.mdを読み込みます。ガラスカードのコンテナー、glass-surfaceを使ったスティッキーナビゲーション、レイヤー構成の数式を適用します。」

3. COLOR — 「references/color-palette.mdを読み込みます。秋のパレット（さび色、燃えさし色、琥珀色、金色）、暖色系のグラデーション、アクセント用のautumnRedsをインポートします。ユーザー向けテキストにはreferences/groveterm-system.mdを読み込みます。」

4. TEXTURE — 「references/nature-components.mdとreferences/glass-components.mdを読み込みます。ランダムに配置したアスペンやカバノキ、FallingLeavesLayer、秋の鳥（ショウジョウコウカンチョウ）、Lucideアイコンを追加します。」

5. ADAPT — 「レスポンシブな密度、動きを抑える設定への対応、「ようこそ、旅人さん」という挨拶にGroveTermを使用、44pxのタッチターゲット、ダークモードを確認します。gw ci --affectedを実行します。」

---

クイック判断ガイド

状況	対応
ストーリー／ナラティブのページ	季節感を全面的に取り入れ、天候エフェクトを使用
データ密度の高いインターフェース	装飾を最小限にし、ガラスの読みやすさを重視
ランディング／ヒーローセクション	ランダムな森、パーティクル、季節の鳥を使用
フォーム／管理インターフェース	すっきりしたガラスサーフェスを使い、自然の演出による妨げを避ける
モバイルファーストのページ	木の数を減らし、エフェクトをシンプルにする
アクセシビリティ上の懸念	prefers-reduced-motionを尊重し、読みやすさのためにガラスを維持する

---

他のスキルとの連携

• /gathering-ui — chameleonとdeer-senseを組み合わせ、アクセシブルなUIを一度の作業で実現します
• /deer-sense — 適用後にアクセシビリティを監査します
• /grove-ui-design — より幅広いUIデザインパターンとコンポーネント選定を扱います
• /beaver-build — 適用後のインタラクティブなUIを網羅するテストを作成します

---

意図を持って適応する者を、森は歓迎します。