スキル自身の言葉で
Jetpack Compose Material3を主要な対象として、GoogleのMaterial Design 3（Material You）の実装を支援し、Flutterおよび@material/webによる限定的なWeb対応にも対応します。カラー、タイプスケール、シェイプ、エレベーション、モーションに関するmd.sysトークンシステム、30以上のコンポーネントとそのバリエーションのクイックリファレンス、アダプティブなレイアウトとナビゲーション、テーマ設定とダイナミックカラー、M3 Expressiveのプラットフォームマトリクス、アクセシビリティをカバーします。
監査モードでは、アプリやページを10カテゴリーにわたって0〜10点で評価し、準拠状況レポートを作成します。これは、5つのウィンドウサイズクラス、シャドウの代わりに用いるトーナルエレベーション、8dpのスペーシングシステム、大画面ウィンドウにおける最大コンテンツ幅など、具体的なMD3のデフォルト値を必要とするデザイナーおよび開発者向けです。
生成されるもの
- 総合スコアとカテゴリー別スコア、重大な問題、警告、合格項目、優先度付きの修正案を含むMarkdown形式のMD3準拠レポートです。
- MaterialThemeから構築されたComposeテーマで、colorSchemeはdynamicLightColorScheme、lightColorSchemeのいずれか、あるいは生成されたテーマコードによって提供されます。
- md-sysカスタムプロパティによるCSSテーマブロックで、メディアクエリまたはクラスによって適用されるダークテーマバリアントを含みます。
仕組み
- 01スタックに特に指示がない限り、Composeから始めます
このファイルは、Jetpack Compose Material3をデフォルトのパスとして扱い、Decision Treeは、コードを書く前に、アプリシェル、単一コンポーネント、テーマ、フォーム、ナビゲーション、データ表示を、それぞれ特定のセクションおよび参照ファイルへ振り分けます。
- 02トークンレイヤーを適用する
MD3のすべてのトークンは md.sys ネームスペースに存在します。Composeでは同じセマンティックロールが MaterialTheme.colorScheme、typography、shapes にマッピングされ、Webでは md-sys で始まるCSSカスタムプロパティにマッピングされます。
- 03Quick Referenceでコンポーネントを選ぶ
コンポーネントテーブルには各コンポーネントのWeb要素名、主要なバリアント、カテゴリが一覧され、@material/web の実装がないコンポーネントにはフラグが付けられます。そうしたコンポーネントは代わりにCSSカスタムプロパティと標準HTMLで構築できます。
- 04Common Patternsで組み立てる
App Shell、Card Grid、Form Layoutの各パターンはHTMLとCSSで示されており、コンパクトな幅ではナビゲーションレールをボトムナビゲーションに切り替えるブレークポイントも含まれています。
- 05求められたときに監査する
audit で呼び出すと、スキルはURL、ソースファイル、または実行中のアプリを検査し、レポートを書く前に10のカテゴリを0から10で採点します。