singhsume123/xml-to-compose-skill

¿Qué hace xml-to-compose-skill?

Repositorio de GitHub relacionado con habilidades de agente actualizado recientemente: singhsume123/xml-to-compose-skill.

Descripción

Convierte archivos XML de diseño de Android en código Jetpack Compose equivalente. Esta habilidad agiliza el proceso de migración de aplicaciones Android del sistema de vistas basado en XML al moderno framework declarativo Compose.

Plataformas Soportadas

• Claude Code
• Cursor
• Codex
• Otros agentes de IA compatibles con herramientas de desarrollo

Cómo Funciona

1. Entrada: Recibe un archivo XML de diseño de Android (por ejemplo, activity_main.xml).
2. Análisis: Interpreta la jerarquía de vistas, atributos, y relaciones del XML.
3. Conversión: Genera código Kotlin usando funciones componibles de Jetpack Compose.
4. Salida: Proporciona código Compose listo para usar, con importaciones y modificadores adecuados.

Reglas de Conversión

• LinearLayout → Column() o Row() según la orientación (vertical u horizontal)
• RelativeLayout → Box() con alineaciones y modificadores
• ConstraintLayout → ConstraintLayout() de Compose con referencias de restricciones
• TextView → Text()
• ImageView → Image()
• Button → Button()
• EditText → TextField()
• RecyclerView → LazyColumn() o LazyRow()
• ScrollView → verticalScroll() modificador
• Atributos como android:layout_width, android:layout_height → modificadores .fillMaxWidth(), .wrapContentSize(), etc.
• Colores y dimensiones → se mapean a recursos de Compose o valores literales
• ids → se convierten en funciones de prueba o referencias según sea necesario

Ejemplo de Uso

XML de Entrada

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        android:textSize="24sp" />

    <Button
        android:id="@+id/action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />
</LinearLayout>

Salida en Compose

@Composable
fun MyScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text(
            text = "Hello, World!",
            fontSize = 24.sp,
            modifier = Modifier.wrapContentSize()
        )
        Button(
            onClick = { /* TODO: Handle click */ },
            modifier = Modifier.wrapContentSize()
        ) {
            Text(text = "Click Me")
        }
    }
}

Consideraciones

• Rendimiento: El código generado sigue las mejores prácticas de Compose para un rendimiento óptimo.
• Personalización: Puedes personalizar el estilo y comportamiento editando el código Compose generado.
• Limitaciones: Algunos widgets complejos o personalizados pueden requerir ajustes manuales.

Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.