Premium Glass for Android
目標: 落ち着いていて、空間的で、高級感のあるインターフェース。ガラスは、コンテンツの上に浮かぶコントロールのためのマテリアルです。あらゆる場所に振りかけるスタイルではありません。成功のテスト: 人々が「これはクリーンでレイヤー感がある」と言い、「誰かがすべてにぼかしを追加した」とは決して言わない。
このスキルは、マテリアル、階層、奥行き、モーション、アクセシビリティを制御します。プロジェクト独自のブランドが、アイデンティティとコピーを制御します。デフォルトのブランド値は assets/tokens.json（パレットを保持）にあり、置き換えることができます。
0. 安全性と範囲
- ユーザーが選択したプロジェクト内でのみ作業します。シークレット、キー、環境変数を読み取らないでください。ネットワークリクエストを行ったり、パッケージをインストールしたりしないでください。ライブラリが必要な場合は、名前を挙げてユーザーに判断を委ねてください。
- 既存のファイルは、依頼されない限り上書きしないでください。最初に提案します（セクション2）。
- 架空のサンプルコンテンツのみを使用します。
- Appleのフォント（San Francisco）、SF Symbols、Appleのロゴ、iOSのクロームを使用しないでください。Inter と Material Symbols / Lucide スタイルのアイコンを使用します。
- (VERIFY) とマークされた事実は古くなる可能性があります（API、バージョン）。ユーザーに確認するよう伝えてください。
1. 5つの厳格なルール
- コンテンツは決してガラスにしない。カード、リスト行、フォーム、ページ背景、メディアは不透明またはソフトサーフェスのまま。
- ガラスはフローティングレイヤーにのみ使用：ボトムナビゲーションピル、スクロールコンテンツ上のトップバー、フローティングアクションボタン、ボトムシートとメニュー、検索フィールド、トースト/スナックバー、小さなフローティングチップ。
- ガラスの上にガラスは絶対にしない。ガラス表面の内側のアイテムは、塗りつぶし、区切り線、または透明度で分離する。
- 可読性は見た目に勝る。ボディテキストは、最悪の背景に対しても4.5:1（大きいテキストとアイコンは3:1）のコントラスト比が必要。
scripts/contrast_check.pyを実行すること。 - すべてのガラス表面にはソリッドなフォールバックがあること（古いAndroid、透明度低下、ハイコントラスト、バッテリーセーバー、デバイスによるぼかし無効化）。
ガラスを要素に適用する前に必ず尋ねる質問：「このマテリアルはどのような機能的な役割を伝えるのか？」有効な答え：スクロールコンテンツの上に浮かんでいる、一時的または文脈的である、コンテンツが下で動いても到達可能でなければならない。答えがない = ガラスを使用しない。
2. ワークフロー
- 調査：プラットフォーム、最小/ターゲットSDK、既存のテーマ/トークン、ナビゲーション構造、アクセシビリティ要件、パフォーマンス目標。推測する代わりに、未解決の質問をリストアップする。
- レイヤーマップ（コードの前）：要素 -> レイヤー（コンテンツ/構造/フローティング） -> ガラス yes/no -> ティア -> 理由 のテーブル。計画とともに提示する。
- トークン：
assets/tokens.jsonから開始。ブランドカラーを調整。両方のモードですべてのティアのコントラストチェックを再実行。 assets/GlassTheme.ktのテンプレートとreferences/compose-implementation.mdのガイダンスを使用して構築。references/review-checklist.mdとscripts/audit_compose.pyで検証。証拠（コントラスト値、画面あたりのガラスレイヤー数、フォールバックのスクリーンショット）を報告する。証拠なしでチェック合格を主張しない。
3. マテリアルティア（開始値、dp）
| ティア | 用途 | ぼかし | 塗りつぶし（ダーク） | 塗りつぶし（ライト） |
|---|---|---|---|---|
| none | コンテンツ、カード、リスト、背景 | - | - | - |
| thin | アイコンのみまたは大ラベルのコントロール | 16 | ink @ 0.55 | white @ 0.55 |
| regular | ナビピル、トップバー、検索、FAB、トースト | 24 | ink @ 0.66 | white @ 0.70 |
| thick | シート、メニュー、ダイアログ、テキストが多いオーバーレイ | 32 | ink @ 0.78 | white @ 0.82 |
| scrim | モーダルシートの背後を暗くする | 0-8 | black @ 0.20-0.45 | black @ 0.20-0.45 |
詳細と確認済みのコントラスト値：references/tokens.md。塗りつぶしは純粋な白ではなく、表面のインク色で着色されるため、ダークモードのテキストは明るい背景でも読みやすさを保てる。 |
4. Androidの現実確認（何かを約束する前に読むこと）
Modifier.blur()/ RenderEffect は要素自身のコンテンツをぼかすのであって、背後にあるものをぼかすわけではない。本当の背景ぼかしにはライブラリ（Haze は Apache-2.0 で Android 上の Compose をサポート）またはダイアログ用のウィンドウぼかしが必要。ライブラリのAPI名はバージョン間で変わる：インストールされているバージョンのREADMEを読むこと（VERIFY）。- ぼかし効果は Android 12（API 31）以上が必要（VERIFY）。それ未満ではソリッドなフォールバックサーフェスを使用する。
- モーダルボトムシートとダイアログは別のウィンドウに存在するため、コンポジション内の背景ぼかしが背後にあるコンテンツを認識できない場合がある。サポートされている場合はウィンドウ背景ぼかしを使用し、
WindowManager.isCrossWindowBlurEnabledを確認する（VERIFY）。そうでない場合は、スクリム付きの厚くほぼ不透明なシートを使用する。 - フラットなグラデーションに対するぼかしは見えない。ガラスには背後に構造（コンテンツ、画像、または意図的なソフトグロー）が必要。そうでなければ、パフォーマンスを無駄に消費するだけ。
- 予算：画面あたり最大2～3の同時ぼかしレイヤー（ローエンド端末では1～2）。リストアイテムや画面全体をぼかさない。大きなサーフェスでぼかし半径をアニメーションさせない。アルファまたはトランスフォームをアニメーションさせる。
- ローエンド端末（3～4 GB RAM）で、リリースに近いビルドでテストすること。
5. アクセシビリティモード（すべて実装）
- 透明度低下（アプリ内設定 + システムの「アニメーションを削除」/ハイコントラスト信号）：ガラスを可視の1 dp境界線のあるソリッドサーフェストークンに置き換える。
- 大フォント（200%）とTalkBack：色だけで情報を伝えない。アイコンのみのコントロールにラベルを付ける。フォーカス順序が適切であること。
- 動きの低減：動きをフェードに置き換える。状態フィードバックを維持する。
- タッチターゲットは最低48 dp。ジェスチャー（スワイプ）には常にボタンまたはcustomActionsの代替手段があること。
6. コンポーネント
ナビゲーションピル、トップバー、FAB、シート、検索フィールド、チップ、カード、スワイプ行、トリアージスタック、チャット入力、マスク値チップの仕様：references/components.md。ロールごとに1つの半径を使用（チップ 999、コントロール 16、カード 24、ナビピル 28、シート 32）。ネストされた半径 = 外側の半径 - パディング。
7. モーション
スプリング 250-350 ms、短いフェード 150 ms、バウンスオーバーシュートなし。スワイプしきい値で触覚ティック。押下状態：スケール 0.97 + ソフトハイライト。動きの低減を尊重する。
8. 画像プロンプトモード（参照画面）
モックアッププロンプトを求められた場合、references/image-prompts.md に従う：画面ごとに1つのプロンプト、自己完結型のスタイルブロック、画面上の正確なテキスト、ガラスはフローティングレイヤーのみ、「カードは不透明」、Android ステータスバー、Apple 要素なし。6つの完成した画面プロンプトがリファレンスにある。ジェネレーターは小さなテキストやデーヴァナーガリー文字を歪めることをユーザーに伝える。出力をレイアウトとムードの参考として使用し、その後 Figma/Compose で再構築すること。
9. レビューモード
デザインやコードのレビューを求められた場合：各要素をレイヤーで分類、画面ごとのガラスレイヤー数をカウント、監査スクリプトを実行（python scripts/audit_compose.py <src>）、コントラストスクリプトを実行、その後、references/review-checklist.md からの修正とともに、重要度別に所見をリストアップする。
10. 出力の期待
どんなタスクに対しても、以下を明記すること：何がガラスでその理由は何か、どのティアか、コントラストの証拠、フォールバック、近似または未確認のもの。変更範囲を限定すること：関連のないUXを再設計しない。関連のない問題は別途リストアップする。
参考文献とファイル
references/principles.md- Apple由来の原則とソースreferences/tokens.md- トークンテーブルと確認済みコントラスト結果references/compose-implementation.md- Compose アーキテクチャ、スニペット、フォールバック、パフォーマンスreferences/components.md- コンポーネントの仕様と状態references/image-prompts.md- プロンプトテンプレートとワークフローreferences/review-checklist.md- 品質ゲートとアンチパターンscripts/contrast_check.py、scripts/audit_compose.py- ローカルチェッカー（ネットワーク不要）assets/tokens.json、assets/GlassTheme.kt（オプション：45画面の Retain プロンプトセットをassets/retain-screen-prompts.mdとして追加）