mcpField
M
modern-jetpack-compose

modern-jetpack-compose

github.com/anhvt52開発100332 回インストール33 週間前に更新
リポジトリ

modern-jetpack-compose について

現代の Android 開発慣行に沿って、Jetpack Compose コードのレビューや生成を支援するスキルです。API、状態、デザイン、アクセシビリティ、パフォーマンスを順に確認します。

主な機能

  1. 0111 項目に沿ったコードレビュー
  2. 02最新 Compose API の指針
  3. 03Material 3 とアダプティブデザインの確認
  4. 04状態、副作用、再コンポーズのレビュー
  5. 05アクセシビリティと性能の確認

活用シーン

  1. 01既存の Compose 画面のレビュー
  2. 02慣用的な Compose 機能の生成
  3. 03状態や副作用の問題の発見

インストール

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

$npx skills add https://github.com/anhvt52/jetpack-compose-skills --skill modern-jetpack-compose

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

同梱ファイル

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

agents/
.gitkeep
openai.yaml
references/
.gitkeep
accessibility.md
api.md
composables.md
design.md
effects.md
hygiene.md
kotlin.md
navigation.md
performance.md
recomposition.md
state.md

詳細

Jetpack Compose コードをレビューまたは生成し、正確性、最新 API の使用状況、 Android のベストプラクティスへの準拠を確認します。本当に問題のある点のみを報告し、 明確なルールに反しない限り、スタイルの細かな点は指摘しないでください。

レビュー/生成のプロセス

既存のコードをレビューする場合は、次の手順を順番に実行してください。

  1. 非推奨または古い API を確認 → references/api.md
  2. コンポーザブルの構造とコンポジションパターンをレビュー → references/composables.md
  3. 状態管理とデータフローを検証 → references/state.md
  4. 副作用の使い方を検証 → references/effects.md
  5. 再コンポジションの安定性を確認 → references/recomposition.md
  6. ナビゲーションの実装を検証 → references/navigation.md
  7. Material 3/Expressive デザインへの準拠を確認 → references/design.md
  8. アクセシビリティを検証 → references/accessibility.md
  9. パフォーマンスを確認 → references/performance.md
  10. Kotlin コードを簡潔にレビュー → references/kotlin.md
  11. 最終的なコードの健全性を確認 → references/hygiene.md

新しいコードを生成する場合は、コードを書く前に、実装する機能に関連するリファレンスファイルを読み込み、最初から慣用的なコードを出力してください。

部分的なレビューや対象を絞った生成では、関連するリファレンスファイルのみを読み込んでください。

基本方針

  • デフォルトでは Compose BOM 2024.x を対象にします。BOM 2025.x(Material Expressive)で新しいコンポーネントや API が導入されている場合は、その旨を記載してください。
  • Material 3 を使用してください。プロジェクトですでに使用されている場合を除き、Material 2 は使用しないでください。
  • アーキテクチャ:単方向データフロー(UDF)を採用した MVVM。画面の状態には ViewModel と StateFlow を使用します。Compose UI は状態を監視し、イベントを送信します。
  • 最新の言語機能(sealed interface、coroutines、Flow)を備えた Kotlin を対象とします。
  • 事前に確認せず、サードパーティ製ライブラリを追加しないでください。
  • 重要度の高い各コンポーザブルは、それぞれ別のファイルに配置してください。
  • 技術レイヤーではなく機能ごとに整理してください(screens/home/、screens/settings/ など)。

出力形式

ファイルごとに指摘事項を整理してください。問題ごとに、次の内容を記載します。

  1. ファイル名と該当行。
  2. 違反しているルール。
  3. 簡潔な修正前/修正後の Kotlin コード例。

問題のないファイルは省略してください。最後に、影響の大きい変更から順に、優先度を付けて要約してください。

出力例:

HomeScreen.kt

14 行目:collectAsState() ではなく collectAsStateWithLifecycle() を使用してください。

// Before
val uiState by viewModel.uiState.collectAsState()

// After
val uiState by viewModel.uiState.collectAsStateWithLifecycle()

42 行目:LazyColumn の項目識別を安定させるため、key を指定してください。

// Before
LazyColumn {
    items(books) { book ->
        BookItem(book)
    }
}

// After
LazyColumn {
    items(books, key = { it.id }) { book ->
        BookItem(book)
    }
}

67 行目:Image に contentDescription がありません。アクセシビリティのために必要です。

// Before
Image(painter = painterResource(R.drawable.cover), contentDescription = null)

// After — if decorative:
Image(painter = painterResource(R.drawable.cover), contentDescription = null) // OK if truly decorative

// After — if meaningful:
Image(
    painter = painterResource(R.drawable.cover),
    contentDescription = stringResource(R.string.book_cover_description)
)
要約
  1. 状態(高): 14 行目の collectAsState() はライフサイクルを考慮しません。collectAsStateWithLifecycle() に置き換えてください。
  2. パフォーマンス(中): 42 行目の LazyColumn に key がないため、不要な再コンポジションが発生します。
  3. アクセシビリティ(中): 67 行目の Image に、意味のある contentDescription が必要です。

リファレンス

  • references/api.md — 非推奨 API とその最新の置き換え方法。
  • references/composables.md — コンポーザブルの構造、命名、コンポジションパターン。
  • references/state.md — 状態管理、ViewModel、StateFlow、データフロー。
  • references/effects.md — 副作用:LaunchedEffect、DisposableEffect、SideEffect。
  • references/recomposition.md — 再コンポジションの安定性、@Stable/@Immutable、derivedStateOf。
  • references/navigation.md — Navigation Compose、型安全なナビゲーション、ネストされたグラフ。
  • references/design.md — Material 3/Expressive のテーマ設定、アダプティブレイアウト。
  • references/accessibility.md — TalkBack、セマンティクス、コンテンツの説明、タッチターゲット。
  • references/performance.md — LazyList の最適化、remember、状態読み取りのスコープ。
  • references/kotlin.md — Android 向けの最新 Kotlin パターン。
  • references/hygiene.md — コードの健全性、テスト、lint。

コメント