Building a Claude Skill: XML to Jetpack Compose Converter

  

How I built an AI-powered tool that converts Android layouts automatically — and how you can too

If you’ve been an Android developer for any length of time, you’ve probably written hundreds of XML layouts. And now, with Jetpack Compose becoming the standard, you’re faced with migrating them.

It’s tedious work. LinearLayout becomes Column. match_parent becomes fillMaxWidth(). layout_margin doesn’t even exist in Compose — you need Spacer or padding on the parent.

Without a skill, Claude’s conversions can be inconsistent — Material 2 vs Material 3, wrong modifier order, missing accessibility attributes etc.

Then I learned about Claude Skills.

What Are Claude Skills?

Skills are instruction files that teach Claude domain-specific knowledge. Instead of hoping Claude remembers best practices, you document them once. Every time Claude encounters a relevant task, it loads your skill and follows your patterns.

The structure is simple:

xml-to-compose/
├── SKILL.md              # Core rules
├── references/           # Detailed mappings (loaded on-demand)
└── assets/examples/      # Test files

The SKILL.md file has YAML frontmatter (name + description) and markdown instructions. Claude reads the description to decide if a skill applies, then loads the full instructions when needed.

This “progressive disclosure” is key — your skill can be comprehensive without bloating every conversation.

The XML to Compose Skill

I built a skill that handles the complete conversion workflow. Here’s what it does.

The Core Rules (SKILL.md)

The main file establishes conversion patterns and output guidelines:

---
name: xml-to-compose
description: Convert Android XML layouts to Jetpack Compose. 
  Use when asked to migrate XML layouts, convert views to 
  composables, or help with Compose migration.
---
# XML to Jetpack Compose Converter
## Conversion Process
1. Analyze the XML structure
2. Map each view to its Compose equivalent
3. Convert attributes to Modifier chains (order matters!)
4. Handle resource references (@string, @dimen, @color)
5. Keep composables stateless - hoist state to caller
## Output Guidelines
- Use Material 3
- Add @Preview functions
- Hoist click handlers as lambda parameters
- Follow modifier ordering: clickable → padding → size → background

The file includes a quick reference table and a complete before/after example. But the detailed mappings live in reference files.

Reference Files

Rather than stuffing everything into one massive file, I split mappings into focused references:

layouts.md — How to convert LinearLayout, FrameLayout, ConstraintLayout, RecyclerView, ViewPager2, and more. Includes gravity mappings, weight distribution, and when to use LazyColumn vs Column.

widgets.md — Mappings for 20+ widgets: TextView, EditText, ImageView, Button, CheckBox, Switch, CardView, TabLayout, and others. Each includes XML and Compose side-by-side.

attributes.md — The tricky stuff. Dimension conversions, margin-to-Spacer patterns, background shapes, visibility handling, click modifiers, and the all-important modifier ordering rules.

See It In Action

Here’s a real conversion. I gave Claude this prompt:

“Convert this XML to Compose:”

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">
    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/avatar"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginStart="12dp"
        android:text="Username"/>
</LinearLayout>

You can also just point to a file:

“Convert app/src/main/res/layout/item_user.xml to Compose”

First thing I see:

⏺ /xml-to-compose-skill

The skill triggered. Claude loaded my conversion rules. Then it produced:

@Composable
fun UserRow(
    username: String,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(R.drawable.avatar),
            contentDescription = "Avatar",
            modifier = Modifier.size(48.dp)
        )
        Text(
            text = username,
            modifier = Modifier
                .weight(1f)
                .padding(start = 12.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
private fun UserRowPreview() {
    UserRow(username = "Username")
}

And Claude even summarized its own mappings:

• LinearLayout horizontal → Row
• match_parent width → fillMaxWidth()
• padding=”16dp” → Modifier.padding(16.dp)
• ImageView 48dp → Image + Modifier.size(48.dp)
• layout_weight=”1″ → Modifier.weight(1f)
• layout_marginStart → Modifier.padding(start = 12.dp)

Notice what happened beyond the basic conversion:

• Hardcoded text → hoisted as username parameter
• Added contentDescription for accessibility
• Added verticalAlignment (smart default for row items)
• Included @Preview function
• Self-documented the mappings

Consistent. Idiomatic. Every time.

Want to try it yourself? Here’s how to set it up.

Testing the Skill Locally

Install:

git clone https://github.com/singhsume123/xml-to-compose-skill.git
cp -r xml-to-compose-skill ~/.claude/skills/

Verify:

ls ~/.claude/skills/xml-to-compose-skill/SKILL.md

Test with Claude Code:

claude

Then try prompts like:

• “Convert this XML to Compose: [paste XML]”
• “What’s the Compose equivalent of RecyclerView?”
• “Migrate this ConstraintLayout to Compose”

Check the output against your expectations. If Claude misses patterns, update the skill and test again.

The Ecosystem

Before building your own skill, explore what exists:

• SkillsMP — Community marketplace with 90,000+ skills
• anthropics/skills — Official examples from Anthropic

You might find exactly what you need. Or you might find inspiration for your own.

Building Your Own Skills

The xml-to-compose skill took a few hours to build. Here’s the approach:

Start with pain points. What do you repeatedly ask Claude? What does it get wrong? Those are your skill candidates.

Document patterns, not explanations. Claude already knows what Compose is. It needs your specific mappings, edge cases, and preferences.

Use progressive disclosure. Keep SKILL.md focused. Move detailed references to separate files that load on-demand.

Test with real examples. Grab actual XML from your codebase. Convert it. Check the output. Iterate.

Share it. If a skill helped you, it’ll help others. Push to GitHub, add the claude-skill topic, and let the community find it.

Get the Skill

The complete xml-to-compose skill is on GitHub:

👉 github.com/singhsume123/xml-to-compose-skill

Clone it, install it, and start migrating your layouts.

Found a missing pattern? PRs welcome.

Have questions or improvements? Share your experiences in the comments or reach out on LinkedIn.

---

Building a Claude Skill: XML to Jetpack Compose Converter was originally published in ProAndroidDev on Medium, where people are continuing the conversation by highlighting and responding to this story.