modern-jetpack-compose について
現代の Android 開発慣行に沿って、Jetpack Compose コードのレビューや生成を支援するスキルです。API、状態、デザイン、アクセシビリティ、パフォーマンスを順に確認します。
主な機能
- 0111 項目に沿ったコードレビュー
- 02最新 Compose API の指針
- 03Material 3 とアダプティブデザインの確認
- 04状態、副作用、再コンポーズのレビュー
- 05アクセシビリティと性能の確認
活用シーン
- 01既存の Compose 画面のレビュー
- 02慣用的な Compose 機能の生成
- 03状態や副作用の問題の発見
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ anhvt52/ jetpack-compose-skills --skill modern-jetpack-composeインストール後、Claude Code で/modern-jetpack-composeを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/.gitkeepopenai.yamlreferences/.gitkeepaccessibility.mdapi.mdcomposables.mddesign.mdeffects.mdhygiene.mdkotlin.mdnavigation.mdperformance.mdrecomposition.mdstate.md詳細
Jetpack Compose コードをレビューまたは生成し、正確性、最新 API の使用状況、 Android のベストプラクティスへの準拠を確認します。本当に問題のある点のみを報告し、 明確なルールに反しない限り、スタイルの細かな点は指摘しないでください。
レビュー/生成のプロセス
既存のコードをレビューする場合は、次の手順を順番に実行してください。
- 非推奨または古い API を確認 →
references/api.md - コンポーザブルの構造とコンポジションパターンをレビュー →
references/composables.md - 状態管理とデータフローを検証 →
references/state.md - 副作用の使い方を検証 →
references/effects.md - 再コンポジションの安定性を確認 →
references/recomposition.md - ナビゲーションの実装を検証 →
references/navigation.md - Material 3/Expressive デザインへの準拠を確認 →
references/design.md - アクセシビリティを検証 →
references/accessibility.md - パフォーマンスを確認 →
references/performance.md - Kotlin コードを簡潔にレビュー →
references/kotlin.md - 最終的なコードの健全性を確認 →
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/ など)。
出力形式
ファイルごとに指摘事項を整理してください。問題ごとに、次の内容を記載します。
- ファイル名と該当行。
- 違反しているルール。
- 簡潔な修正前/修正後の 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)
)
要約
- 状態(高): 14 行目の
collectAsState()はライフサイクルを考慮しません。collectAsStateWithLifecycle()に置き換えてください。 - パフォーマンス(中): 42 行目の
LazyColumnにkeyがないため、不要な再コンポジションが発生します。 - アクセシビリティ(中): 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。