Android Compose Migration
CommunityHoangNguyen0403
Migrate an Android XML View to Jetpack Compose following a structured 10-step workflow. Use when converting XML layouts to Compose, setting up Compose in an existing View-based project, or incrementally adopting Compose.
Overview
- Repository
- HoangNguyen0403/agent-skills-standard
- Publisher
- HoangNguyen0403
- Stars
- 585
- Forks
- 163
- Bundled files
- 3
- License
- MIT
- Updated
- Nov 14, 2026
Installation
tmp=$(mktemp -d)
git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/android/android-compose-migration" ~/.claude/skills/android-compose-migration
rm -rf "$tmp"tmp=$(mktemp -d)
git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git "$tmp"
mkdir -p ~/.codex/skills
cp -R "$tmp/skills/android/android-compose-migration" ~/.codex/skills/android-compose-migration
rm -rf "$tmp"Install the Android Compose Migration agent skill from https://github.com/HoangNguyen0403/agent-skills-standard/tree/develop/skills/android/android-compose-migration into this project's skills folder.Instructions
XML to Jetpack Compose Migration
Priority: P1 (HIGH)
Structured 10-step workflow for migrating XML layouts to Compose.
Step 1: Identify the migration candidate
If the user specified a target XML layout, proceed to Step 2. Otherwise, pick the best candidate:
- Prefer leaf layouts (not deeply nested in other XMLs).
- Prefer layouts with few custom Views.
- Avoid layouts with complex RecyclerView adapters as a first migration.
Step 2: Analyze the layout
Examine the XML structure: list all Views, data bindings, click listeners, style references, and custom Views needing AndroidView wrappers.
Step 3: Create a plan
Generate a checklist of every View → Composable mapping. Present to user for approval.
Step 4: Capture baseline UI
Ask the user for a screenshot, or take one via emulator for visual comparison.
Step 5: Set up Compose dependencies
Check build.gradle.kts or libs.versions.toml for Compose BOM and compiler. If missing, add them. See dependency setup.
Step 6: Set up Compose theming
If missing, initialize minimum required theme — map XML colors/styles to Compose. Do NOT migrate the entire theme.
Step 7: Migrate the XML layout
Convert each View to its Compose equivalent. See interop patterns for the View→Composable mapping table, ComposeView, and AndroidView usage. Include a @Preview for every new Composable.
Use LazyColumn or LazyRow for list-heavy screens instead of flattening them into one large static composable.
Step 8: Replace usages
Use ComposeView to host Compose in Views, or AndroidView for Views in Compose. See interop patterns.
Step 9: Validate
Compare baseline screenshot with Compose Preview. Focus on layout and styling. Iterate until visual parity.
Step 10: Clean up
Delete the migrated XML file and legacy tests. Only remove code not referenced elsewhere.
Verification
- Compose Preview renders correctly.
- Visual parity with original XML layout.
-
./gradlew buildsucceeds. - No broken references to deleted XML files.
Anti-Patterns
- No full theme migration: Only migrate what the target layout needs.
- No new View instances in AndroidView update: Mutate existing, don't recreate.
- No missing ViewCompositionStrategy: Always set it on ComposeView to avoid leaks.
References
Bundled files
FAQ
What does Android Compose Migration do?
Migrate an Android XML View to Jetpack Compose following a structured 10-step workflow. Use when converting XML layouts to Compose, setting up Compose in an existing View-based project, or incrementally adopting Compose.
Who made Android Compose Migration?
HoangNguyen0403 (a community member) publishes it in the HoangNguyen0403/agent-skills-standard repository on GitHub.
Is Android Compose Migration free?
Yes. Android Compose Migration is open source, published by HoangNguyen0403 under the MIT license.
What comes with Android Compose Migration?
Its instructions and 3 files the agent reads only when a task needs them, such as references, examples or scripts.
Which agents can use Android Compose Migration?
Any coding agent that reads SKILL.md files, including Claude Code, Codex, Cursor, GitHub Copilot and Gemini CLI. The agent loads the skill when a task matches its description.
What are agent skills?
An agent skill is a folder with a SKILL.md file: instructions that teach a coding agent how to do one kind of task, and optionally files it can read while it works. The agent keeps only the skill's name and description in mind and reads the rest when a task calls for it.
How are agent skills different from MCP servers?
An MCP server gives an agent new tools to call, code that runs somewhere and returns results. A skill gives it knowledge: how to approach a task with the tools it already has. Many agents use both.
How can my agent test my Android app?
Robomori lets coding agents create, start and control Android emulators and devices from one command, so they can install your app, take screenshots and check dark mode, font sizes and languages.
Instructions to make or update an app's UI so that it adapts to different Android devices including phones, tablets, foldables, laptops, desktop, TV, Auto, and XR. It includes how to handle different window sizes, pointing devices (such as mouse) and text entry devices (such as keyboard) using the Compose MediaQuery API, and how to preserve UI, navigation, scroll, and media playback state across configuration changes (such as folding/unfolding a foldable, rotating a device, or resizing a window). It also covers multi-pane layouts using Navigation3 Scenes, adaptive UI components (such as buttons) with varying target sizes, and adaptive layouts (including navigation areas - nav rails and nav bars) using the Compose Grid and FlexBox APIs. It also covers desktop experiences with keyboard shortcuts, tooltips and custom cursors.
Use this skill to migrate your Jetpack Compose app to add adaptive edge-to-edge support and troubleshoot common issues. Use this skill to fix UI components (like buttons or lists) that are obscured by or overlapping with the navigation bar or status bar, fix IME insets, and fix system bar legibility.
Adds inking and freehand drawing capabilities to an Android app using Jetpack Ink (androidx.ink) and Compose. Use this skill when implementing stylus or touch drawing surfaces, rendering wet and dry ink strokes, configuring stock brushes (pressure pen, marker, highlighter), implementing geometry-based erasing, linear undo and redo history, or stroke persistence with Room. Delivers working Compose and ViewModel implementations. Don't use for View-based (XML) inking or programmatic custom BrushFamily creation. For custom BrushFamily creation, custom tip shapes, or behavior node graphs, suggest the ink-custom-brush-builder skill.
Creates custom BrushFamily definitions for an Android app using Jetpack Ink (androidx.ink 1.1.0-alpha03 and higher). Use this skill when configuring custom BrushTip shapes, adding pressure, tilt, speed, or noise sensitivity using BrushBehavior node graphs, creating multi-coat layered brushes, applying tiling or particle stamping textures, configuring SlidingWindowModel input smoothing, or serializing brushes. Delivers complete Kotlin BrushFamily, BrushCoat, BrushTip, BrushPaint, and BrushBehavior implementations. Don't use for View-based (XML) inking, Compose drawing surface setup, or stock brush selection. For Compose drawing surface setup, InProgressStrokes wet and dry rendering, eraser, or persistence, suggest the ink-app-builder skill.
