ReddRadar
Agent skill
material3-expressive
Material 3 Expressiveガイドラインに沿ったUI実装を提供するスキル。Jetpack Composeで画面やコンポーネントを作成する際に使用。MotionScheme、新しいExpressiveコンポーネント、テーマ設定のパターンを提供。
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/material3-expressive
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?