migrate-xml-views-to-jetpack-compose

Name: migrate-xml-views-to-jetpack-compose
Author: hanamizuki

104stars8forks

How to install migrate-xml-views-to-jetpack-compose?

hanamizuki/solopreneur/migrate-xml-views-to-jetpack-compose

$npx -y skills add hanamizuki/solopreneur --skill migrate-xml-views-to-jetpack-compose

Installs into the current project.

Summary

Provides a structured workflow for migrating an Android XML View to Jetpack

Files · 1

View on GitHub

SKILL.md

1	This skill guides through the process of migrating an existing Android XML View
2	to Jetpack Compose. It performs a stable, safe and visually consistent
3	transition by following a structured, 10-step methodology. This skill migrates
4	UI (XML to Jetpack Compose) only.
5
6	## Objective
7
8	To systematically convert a single legacy XML layout into modern, declarative
9	Jetpack Compose UI while maintaining pixel-perfect visual parity and functional
10	integrity.
11
12	## Summary of the 10-step migration process
13
14	1. Identify the optimal XML candidate for migration
15	2. Analyze the project and layout
16	3. Create a plan
17	4. Capture the XML View UI
18	5. Set up Compose dependencies and compiler
19	6. Set up Compose theming
20	7. Migrate the XML layout to Compose
21	8. Validate the migration
22	9. Replace usages
23	10. XML code removal
24
25	## Detailed steps
26
27	### Step 1: Identify the optimal XML candidate for migration
28
29	If the user has explicitly specified a target XML layout, proceed to Step 2.
30	Otherwise, analyze the codebase to identify the best candidate for migration by
31	following the logic in [references/identify-optimal-xml-candidate.md](references/identify-optimal-xml-candidate.md).
32
33	### Step 2: Analyze the project and layout
34
35	Analyze the identified XML View's structure, hierarchy, and implementation
36	details.
37	Use [references/analysis-of-the-project-and-layout.md](references/analysis-of-the-project-and-layout.md) to
38	guide your technical audit of the layout and surrounding project context.
39
40	### Step 3: Create a plan
41
42	Using the outputs and analysis done in the Step 1 and 2, generate a
43	step-by-step plan for the migration. If you support user interaction, present
44	to the user and ask for approval before proceeding. If user interaction is not
45	supported, proceed to Step 4 following the generated plan.
46
47	### Step 4: Capture the XML View UI
48
49	IF you support user interaction, ask the user to upload a screenshot of the
50	XML View UI or provide an absolute path to a file. Use this image as a visual
51	reference for the layout migration in Step 7.
52	ELSE IF you are able to run an Android emulator, locate an existing
53	screenshot test for the XML candidate. If none exists, create one using the
54	existing project testing framework. If no framework exists,
55	use UI Automator or Espresso to create a screenshot test with minimum
56	required setup. Run the test and take a baseline screenshot of the XML UI.
57	ELSE proceed to Step 5.
58
59	### Step 5: Set up Compose dependencies and compiler
60
61	Check `build.gradle` or `libs.versions.toml` for Compose dependencies and
62	compiler setup. If missing, use
63	[Setup Compose Dependencies and Compiler](references/android/develop/ui/compose/setup-compose-dependencies-and-compiler.md).
64	Run a sync to ensure dependencies resolve without errors.
65
66	### Step 6: Set up Compose theming
67
68	If the project already has Compose theming set up, proceed to Step 7. If Compose
69	theming is missing, initialize it. For Material-based projects, follow
70	[Material 3 migration guidelines](references/android/develop/ui/compose/designsystems/migrate-xml-theme-to-compose.md).
71	For custom design systems, apply expert judgment to migrate XML theming and
72	match existing styles.
73	Constraints: Do not migrate the entire theme. Implement only the minimum
74	theming required for the specific XML candidate. Maintain original XML themes
75	for interoperability. Maintain existing project code conventions, patterns,
76	names and values.
77
78	### Step 7: Migrate the XML View to Compose
79
80	Convert the XML candidate to Jetpack Compose code, referencing
81	[references/xml-layout-migration.md](references/xml-layout-migration.md) and the image from Step 4.
82	You must include a Compose Preview for the newly created composable to
83	facilitate visual verification.
84
85	### Step 8: Replace usages
86
87	Replace the usages of the migrated XML layout to use the new Compose component.
88
89	- To add Compose in Views, use [Compose in Views](references/android/develop/ui/compose/migrate/interoperability-apis/compose-in-views.md).
90	- To add Views in Compose, use [Views in Compose](references/android/develop/ui/compose/migrate/interoperability-apis/views-in-compose.md).
91
92	### Step 9: Validate the migration
93
94	Compare the baseline screenshot image from

People who liked this also viewed

6 picks

Type

find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 20262.6M27k
grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026633k182k
vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026573k29k
improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026522k182k
setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026454k182k
triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026424k182k

migrate-xml-views-to-jetpack-compose

104stars8forks

View on GitHub

How to install migrate-xml-views-to-jetpack-compose?

hanamizuki/solopreneur/migrate-xml-views-to-jetpack-compose

$npx -y skills add hanamizuki/solopreneur --skill migrate-xml-views-to-jetpack-compose

Installs into the current project.

Summary

Provides a structured workflow for migrating an Android XML View to Jetpack

Files · 1

View on GitHub

SKILL.md

1	This skill guides through the process of migrating an existing Android XML View
2	to Jetpack Compose. It performs a stable, safe and visually consistent
3	transition by following a structured, 10-step methodology. This skill migrates
4	UI (XML to Jetpack Compose) only.
5
6	## Objective
7
8	To systematically convert a single legacy XML layout into modern, declarative
9	Jetpack Compose UI while maintaining pixel-perfect visual parity and functional
10	integrity.
11
12	## Summary of the 10-step migration process
13
14	1. Identify the optimal XML candidate for migration
15	2. Analyze the project and layout
16	3. Create a plan
17	4. Capture the XML View UI
18	5. Set up Compose dependencies and compiler
19	6. Set up Compose theming
20	7. Migrate the XML layout to Compose
21	8. Validate the migration
22	9. Replace usages
23	10. XML code removal
24
25	## Detailed steps
26
27	### Step 1: Identify the optimal XML candidate for migration
28
29	If the user has explicitly specified a target XML layout, proceed to Step 2.
30	Otherwise, analyze the codebase to identify the best candidate for migration by
31	following the logic in [references/identify-optimal-xml-candidate.md](references/identify-optimal-xml-candidate.md).
32
33	### Step 2: Analyze the project and layout
34
35	Analyze the identified XML View's structure, hierarchy, and implementation
36	details.
37	Use [references/analysis-of-the-project-and-layout.md](references/analysis-of-the-project-and-layout.md) to
38	guide your technical audit of the layout and surrounding project context.
39
40	### Step 3: Create a plan
41
42	Using the outputs and analysis done in the Step 1 and 2, generate a
43	step-by-step plan for the migration. If you support user interaction, present
44	to the user and ask for approval before proceeding. If user interaction is not
45	supported, proceed to Step 4 following the generated plan.
46
47	### Step 4: Capture the XML View UI
48
49	IF you support user interaction, ask the user to upload a screenshot of the
50	XML View UI or provide an absolute path to a file. Use this image as a visual
51	reference for the layout migration in Step 7.
52	ELSE IF you are able to run an Android emulator, locate an existing
53	screenshot test for the XML candidate. If none exists, create one using the
54	existing project testing framework. If no framework exists,
55	use UI Automator or Espresso to create a screenshot test with minimum
56	required setup. Run the test and take a baseline screenshot of the XML UI.
57	ELSE proceed to Step 5.
58
59	### Step 5: Set up Compose dependencies and compiler
60
61	Check `build.gradle` or `libs.versions.toml` for Compose dependencies and
62	compiler setup. If missing, use
63	[Setup Compose Dependencies and Compiler](references/android/develop/ui/compose/setup-compose-dependencies-and-compiler.md).
64	Run a sync to ensure dependencies resolve without errors.
65
66	### Step 6: Set up Compose theming
67
68	If the project already has Compose theming set up, proceed to Step 7. If Compose
69	theming is missing, initialize it. For Material-based projects, follow
70	[Material 3 migration guidelines](references/android/develop/ui/compose/designsystems/migrate-xml-theme-to-compose.md).
71	For custom design systems, apply expert judgment to migrate XML theming and
72	match existing styles.
73	Constraints: Do not migrate the entire theme. Implement only the minimum
74	theming required for the specific XML candidate. Maintain original XML themes
75	for interoperability. Maintain existing project code conventions, patterns,
76	names and values.
77
78	### Step 7: Migrate the XML View to Compose
79
80	Convert the XML candidate to Jetpack Compose code, referencing
81	[references/xml-layout-migration.md](references/xml-layout-migration.md) and the image from Step 4.
82	You must include a Compose Preview for the newly created composable to
83	facilitate visual verification.
84
85	### Step 8: Replace usages
86
87	Replace the usages of the migrated XML layout to use the new Compose component.
88
89	- To add Compose in Views, use [Compose in Views](references/android/develop/ui/compose/migrate/interoperability-apis/compose-in-views.md).
90	- To add Views in Compose, use [Views in Compose](references/android/develop/ui/compose/migrate/interoperability-apis/views-in-compose.md).
91
92	### Step 9: Validate the migration
93
94	Compare the baseline screenshot image from

People who liked this also viewed

6 picks

Type