How to use the Compose Multiplatform Patterns agent skill

What the skill makes the agent do

A skill is a folder with a SKILL.md file that an agent reads when a task matches the skill's description. This one holds a set of Compose patterns with Kotlin code examples. When it applies, the agent follows those patterns instead of relying only on general knowledge.

The patterns cover state management, navigation, reusable components, platform-specific code, Material 3 theming and avoiding unnecessary redraws.

• Hold screen state in a ViewModel as a single data class exposed through StateFlow and collected in Compose
• Use an event sink (a sealed interface) instead of many callback lambdas on complex screens
• Set up type-safe navigation with @Serializable routes, and use dialog() for dialogs
• Design slot-based composables and order Modifiers consistently
• Use expect/actual for platform composables in KMP projects
• Improve recomposition with stable types, keys in lazy lists, derivedStateOf and fewer allocations
• Apply Material 3 dynamic theming

Install the skill from the ZIP

Download the ZIP from this page and unzip it. The skill is the compose-multiplatform-patterns folder containing SKILL.md. Put that folder in one of two places depending on how you want to use it.

For a personal setup available to all your projects, place it in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder so it travels with the repository.

If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.

• Personal: ~/.claude/skills/compose-multiplatform-patterns/
• Project: .claude/skills/compose-multiplatform-patterns/ inside your project

Trigger the skill with natural requests

You do not need a special command. The skill's description covers Compose Multiplatform and Jetpack Compose patterns for state, navigation, theming and performance, so ask for that work in plain language and name the framework and the task.

Being specific helps. Mention the screen, the state it holds, or the navigation you need, and say whether the code is shared KMP code or Android-only.

• Build a Compose screen that shows a searchable item list backed by a ViewModel
• Set up type-safe navigation between a home, detail and settings screen in Compose
• Review this Compose screen for unnecessary recomposition
• Create a reusable card composable with header, content and action slots
• Add Material 3 dynamic theming with dark mode support to this Compose app
• Write expect/actual status bar code for a Compose Multiplatform project

See an example of the pattern in use

When you ask for a screen, the agent should follow the state pattern from the guide: one immutable state class, a ViewModel that updates it, and a stateless composable that receives the state. The guide recommends this split because stateless composables are easier to preview and test.

The same approach applies to navigation. Routes are declared as @Serializable objects or classes, and the destination reads its arguments with toRoute, as in this line from the guide.

Check what you need before you start

The skill assumes a Kotlin project that uses Jetpack Compose or Compose Multiplatform. The type-safe navigation examples require a version of Compose Navigation that supports type-safe routes. The guide's examples use Koin for the ViewModel and kotlinx-style coroutines, so if your project uses different tools, tell the agent and adapt the examples.

The skill is written in Japanese. Agents generally read it, but if you work in English you may want to check the agent's explanations and code comments.

• A Kotlin project using Jetpack Compose or Compose Multiplatform
• Compose Navigation with type-safe routes for the navigation examples
• Not needed for SwiftUI, React or non-Kotlin projects, where these patterns would mislead the agent

Safety notes: scripts and network

According to the item listing, this skill runs no scripts and uses no network access. Its only file is SKILL.md, so it adds reference guidance to the agent's context and does not execute code on your machine.

The guidance still shapes the code the agent writes. Review the generated code the same way you would review any change, especially the ViewModel and navigation wiring, before you merge it.

• Runs scripts: no
• Uses network: no
• Files: SKILL.md

Tips for getting better results

Ask the agent to explain which pattern it used and why. This makes it easier to check that it followed the skill rather than its own habits.

Use the skill for review as well as writing. Asking for a review against the anti-patterns list is a practical way to find problems in existing screens.

• Name the screen and its state, for example loading, error and search query
• Ask for a review against the anti-patterns, such as NavController passed deep into the tree
• Keep heavy computation out of composables by asking for it to move to the ViewModel or remember
• Tell the agent when you need the related skills for architecture or coroutines, since this skill points to them