android-material3-design-system

Android Material3 デザインシステム

使用する場面

• 次のリクエストに対応する場合に、このスキルを使用します：Android の Material 3 テーマ、Compose のデザインシステムトークン、Android のタイポグラフィとカラーシステム。
• 主な目的：Android アプリに Material 3 のトークン、カラー、タイポグラフィ、スペーシング、アダプティブコンポーネント、テーマの管理を適用します。
• 対象範囲が広がる場合は、次のスキルに引き継ぎます：
• android-compose-foundations
• android-compose-accessibility

ワークフロー

1. 対象の画面が Compose、View システム、または相互運用する画面のどれに該当するかを特定します。
2. レスポンシブ性、アクセシビリティ、パフォーマンスの要件を満たす、最も手間のかからない UI パターンを選択します。
3. 安定した状態、明示的な副作用、再利用可能なデザイントークンを中心に UI を構築します。
4. フィクスチャアプリで、長いテキスト、フォントの拡大、RTL、画面幅の狭いデバイスなどのエッジケースをテストします。
5. 引き継ぐ前に、ユニットテスト、UI テスト、スクリーンショットによる検証を行います。

ガードレール

• アニメーションや抽象化を追加する前に、安定した状態と予測可能なレンダリングを優先します。
• デフォルトでアクセシビリティのセマンティクス、コントラスト、フォーカス順序、タッチターゲットのガイドラインを遵守します。
• 明確な相互運用の境界なしに、Compose と View システムの管理を混在させないでください。
• 時期尚早なマイクロ最適化ではなく、測定に基づくパフォーマンス改善を優先します。

アンチパターン

• ナビゲーションやビジネスロジックをリーフ UI コンポーネントに直接埋め込む。
• ローカライズや動的なテキストで崩れる固定サイズを使用する。
• セマンティクスを無視し、視覚的な変更だけを通知する。
• 考え方を適応させずに、XML のパターンをそのまま Compose に移植する。

例

正常系

• シナリオ：Compose のショーケース画面に一貫性のある Material 3 テーマを適用します。
• コマンド：cd examples/orbittasks-compose && ./gradlew :app:assembleDebug

エッジケース

• シナリオ：混在する UI の移行中に、XML と Compose の画面の見た目を揃えます。
• コマンド：cd examples/orbittasks-xml && ./gradlew :app:assembleDebug

障害からの復旧

• シナリオ：テーマトークンに関する作業が、アクセシビリティや汎用の Compose 基盤に誤って振り分けられないようにします。
• コマンド：python3 scripts/eval_triggers.py --skill android-material3-design-system

完了チェックリスト

• 実装方針が明確かつ最小限で、適切な Android の画面に結び付いています。
• 関連するサンプルコマンドとベンチマーク用プロンプトを実行するか、更新しています。
• リクエストが隣接するスキルの範囲に及ぶ場合、引き継ぎ内容を記録しています。
• 選択したパターンと、主な移行またはトラブルシューティングの手順を公式リファレンスで確認できます。

公式リファレンス

• https://developer.android.com/develop/ui/compose/designsystems/material3
• https://developer.android.com/develop/ui/compose/designsystems/custom
• https://developer.android.com/develop/ui/views/theming/themes
• https://developer.android.com/guide/practices/ui_guidelines/material-design