How do I install the Material3 Expressive skill?

Run npx skillmds add majiayu000/material3-expressive in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Material3 Expressive safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Material3 Expressive?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Material3 Expressive free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Material3 Expressive?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Material3 Expressive by majiayu000 — Agent Skill

Name: Material3 Expressive
Rating: 4.2 (5 reviews)
Author: majiayu000

Material3 Expressive

Material 3 Expressiveガイドラインに沿ったUI実装を提供するスキル。Jetpack Composeで画面やコンポーネントを作成する際に使用。MotionScheme、新しいExpressiveコンポーネント、テーマ設定のパターンを提供。

majiayu000 094efd1 2 files · 2.5 KB Updated Sep 9, 2026 567 repo stars

File contents

Material 3 Expressive UI作成ガイド

Jetpack ComposeでUI作成時は Material 3 Expressive のガイドラインに従う。

必須要件

要件	値
minSdk	23以上
Material3	1.5.0-alpha以上（Expressiveコンポーネント含む）
OptIn	`@OptIn(ExperimentalMaterial3ExpressiveApi::class)`

クイックリファレンス

テーマ設定

MaterialTheme(
    colorScheme = colorScheme,
    typography = typography,
    shapes = shapes,
    motionScheme = MotionScheme.expressive()
) { content() }

推奨コンポーネント

用途	コンポーネント	備考
読み込み表示	`LoadingIndicator`	5秒未満の待機時間用
読み込み表示（コンテナ付き）	`ContainedLoadingIndicator`	-
ボトムツールバー	`DockedToolbar`	BottomAppBarの代替
フローティングツールバー	`FloatingToolbar`	水平・垂直対応
可変ボトムバー	`FlexibleBottomAppBar`	スクロール連動

非推奨 → 代替

非推奨	代替
`BottomAppBar`	`DockedToolbar`
`CircularProgressIndicator`（短時間）	`LoadingIndicator`

ベストプラクティス

MotionScheme.expressive() で流れるようなアニメーション
形状のモーフィングを活用
カラーロールを遵守（アクセシビリティ自動対応）
Android 12+でダイナミックカラーをサポート
Elevationはトーナルカラーオーバーレイで表現

詳細

コンポーネント詳細・テーマ設定: REFERENCE.md
実装例: EXAMPLES.md

---name: material3-expressivedescription: Material 3 Expressiveガイドラインに沿ったUI実装を提供するスキル。Jetpack Composeで画面やコンポーネントを作成する際に使用。MotionScheme、新しいExpressiveコンポーネント、テーマ設定のパターンを提供。--- # Material 3 Expressive UI作成ガイド Jetpack ComposeでUI作成時は **Material 3 Expressive** のガイドラインに従う。 ## 必須要件 | 要件 | 値 | |------|-----| | minSdk | 23以上 | | Material3 | 1.5.0-alpha以上（Expressiveコンポーネント含む） | | OptIn | `@OptIn(ExperimentalMaterial3ExpressiveApi::class)` | ## クイックリファレンス ### テーマ設定 ```kotlin MaterialTheme( colorScheme = colorScheme, typography = typography, shapes = shapes, motionScheme = MotionScheme.expressive() ) { content() } ``` ### 推奨コンポーネント | 用途 | コンポーネント | 備考 | |------|----------------|------| | 読み込み表示 | `LoadingIndicator` | 5秒未満の待機時間用 | | 読み込み表示（コンテナ付き） | `ContainedLoadingIndicator` | - | | ボトムツールバー | `DockedToolbar` | BottomAppBarの代替 | | フローティングツールバー | `FloatingToolbar` | 水平・垂直対応 | | 可変ボトムバー | `FlexibleBottomAppBar` | スクロール連動 | ### 非推奨 → 代替 | 非推奨 | 代替 | |--------|------| | `BottomAppBar` | `DockedToolbar` | | `CircularProgressIndicator`（短時間） | `LoadingIndicator` | ## ベストプラクティス 1. `MotionScheme.expressive()` で流れるようなアニメーション 2. 形状のモーフィングを活用 3. カラーロールを遵守（アクセシビリティ自動対応） 4. Android 12+でダイナミックカラーをサポート 5. Elevationはトーナルカラーオーバーレイで表現 ## 詳細 - コンポーネント詳細・テーマ設定: `REFERENCE.md` - 実装例: `EXAMPLES.md`

Frequently asked questions