mobile-android-design

Descripción general

¿Qué es mobile-android-design?

mobile-android-design es una habilidad especializada para desarrolladores y diseñadores de Android que desean crear interfaces móviles visualmente atractivas, adaptativas y accesibles. Se centra en los principios de Material Design 3 (Material You) y Jetpack Compose, la moderna herramienta de UI de Google para Android. Esta habilidad abarca temas como tematización, navegación, sistemas de diseño y mejores prácticas para crear aplicaciones que se vean bien en teléfonos, tabletas y dispositivos plegables.

¿Quién debería usar esta habilidad?

• Desarrolladores de apps Android que construyen interfaces nativas
• Diseñadores que implementan las directrices de Material Design 3
• Equipos que adoptan Jetpack Compose para proyectos Android modernos
• Cualquier persona que necesite diseños adaptativos, tematización dinámica o navegación avanzada

Problemas que resuelve

• Optimiza el diseño de UI con componentes de Material Design 3
• Simplifica la configuración de navegación usando Navigation Compose
• Permite tematización dinámica de colores y accesibilidad
• Soporta diseños responsivos para múltiples tipos de dispositivos

Cómo usar

Pasos de instalación

1. Instala la habilidad con:

   npx skills add https://github.com/wshobson/agents --skill mobile-android-design
   

2. Comienza revisando SKILL.md para obtener una visión general de conceptos y flujo de trabajo.
3. Explora la carpeta references/ para guías prácticas:
   • android-navigation.md: Patrones y configuración de navegación
   • compose-components.md: Componentes UI e interacciones con Jetpack Compose
   • material3-theming.md: Tematización e implementación de colores dinámicos

Conceptos clave y archivos

Principios de Material Design 3

• Personalización con color dinámico
• Accesibilidad mediante paletas tonales
• Diseños responsivos para pantallas grandes

Sistema de diseño de Jetpack Compose

• Usa Column y Row para arreglos flexibles
• Implementa listas, pull-to-refresh y swipe-to-dismiss con Compose

Patrones de navegación

• Configura Navigation Compose en android-navigation.md
• Usa rutas y argumentos con tipado seguro para navegación robusta

Tematización y UI adaptativa

• Aplica tematización Material 3 con colores dinámicos (material3-theming.md)
• Personaliza esquemas de color para modos claro y oscuro

Adaptación a tu proyecto

• Consulta las guías y ejemplos de código proporcionados
• Integra patrones de Material 3 y Compose en tu propio repositorio
• Ajusta los flujos de trabajo según tus herramientas y requisitos de la app

Preguntas frecuentes

¿Es mobile-android-design adecuado para todos los proyectos Android?

Esta habilidad es ideal para proyectos que usan Jetpack Compose y apuntan a estándares modernos de UI en Android. Si tu app depende de diseños XML antiguos o sistemas de diseño previos, considera actualizar primero a Compose y Material 3.

¿Dónde puedo encontrar ejemplos de navegación y tematización?

Consulta los archivos references/android-navigation.md y references/material3-theming.md para ejemplos detallados de código e instrucciones de configuración.

¿Cómo puedo previsualizar todo el contenido de la habilidad?

Abre la pestaña de Archivos para explorar el árbol completo, incluyendo referencias anidadas y scripts auxiliares para patrones avanzados de UI.

¿Puedo personalizar la paleta de colores de Material 3?

Sí. Revisa material3-theming.md para orientación sobre cómo definir esquemas de color personalizados y habilitar soporte para color dinámico.

¿Qué hago si necesito soporte para tabletas y dispositivos plegables?

mobile-android-design incluye estrategias de diseño responsivo y patrones de UI adaptativa para pantallas grandes. Revisa las secciones de diseño en SKILL.md y las guías de componentes Compose para mejores prácticas.