Skip to content
UXClaim
Design Systems

Compose Multiplatform Development

Kotlin Multiplatform skill for building cross-platform apps with Compose, Material 3, and Koin dependency injection.

View source More in Design Systems

What It Does

Greenfish CMP Skill is a practical development guide for building Compose Multiplatform applications. It combines Kotlin Multiplatform for shared logic with Compose Multiplatform for declarative UI across iOS, Android, and desktop platforms.

How It Works

The skill enforces consistent patterns through an MVI (Model-View-Intent) architecture with unidirectional state flows. It uses Koin annotations with KSP for compile-time-safe dependency injection, eliminating manual wiring. Every screen follows strict conventions: one class per file, named design tokens instead of magic numbers, mock data separation, and adaptive layouts that switch from bottom navigation (under 600dp) to sidebar navigation (600dp+).

Use Cases

  • Building cross-platform apps that share code across Android, iOS, and desktop
  • Implementing consistent Material 3 design systems across platforms
  • Setting up maintainable Kotlin projects with clear architectural patterns
  • Creating adaptive UIs that respond to different screen sizes

Who Benefits

Design system leads and product designers working with development teams on multiplatform products. Useful for teams standardizing component patterns and ensuring UI consistency across platforms without duplicating design logic.

Frequently asked questions

What is Compose Multiplatform and why use it?
Compose Multiplatform lets you write declarative UI code once and deploy to Android, iOS, and desktop. It shares both logic and design patterns across platforms, reducing duplication and ensuring consistency. This skill specifically packages best practices for managing that complexity.
How does MVI architecture work in this skill?
MVI (Model-View-Intent) creates one unidirectional state flow per screen. User interactions send intents, which update the model, which updates the view. This pattern keeps state predictable and makes debugging easier across platforms.
What is Koin and how does this skill use it?
Koin is a dependency injection framework. This skill uses Koin annotations with KSP (Kotlin Symbol Processing) for compile-time safety. Instead of manual wiring, you annotate classes and Koin automatically resolves dependencies, reducing boilerplate.
How does adaptive navigation work?
The skill implements responsive layouts: screens under 600dp width show bottom navigation bars, while 600dp and above use sidebars. This adapts automatically to phones, tablets, and desktops without complex branching logic.
Why are design tokens required instead of magic numbers?
Named tokens (spacing, colors, durations) make changes consistent across the app and easier to maintain. Instead of hardcoding '16.dp', you use a named token. This scales design changes across the entire codebase at once.
Can I use this skill without Kotlin experience?
The skill assumes Kotlin familiarity. It's optimized for developers building Compose Multiplatform apps, not beginners learning the language. It focuses on architectural patterns rather than language fundamentals.
How do I install this skill?
Clone the repository into your Claude Code skills directory: ~/.claude/skills on Mac/Linux or C:\Users\{Your user}\.claude\skills on Windows. Other LLM clients may use different paths—check their documentation.
What happens if I don't follow the conventions?
The skill documents conventions in SKILL.md with rationale and examples. While not enforced automatically, following them keeps the codebase organized, screens consistent, and onboarding faster for new team members.

Glossary

Compose Multiplatform
JetBrains framework for building declarative UIs in Kotlin that compile to native code on Android, iOS, and desktop, sharing the same composable components across platforms.
MVI Architecture
Model-View-Intent pattern where user actions (intents) trigger state changes (model) that update the UI (view), creating a unidirectional data flow that's easier to test and debug.
Design Tokens
Named variables for spacing, colors, typography, and durations (e.g., spacing16dp) that replace hardcoded values, making design changes consistent and maintainable across an app.
Koin Annotations
Kotlin dependency injection framework using KSP to generate compile-time-safe dependency resolution automatically, eliminating manual service locator patterns and reducing configuration boilerplate.
Kotlin Multiplatform
JetBrains technology allowing you to write shared business logic once in Kotlin and compile it to run on multiple platforms (Android, iOS, desktop), while keeping platform-specific code separated.

More in Design Systems

All →
Design Systems

Claude Code Agent Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language briefs.

MichelSR25
Design Systems

Claude Code Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language descriptions.

MichelSR25
Design Systems

Claude Design Studio Toolkit

AI-powered design co-pilot with responsive UI engine, design tokens, accessibility validation, and multi-agent workflows for code-first design teams.