Adaptive Compose UI: A Skill for Resilient KMP Layouts

Where this fits

You're building a KMP app with Compose Multiplatform. A developer asks: "Make the dashboard work on tablets and foldables." Manually checking window size classes, navigation patterns, and resource qualifiers is time-consuming and error-prone. This skill gives an agent a strict review and implementation framework, so it can inspect the codebase and propose robust adaptive layouts without duplicating fragile phone-first assumptions.

Why agents benefit

• Agent can identify window size classes and map them to canonical navigation patterns: bottom nav for compact, navigation rail for medium, permanent nav drawer for expanded.
• It can audit existing composables for hardcoded widths, fixed resource values, and missing multi-window handling, then suggest Compose-friendly alternatives.
• It can reason about multi-pane layouts (list-detail) and decide when to use a single pane, dual pane, or list-detail pattern based on available width.
• It can check resource qualifiers and configurable strategies, keeping presentation decisions separated from layout logic.
• It can apply the skill consistently during code review, catching one-device assumptions before they become production bugs.

Practical scenarios

Reviewing a tablet dashboard before release

The agent inspects a dashboard composable that uses a fixed Modifier.width(480.dp). It flags the assumption, checks the window size class, and proposes a WindowSizeClass-based strategy so the dashboard expands on tablets and resizable desktop windows.

Adding adaptive navigation to a KMP app

A project uses bottom navigation everywhere. The agent evaluates the current navigation, then recommends switching to a navigation rail at medium width and a permanent nav drawer at expanded width. It can also produce the Compose scaffold code to implement the transitions.

Auditing resource strategy across Android and KMP

An agent reviews res/values/ and Compose resource usage, looking for small-screen assumptions. It can suggest moving to Compose Multiplatform resources, using adaptive qualifiers, and centralizing dimensions and breakpoints so the UI remains configurable.

Add it to your agent workflow

Install the skill with:

npx skills add mmiani/kotlin-kmp-claude-agent-skills --skill kotlin-ui-adaptive-resources

Then prompt your agent:

Use the kotlin-ui-adaptive-resources skill to review the current dashboard screen in this project. Identify any fixed-size assumptions and recommend a window-size-based layout with the correct navigation pattern for compact, medium, and expanded widths.

The agent will read the skill's guidance, inspect the composables, and produce a concrete implementation plan.

Compare before adopting

Before adding it to your default agent setup, compare against other adaptive UI approaches. Check maintenance freshness: how recent are the commits and does it track current Compose Multiplatform APIs. Look at alternatives such as Google's Material 3 adaptive layouts samples. Then evaluate how well the skill's strict rules fit your existing navigation and resource patterns. If your team prefers custom breakpoint conventions, you may need to adapt its recommendations.

Why it is worth tracking

With 74 stars and an Apache-2.0 license, this skill is still early but shows real momentum in the KMP community. It is worth tracking because it addresses a recurring pain point: adaptive UI design is rarely taught in tutorials yet mandatory for production Android and Compose Multiplatform apps. For a deeper look, see the skill page on OpenAgentSkill to monitor version updates and community feedback. Evaluate it when you start a new Compose Multiplatform app or before refactoring a screen to support foldables and desktop windows.