Guide · Agent skill
How to use the Adaptive Android UI agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The adaptive agent skill gives an AI coding agent step-by-step instructions for making an Android app's screens respond to different device types and window sizes, including phones, tablets, foldables, laptops, desktop, TV, Auto and XR. It is aimed at developers who already have a Jetpack Compose app that uses Navigation 3. After this guide you will know what the skill does, how to install it, how to phrase a request so the agent uses it, and what to check before you run its changes.
Adaptive Android UIandroid/skills · Apache-2.0 Download the skill Quick start
- 1Install the skill. Download the ZIP from this page and unzip it into ~/.claude/skills/ or into .claude/skills/ in your project, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 2Confirm your app's prerequisites. Make sure the app uses Jetpack Compose for its screens and Jetpack Navigation 3. Migrate Fragments or Views first with the suggested skills.
- 3Describe the change you want. Ask in plain language for the screen, device type or behaviour you need, such as a navigation rail on tablets.
- 4Add screenshot previews. Let the agent check for form-factor previews and add them using the Compose Preview Screenshot Testing tool if they are missing.
- 5Apply the relevant workflow steps. Ask for a subset of the eight steps that fits your task, such as list-detail layouts or state preservation.
- 6Review and test on each form factor. Run the screenshot tests and check phone, foldable, tablet and desktop layouts before you accept the changes.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions that an AI coding agent can load when a task matches it. This skill is named adaptive. When it is active, the agent follows a workflow for making or updating an app's UI so it adapts to different devices.
The skill covers window sizes, pointing devices such as a mouse, and text entry devices such as a keyboard. It explains how to preserve UI, navigation, scroll and media playback state across folding, rotating or resizing. It also covers multi-pane layouts, adaptive navigation with navigation rails and bars, adaptive grid and flexbox layouts, and desktop touches such as keyboard shortcuts, tooltips and custom cursors.
- Step 1: verify the current UI with screenshot tests per form factor
- Step 2: make the navigation bar adaptive
- Step 3: add multi-pane layouts with Navigation 3 Scenes
- Step 4: make vertical lists adaptive by changing the number of columns
- Step 5: hide app bars when scrolling
- Step 6: preserve UI state across configuration changes
- Step 7: add desktop experiences
- Step 8: support foldable devices
Install the adaptive skill from the ZIP
Download the ZIP for the adaptive skill from this page and unzip it. You can install it in one of two ways.
For a personal install that applies to all your projects, unzip it into ~/.claude/skills/. To limit it to one project, unzip it into the .claude/skills/ folder inside that project.
If you use the Claude apps, you can upload the skill instead under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills
Check that your app meets the prerequisites
The skill assumes a specific app setup. Check these before you ask for changes.
The app must use Compose for all screens. If it still uses Fragments or Views, the skill suggests using the XML to Compose skill to migrate those screens first. The app must also use Jetpack Navigation 3. If it does not, the skill suggests the Navigation 3 skill for migration.
For the layout and testing work you will also need Android Studio, the Material 3 adaptive libraries such as adaptive-navigation3, and Compose preview screenshot testing tooling for the testing step.
- Android Studio and an Android project using Jetpack Compose
- Jetpack Navigation 3
- Material 3 adaptive libraries, such as adaptive-navigation3
- Compose preview screenshot testing tooling for Step 1
Trigger the skill with a natural request
You do not need a special command. Describe the outcome you want in plain language and mention the device type or the behaviour you need. The agent will use the skill when your request matches its purpose. The wording below is an example of the kind of request that fits; the skill itself does not define exact trigger phrases.
Be specific about the screen and the goal. A request that names the screen, the device and the expected behaviour gives the agent enough context to pick the relevant steps.
- Make my settings screen work on tablets and foldables.
- Add a list-detail layout to my notes screen for large screens.
- Keep my scroll position and playback state when the phone is folded or rotated.
- Add a navigation rail to my app on tablets and unfolded foldables.
- Add keyboard shortcuts and a mouse-friendly hover state to my desktop build.
Add screenshot previews for each form factor
The first step asks the agent to confirm that screenshot tests exist for the major form factors. If they do not, the skill points to the Compose Preview Screenshot Testing tool and shows a set of preview annotations. You can run these checks after each change to compare layouts across devices.
The example below comes from the skill and creates previews for phone, foldable, tablet and desktop.
@Preview(name = "Phone", device = Devices.PHONE, showBackground = true)
@Preview(name = "Foldable", device = Devices.FOLDABLE, showBackground = true)
@Preview(name = "Tablet", device = Devices.TABLET, showBackground = true)
@Preview(name = "Desktop", device = Devices.DESKTOP, showBackground = true)
annotation class FormFactorPreviewsUse list-detail layouts with Navigation 3
For related screens such as a list of emails and an email's content, the skill directs you to build a list-detail layout. It requires the Navigation 3 SceneStrategy approach. The skill explicitly says not to use ListDetailPaneScaffold or SupportingPaneScaffold.
To set it up, add the adaptive-navigation3 library, create a ListDetailSceneStrategy with rememberListDetailSceneStrategy, and pass it to NavDisplay through its sceneStrategies parameter. Detail screens should not show a back arrow in a list-detail layout, and full-screen mode must be turned off when the detail is part of a list-detail layout. The Nav3 Material List Detail recipe is the reference implementation.
- Use ListDetailSceneStrategy.listPane(detailPlaceholder = ...) on the list entry
- Use ListDetailSceneStrategy.detailPane() on the detail entry
- Avoid list-detail when detail content needs a full-screen presentation, such as large images or media, unless you ask for it
Keep state and support foldables and desktop
For state, the skill covers keeping UI, navigation, scroll and media playback state through rotation, folding and window resizing. The Navigation 3 save-state reference is included with the skill for this.
For layout, the skill explains adaptive grid and flexbox layouts. A grid can change its number of columns, and FlexBox can wrap, align and distribute items. For foldables, it includes a reference on tabletop posture. For desktop, it covers keyboard shortcuts, tooltips and custom cursors. The agent can apply these where they fit your app.
- Navigation 3 save-state reference
- Adaptive grid and FlexBox references
- Foldable tabletop reference
- Custom cursors reference
What people use it for
- Converting a bottom navigation bar into a navigation rail on tablets and unfolded foldables
- Building a list-detail layout for a notes or messaging app with Navigation 3
- Changing a vertical list to a multi-column adaptive grid on wide screens
- Keeping scroll position and media playback when a foldable is folded or unfolded
- Adding keyboard shortcuts, tooltips and custom cursors to a desktop build
Frequently asked questions
How do I install the adaptive agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
What does the adaptive skill need to work?
Your app should use Jetpack Compose for its screens and Jetpack Navigation 3. You also need Android Studio, Material 3 adaptive libraries such as adaptive-navigation3, and Compose preview screenshot testing tooling for the testing step.
Is the adaptive skill free?
The listing states the licence is Apache-2.0. The skill's SKILL.md refers to LICENSE.txt for the complete terms, so check that file for the full conditions.
Does the adaptive skill run scripts or use the network?
According to this listing, the skill does not run scripts and does not use the network. It consists of instructions and reference files for the agent.
Can I use the skill with Fragments or Views?
Not directly. The skill says apps must use Compose and Navigation 3, so it suggests migrating Fragments or Views first, using the XML to Compose skill and the Navigation 3 skill.
Why does the skill tell the agent not to use ListDetailPaneScaffold?
The skill explicitly forbids ListDetailPaneScaffold and SupportingPaneScaffold and requires the Navigation 3 SceneStrategy approach for multi-pane layouts instead.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are adapting an existing Jetpack Compose app that already uses Navigation 3 to tablets, foldables or desktop, or if you need list-detail layouts and state kept through folding and resizing. Pick something else if your app still uses Fragments or Views, does not use Navigation 3, or needs a finished design or app rather than coding guidance.
Download the skill