mcpField
K
kotlin-compose

kotlin-compose

github.com/pluginagentmarketplace開発766 回インストール43 週間前に更新
リポジトリ

kotlin-compose について

Kotlin 開発者が Jetpack Compose で宣言型 UI を構築するためのスキルです。状態、副作用、Modifier、Material 3 のテーマに加え、再コンポーズや状態保持の問題への対処を扱います。

主な機能

  1. 01Compose の状態管理
  2. 02副作用の処理
  3. 03Modifier の使用
  4. 04Material 3 のテーマ設定
  5. 05再コンポーズと状態の問題解決

活用シーン

  1. 01状態を持つ Compose 画面の実装
  2. 02入力変化に応じた副作用の処理
  3. 03Material 3 による UI のスタイル設定
  4. 04再コンポーズや回転後の状態消失の調査

インストール

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

$npx skills add https://github.com/pluginagentmarketplace/custom-plugin-kotlin --skill kotlin-compose

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

同梱ファイル

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

assets/
config.yaml
schema.json
references/
GUIDE.md
PATTERNS.md
scripts/
validate.py

詳細

Kotlin Compose スキル

Jetpack Compose の宣言的なパターンで、モダンな UI を構築します。

対応トピック

状態管理
@Composable
fun Counter() {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) { Text("Count: $count") }
}

// Derived state
val isValid by remember { derivedStateOf { email.isNotBlank() && password.length >= 8 } }
副作用
@Composable
fun UserScreen(userId: String) {
    LaunchedEffect(userId) {
        viewModel.loadUser(userId)
    }

    DisposableEffect(Unit) {
        val listener = viewModel.addListener()
        onDispose { listener.remove() }
    }
}
修飾子
Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
        .background(MaterialTheme.colorScheme.surface)
        .clickable { onClick() }
)
Material 3 のテーマ設定
@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()
    MaterialTheme(colorScheme = colorScheme, typography = Typography, content = content)
}

トラブルシューティング

問題解決方法
無限の再コンポジションremember または derivedStateOf を使用します
画面回転時に状態が失われるrememberSaveable または ViewModel を使用します

使用方法

Skill("kotlin-compose")

コメント

Markdown 対応