compose-expert

インストールに関するお知らせ： このスキルは現在、プラグインとして配布されています。 手動でファイルを ~/.claude/skills/ にコピーした場合は、メンテナンスされていない インストール方法を利用しているため、更新を受け取れません。次の手順で移行してください。

/plugin marketplace add aldefy/compose-skill
/plugin install compose-expert

Codex および Copilot CLI の手順については、MIGRATION.md を参照してください。 このバナーは v2.x の間は表示され、v3.0 では警告が強化されます。

このスキルが適用される場合

frontmatter の description: は、Codex／Copilot CLI におけるこのフィールドの 1024 文字制限を満たすため、意図的に短くしています（issue #12 を参照）。トリガーの全体像は ここに記載してあり、スキルの読み込み後も Claude が参照できます。

Compose API に関する言及

@Composable、remember、mutableStateOf、derivedStateOf、rememberSaveable、 LaunchedEffect、DisposableEffect、SideEffect、rememberCoroutineScope、 Scaffold、NavHost、NavController、MaterialTheme、ColorScheme、 Typography、LazyColumn、LazyRow、LazyVerticalGrid、HorizontalPager、 Modifier、Modifier.Node、recomposition、CompositionLocal、Style、 styleable、MutableStyleState、Material 3 Expressive、M3 Expressive、 MaterialExpressiveTheme、ButtonGroup、SplitButton、 FloatingActionButtonMenu、LoadingIndicator、HorizontalFloatingToolbar、 NavDisplay、NavKey、rememberNavBackStack、NavigableListDetailPaneScaffold。

Compose Multiplatform／KMP

Compose Multiplatform、CMP、KMP、commonMain、expect、actual、 ComposeUIViewController、Window composable、UIKitView、ComposeViewport、 Res.drawable、Res.string、SkikoMain。

Android TV

tv-material、tv-foundation、Carousel、NavigationDrawer（TV）、 D-pad、フォーカス表示、TV での FocusRequester、10-foot UI、 リビングルーム、tv compose、Android TV、Google TV、leanback からの移行。

Paging 3

PagingSource、Pager、PagingConfig、PagingData、LazyPagingItems、 collectAsLazyPagingItems、RemoteMediator、LoadState、 asSnapshot、TestPager、cachedIn。

デザインシステム／デザインからコードへの変換

atomic design、atoms、molecules、organisms、templates、 デザイントークン、デザインシステム、コンポーネントライブラリ、再利用可能なコンポーネント、 Figma to Compose、design to compose、「この UI を作成して」、「このデザインを実装して」、 「仕様からコードへ」、「レッドライン」。

カジュアルな表現

「Compose の画面が遅い」、「recomposition が壊れている」、 「画面間でデータを渡すにはどうすればよいですか」、「TV アプリを作るにはどうすればよいですか」、 「Android UI」、「Kotlin UI」、「Compose レイアウト」、「Compose ナビゲーション」、 「Compose アニメーション」、「Compose スタイル」、「デスクトップ Compose」、「iOS Compose」、 「Compose Web」。

レビューモードのトリガー

github.com/.*/pull/\d+ に一致する GitHub PR の URL、または次のフレーズ： 「この PR をレビューして」、「この diff をレビューして」、「このコードをレビューして」、 「このコードを確認して」、「この diff を確認して」、「何がおかしいのか」。 一致した場合は、references/pr-review.md のみを参照してください。

セッション開始時

session_start で Compose プロジェクトを自動検出します。references/auto-init.md を参照してください。

クイックルーティング

まずこの表を使用してください。ユーザーの意図に合う参照ファイルを 1 つ選び、回答する前に 読み込んでください。source-code/ ファイルは補足資料です。まず references/*.md ファイルを 読み込んでから、根拠が必要な場合に実装の証拠として source-code/ を引用してください。

状態、再コンポジション、副作用

• remember、rememberSaveable、mutableStateOf と mutableIntStateOf の違い、状態のホイスティング → references/state-management.md
• derivedStateOf、snapshotFlow、UI での StateFlow、再コンポジションのスコープ境界 → references/state-management.md（副次的な参照先：references/performance.md）
• LaunchedEffect、SideEffect、DisposableEffect、rememberUpdatedState、rememberCoroutineScope → references/side-effects.md
• 再コンポジションの頻度、「画面が再コンポジションされすぎる」、安定性、@Stable／@Immutable、Compose コンパイラーのメトリクス、ベースラインプロファイル、強いスキップ → references/performance.md
• CompositionLocal、アンビエント値、テーマの伝播、LocalContext の誤用、カスタムローカル → references/composition-locals.md

アニメーションとモーション

• animate*AsState、AnimatedVisibility、Crossfade、updateTransition、Animatable、rememberInfiniteTransition → references/animation.md
• 共有要素の遷移、ジェスチャー駆動のアニメーション、Modifier.graphicsLayer、Canvas 描画、カスタムのモーション仕様 → references/animation.md（graphicsLayer の副次的な参照先：references/modifiers.md）
• M3 モーショントークン、MotionTokens、MotionScheme、アニメーション時間のトークン、M3 イージングカーブ → references/material3-motion.md

レイアウト、リスト、修飾子

• LazyColumn、LazyRow、LazyVerticalGrid、LazyHorizontalGrid、key／itemKey、contentType、LazyListState、スクロール状態、スティッキーヘッダー → references/lists-scrolling.md
• HorizontalPager、VerticalPager、PagerState → references/lists-scrolling.md
• 修飾子チェーンの順序、カスタムレイアウト、Layout、SubcomposeLayout、レイアウト修飾子、描画修飾子、Painter、Modifier.Node → references/modifiers.md

ナビゲーション

• NavHost、NavController、バックスタック、ディープリンク、型安全な @Serializable ルート、ナビゲーショングラフ、ネストされたグラフ → references/navigation.md
• Nav 2 から Nav 3 への移行、NavDisplay、NavKey、rememberNavBackStack、NavBackStackEntry の変更点 → references/navigation-migration.md
• Nav 2 と Nav 3 の選択、型安全なナビゲーションの選択、KMP ナビゲーション → references/navigation-migration.md（副次的な参照先：references/navigation.md）
• Nav 3 の高度なトピック：遷移先間での結果の受け渡し、認証ゲート付き／条件付きナビゲーション、NavDisplay でのアニメーション／共有要素の遷移、アダプティブなリスト詳細表示（NavigableListDetailPaneScaffold）、複数／タブごとのバックスタック → references/navigation-migration.md

ページング

• PagingSource、PagingData、Pager のセットアップ、PagingConfig、pagingDataFlow、無効化 → references/paging.md
• LazyPagingItems、collectAsLazyPagingItems、itemKey、itemContentType、UI での LoadState、再試行／更新 → references/paging.md
• RemoteMediator、オフライン優先のページング、ネットワーク＋キャッシュのページング、loadState.source.refresh → references/paging-offline.md
• MVI でのページング、デュアルフローパターン、ページングのテスト（asSnapshot、TestPager）、CombinedLoadStates、ページングのアンチパターン → references/paging-mvi-testing.md

テーマ設定とデザインシステム

• MaterialTheme、ColorScheme、Typography、Shapes、ダイナミックカラー、M3 トークン、カラーの役割 → references/theming-material3.md
• Material 3 Expressive、MaterialExpressiveTheme、ButtonGroup、SplitButton、FloatingActionButtonMenu、LoadingIndicator（波状）、HorizontalFloatingToolbar、@ExperimentalMaterial3ExpressiveApi → references/theming-material3.md（モーション：references/material3-motion.md）
• アトム、モレキュール、オーガニズム、テンプレート、コンポーネント階層、デザインシステムの構成、再利用可能なコンポーネント、デザイントークン → references/atomic-design.md
• Figma → Compose、スクリーンショット → コンポーザブル、デザイントークンの変換、仕様からコードへの変換、レッドラインの解釈 → references/design-to-compose.md
• Style {}、MutableStyleState、Modifier.styleable()（実験的な Foundation Styles API） → references/styles-experimental.md

マルチプラットフォームとプラットフォーム固有の機能

• iOS／Desktop／Web の CMP ターゲット、expect／actual、commonMain、Res.drawable、Res.string、プラットフォーム固有のコンポーザブル → references/multiplatform.md
• ComposeUIViewController（iOS）、Window／Tray／MenuBar（Desktop）、UIKitView、ComposeViewport（Web）、プラットフォーム間の相互運用 → references/platform-specifics.md
• TV Compose、androidx.tv、D-pad フォーカス、TV でのFocusRequester、Carousel、NavigationDrawer（TV）、10 フィート UI、leanback からの移行 → references/tv-compose.md

相互運用とアクセシビリティ

• XML 内の Compose、AndroidView、ComposeView、AbstractComposeView、ハイブリッド移行、View → Compose の相互運用 → references/view-composition.md
• アクセシビリティ、Modifier.semantics、TalkBack、タッチターゲットのサイズ、contentDescription、WCAG、トラバーサル順序 → references/accessibility.md

本番環境、レビュー、移行

• 本番環境でのクラッシュ、ANR、Compose のスタックトレース、remember のリーク、サイズが 0 の DrawScope、キーの重複、古いderivedStateOf → references/production-crash-playbook.md
• PR レビュー、コードレビュー、「この差分をレビューしてください」、コンポーザブルのアンチパターン、コードの問題点の検出、GitHub PR URL → references/pr-review.md
• 非推奨の Compose API、「バージョン X で削除」、古い API からの移行、置き換えられたシンボル → references/deprecated-patterns.md
• 実験的 API のオプトイン、@OptIn、@ExperimentalFoundationStyleApi、不安定な API の使用 → references/styles-experimental.md（Styles の場合）。一般的なガイダンスについては、該当するトピックファイルを参照してください
• セッション開始、プロジェクトの検出、自動初期化 → references/auto-init.md

ソースコードの根拠（案内先ではなく、引用先）

• 「実際の実装を見せてください」「androidx のどこにありますか」、Compose の内部的な仕組み → まずトピックのリファレンスを読み込んでから、該当するreferences/source-code/*.mdファイルを引用してください：
  • Runtime／state の内部実装（Composer、Snapshot、Effects、Remember）→ references/source-code/runtime-source.md
  • UI／レイアウト／計測／描画の内部実装 → references/source-code/ui-source.md
  • Foundation（LazyList、Pager、Clickable、Scrollable、BasicTextField）→ references/source-code/foundation-source.md
  • Material3 コンポーネント → references/source-code/material3-source.md
  • Navigation Compose の内部実装 → references/source-code/navigation-source.md
  • CMP のエントリーポイント（Window、ComposeUIViewController、UIKitView、ComposeViewport）→ references/source-code/cmp-source.md

Compose Expert Skill

Android、Desktop、iOS、Web にわたって、正しく高性能な Compose コードを記述するための、特定の意見に偏らない実践的なガイダンスです。Jetpack Compose と Compose Multiplatform を扱います。 androidx/androidx とJetBrains/compose-multiplatform-coreの実際のソースコードの分析に基づいています。

レビューモード

次の場合に有効になります。 入力に GitHub PR の URL（github.com/.+/pull/\d+）または明示的なレビュー依頼のフレーズ（「この PR をレビューして」「この差分をレビューして」「このコードを確認して」「何が問題ですか」）が含まれている場合。

レビューモードが有効になった場合：

1. 以下の生成ワークフローには従わないでください
2. references/pr-review.md を読み、そのワークフローのみに従ってください
3. 構造化されたローカルのレビュー報告を出力してください — GitHub には投稿しないでください

ワークフロー

Compose コードを支援する際は、次のチェックリストに従ってください。

1. 依頼を把握する

• どの Compose レイヤーが関係していますか？（Runtime、UI、Foundation、Material3、Navigation）
• 状態の問題、レイアウトの問題、パフォーマンスの問題、アーキテクチャに関する質問のどれですか？
• Android 専用ですか、それとも Compose Multiplatform（CMP）ですか？

2. 設計を分析する（視覚的な参照が提供されている場合）

• ユーザーが Figma フレーム、スクリーンショット、またはデザイン仕様を共有した場合は、references/design-to-compose.md を参照してください
• 5 ステップの手法を使って、デザインをコンポーザブルのツリーに分解してください
• デザイントークンを MaterialTheme に、スペーシングを CompositionLocals に割り当ててください
• アニメーションの必要性を特定し、レシピについては references/animation.md を参照してください

3. 適切なリファレンスを参照する

回答する前に、references/ から関連するリファレンスファイルを読んでください。

トピック	リファレンスファイル
@State、remember、mutableStateOf、状態のホイスティング、derivedStateOf、snapshotFlow	references/state-management.md
コンポーザブルの構成、スロット、切り出し、プレビュー	references/view-composition.md — デザインシステムの構成については、references/atomic-design.md も参照してください
Modifier の順序、カスタム Modifier、Modifier.Node	references/modifiers.md
LaunchedEffect、DisposableEffect、SideEffect、rememberCoroutineScope	references/side-effects.md
CompositionLocal、LocalContext、LocalDensity、カスタムローカル	references/composition-locals.md
LazyColumn、LazyRow、LazyGrid、Pager、キー、コンテンツタイプ	references/lists-scrolling.md
NavHost、型安全なルート、ディープリンク、共有要素トランジション	references/navigation.md
animate*AsState、AnimatedVisibility、Crossfade、トランジション	references/animation.md — M3 トークンの選択については、references/material3-motion.md も参照してください
MaterialTheme、ColorScheme、ダイナミックカラー、Typography、シェイプ	references/theming-material3.md — モーションについては、references/material3-motion.md を参照してください。デザイントークンについては、references/atomic-design.md を参照してください
再コンポジションのスキップ、安定性、ベースラインプロファイル、ベンチマーク	references/performance.md
セマンティクス、コンテンツの説明、走査順序、テスト	references/accessibility.md
削除または置き換えられた API、以前の Compose バージョンからの移行方法	references/deprecated-patterns.md
Styles API（実験的）：Style {}、MutableStyleState、Modifier.styleable()	references/styles-experimental.md
Figma／スクリーンショットの分解、デザイントークン、スペーシング、Modifier の順序	references/design-to-compose.md
本番環境でのクラッシュパターン、防御的なコーディング、状態／パフォーマンスのルール	references/production-crash-playbook.md
Compose Multiplatform、expect／actual、リソース（Res.*）、移行	references/multiplatform.md
デスクトップ（Window、Tray、MenuBar）、iOS（UIKitView）、Web（ComposeViewport）	references/platform-specifics.md
TV Compose：Surface、Carousel、NavigationDrawer、Cards、フォーカス、D-pad	references/tv-compose.md
M3 モーショントークン、MotionTokens、MotionScheme、アニメーションの時間、イージング	references/material3-motion.md
PR URL、コードレビュー、「この PR をレビューして」、「何が問題ですか」	references/pr-review.md
セッションの開始、プロジェクトの検出	references/auto-init.md
アトミックデザイン、デザインシステム、再利用可能なコンポーネント、コンポーネントライブラリ、デザイントークン	references/atomic-design.md

4. 適用と検証

• リファレンスのパターンに従うコードを記述します
• ユーザーの既存コードにアンチパターンがあれば指摘します
• 最小限で正しい解決策を提案します。過剰に複雑化しないでください

4a. コンポーネント構築モード

リクエストがコンポーネント（UI を描画するコンポーザブル）の構築に関する場合：

• references/atomic-design.md を参照します
• コンポーネントのレベル（アトム、モレキュール、オーガニズム、テンプレート）を分類します
• コードのひな型を作成する前に、Section 5 の「Ask」プロンプトを適用します
• コンポーネントがアトムの契約（修飾子、スロット、トークン、デフォルト値）を満たすようにします

5. 出典を引用する

Compose の内部実装に言及する場合は、正確なソースファイルを示します：

// See: compose/runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/Composer.kt

重要な原則

1. Compose は 3 つのフェーズで処理します：Composition → Layout → Drawing。各フェーズでの状態読み取りは、そのフェーズと後続のフェーズのみの処理をトリガーします。

2. 再コンポジションは頻繁に発生し、低コストです — ただし、変更されていないスコープをコンパイラーがスキップできるようにすることが前提です。安定した型を使用し、コンポーザブルの本体での割り当てを避けてください。

3. Modifier の順序は重要です。Modifier.padding(16.dp).background(Color.Red) と Modifier.background(Color.Red).padding(16.dp) では、見た目が異なります。

4. 状態はできる限り低い位置に置き、必要な範囲だけ高い位置に持ち上げます。できるからという理由だけで、すべてを ViewModel に入れないでください。

5. 副作用は、Compose の宣言的な世界と命令型 API をつなぐためのものです。目的に合ったものを使ってください。誤用すると、原因を特定しにくいバグにつながります。

6. Compose Multiplatform はランタイムを共有しますが、プラットフォームは共有しません。commonMain の UI コードは移植可能です。プラットフォーム固有の API（LocalContext、BackHandler、Window）には、expect／actual または条件付きソースセットが必要です。

ソースコードの根拠

ガイダンスのドキュメントに加えて、このスキルには androidx/androidx（ブランチ：androidx-main）および JetBrains/compose-multiplatform-core （ブランチ：jb-main）の実際のソースコードが含まれています。内部の動作を確認する必要がある場合や、ユーザーから「実際の実装を見せて」と求められた場合は、 references/source-code/ のソースを参照します：

モジュール	ソースリファレンス	主なファイル
ランタイム	references/source-code/runtime-source.md	Composer.kt、Recomposer.kt、State.kt、Effects.kt、CompositionLocal.kt、Remember.kt、SlotTable.kt、Snapshot.kt
UI	references/source-code/ui-source.md	AndroidCompositionLocals.android.kt、Modifier.kt、Layout.kt、LayoutNode.kt、ModifierNodeElement.kt、DrawModifier.kt
Foundation	references/source-code/foundation-source.md	LazyList.kt、LazyGrid.kt、BasicTextField.kt、Clickable.kt、Scrollable.kt、Pager.kt
Material3	references/source-code/material3-source.md	MaterialTheme.kt、ColorScheme.kt、Button.kt、Scaffold.kt、TextField.kt、NavigationBar.kt
Navigation	references/source-code/navigation-source.md	NavHost.kt、ComposeNavigator.kt、NavGraphBuilder.kt、DialogNavigator.kt
CMP	references/source-code/cmp-source.md	Window.kt、ComposeUIViewController.kt、UIKitView.kt、ComposeViewport.kt、ResourceReader.kt

2 層アプローチ

1. まずガイダンスを確認 — トピック固有のリファレンス（例：references/state-management.md）を読みます
2. 次にソースを詳しく確認 — ユーザーが根拠を求めている場合や、検証が必要な場合は、references/source-code/ のソースを読みます

ソースツリーのマップ

androidx/androidx (branch: androidx-main)
├── compose/runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/
├── compose/ui/ui/src/androidMain/kotlin/androidx/compose/ui/platform/
├── compose/ui/ui/src/commonMain/kotlin/androidx/compose/ui/
├── compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/
├── compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/
├── compose/navigation/navigation-compose/src/commonMain/kotlin/androidx/navigation/compose/
├── tv/tv-material/src/main/java/androidx/tv/material3/
└── tv/tv-foundation/src/main/java/androidx/tv/foundation/

compose-multiplatform-core (branch: jb-main)
├── compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/window/
├── compose/ui/ui/src/iosMain/kotlin/androidx/compose/ui/window/
├── compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/window/
├── compose/ui/ui/src/skikoMain/kotlin/androidx/compose/ui/
└── compose/foundation/foundation/src/skikoMain/kotlin/androidx/compose/foundation/

compose-multiplatform (resources library)
└── components/resources/library/src/commonMain/