mcpField
M
mobile-android-design

mobile-android-design

github.com/wshobsonデザイン・UI41.9k25.2k 回インストール2 週間前に更新
リポジトリ

mobile-android-design について

Material Design 3とJetpack Composeを使ったAndroidアプリの設計・開発向けスキルです。アダプティブレイアウト、ナビゲーション、テーマ、アクセシビリティ、Android固有の操作を扱います。

主な機能

  1. 01Material Design 3の指針
  2. 02Jetpack ComposeのUIパターン
  3. 03Navigation Composeのナビゲーション
  4. 04スマートフォン・タブレット向けレイアウト
  5. 05ダイナミックカラーとテーマ
  6. 06アクセシビリティとタッチ領域

活用シーン

  1. 01Material 3のAndroid画面設計
  2. 02Compose画面とレイアウトの構築
  3. 03スマートフォン、タブレット、折りたたみ端末への対応
  4. 04アクセシビリティと操作性の改善

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/wshobson/agents --skill mobile-android-design

インストール後、Claude Code で/mobile-android-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
android-navigation.md
compose-components.md
details.md
material3-theming.md

詳細

Android モバイルデザイン

Material Design 3 (Material You) と Jetpack Compose を習得し、Android エコシステムとシームレスに統合する、モダンで適応性の高い Android アプリケーションを構築します。

このスキルを使用する場面

  • Material Design 3 に従って Android アプリのインターフェースを設計する
  • Jetpack Compose の UI とレイアウトを構築する
  • Android のナビゲーションパターン (Navigation Compose) を実装する
  • スマートフォン、タブレット、折りたたみ式デバイス向けの適応型レイアウトを作成する
  • 動的カラーを使用した Material 3 のテーマ設定を行う
  • アクセシブルな Android インターフェースを構築する
  • Android 固有のジェスチャーとインタラクションを実装する
  • さまざまな画面構成向けに設計する

詳細セクション: 中核となる概念

もともとこの SKILL.md にあった 9201 バイトのセクションです。Codex のスキル本文 8 KB の上限に収めるため、references/details.md に移動しました。

クイックスタートコンポーネント

@Composable
fun ItemListCard(
    item: Item,
    onItemClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        onClick = onItemClick,
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(12.dp)
    ) {
        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primaryContainer),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.Star,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.onPrimaryContainer
                )
            }

            Spacer(modifier = Modifier.width(16.dp))

            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = item.title,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = item.subtitle,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }

            Icon(
                imageVector = Icons.Default.ChevronRight,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

ベストプラクティス

  1. Material Theme を使用する: 自動ダークモード対応のために、MaterialTheme.colorScheme 経由で色にアクセスします
  2. 動的カラーをサポートする: パーソナライズのために Android 12 以降で動的カラーを有効にします
  3. 適応型レイアウト: レスポンシブデザインには WindowSizeClass を使用します
  4. コンテンツの説明: すべてのインタラクティブ要素に contentDescription を追加します
  5. タッチターゲット: アクセシビリティのために最小 48dp のタッチターゲットを確保します
  6. 状態のホイスティング: コンポーネントを再利用可能かつテスト可能にするために状態をホイストします
  7. 適切に remember する: remember と rememberSaveable を適切に使い分けます
  8. プレビューアノテーション: さまざまな構成で @Preview を追加します

よくある問題

  • 再コンポジションの問題: 不安定なラムダを渡すのは避け、remember を使用します
  • 状態の喪失: 構成変更には rememberSaveable を使用します
  • パフォーマンス: 長いリストには Column ではなく LazyColumn を使用します
  • テーマの漏れ: すべてのコンポーザブルが MaterialTheme でラップされていることを確認します
  • ナビゲーションのクラッシュ: 戻る操作とディープリンクを適切に処理します
  • メモリリーク: DisposableEffect 内でコルーチンをキャンセルします

コメント

Markdown 対応