Skip to content
Get packs

Compose Multiplatform Patterns

Guides the agent to write shared Compose UI code with state, navigation, theming and performance patterns

Source Download skill
Repository
affaan-m/ECC
Stars
295,127
Licence
MIT
Files
1 file

What it does

When installed, the agent gets a reference guide of recommended patterns for building user interfaces with Jetpack Compose and Compose Multiplatform, the Kotlin framework for sharing UI across Android, iOS, desktop and web. It covers how to hold screen state in ViewModels, set up type-safe navigation, design reusable components, handle platform-specific code, apply Material 3 theming and avoid unnecessary redraws. The guidance is written in Japanese and includes Kotlin code examples the agent can follow when writing or reviewing UI code.

Great for

  • Android or Kotlin Multiplatform developers building Compose screens
  • Teams who want consistent state management and navigation patterns in Compose code
  • Developers looking to improve recomposition performance in Compose UIs

Skip it if

  • Non-developers or projects that do not use Kotlin or Compose, since the patterns will not apply
  • Projects with a different UI toolkit such as SwiftUI or React, where these instructions would mislead the agent

Try asking

  • “Refactor this Compose screen to hold its state in a single data class exposed as a StateFlow”
  • “Set up type-safe navigation with Compose Navigation 2.8 for my Android app”
  • “Review my Composable functions for unnecessary recomposition and suggest fixes”
  • “Create a reusable card component with header, content and actions slots”
Step-by-step guide: how to use Compose Multiplatform PatternsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    compose-multiplatform-patterns.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip compose-multiplatform-patterns.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip compose-multiplatform-patterns.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask the agent to apply these patterns to a specific file or screen so it adapts examples to your existing code
  • Check the agent's output against your project's Compose and library versions, since some APIs such as the status bar helper are library-specific
  • The skill text is in Japanese; English prompts still work, but you can ask for English explanations if preferred

What's inside

  • SKILL.md

Redistributed unmodified from affaan-m/ECC under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.