mobile-android-designpor Seth Hobson

Mobile Android Design Skill.

Un skill de Claude Code y Codex para diseño de aplicaciones móviles: UI nativa de Android con Material Design 3 y Jetpack Compose.

Mobile Apps
Código UI

Descargar OpenDesign Ver guía de uso

wshobson/agents · plugins/ui-design/skills/mobile-android-design/SKILL.mdSKILL.md

--- name: mobile-android-design description: Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines. --- ## When to Use This Skill ## Detailed section: Core Concepts ## Quick Start Component ## Best Practices

Encabezados de sección y metadatos leídos del archivo original el 14 de septiembre de 2026 · 3797 caracteres en total

01 Qué hace

Qué hace el Skill mobile-android-design en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill enseña a los agentes a crear aplicaciones nativas de Android usando Material Design 3 (Material You) y Jetpack Compose. Cubre la implementación de diseños de UI con Compose, patrones de navegación de Android con Navigation Compose, diseños adaptativos para teléfonos, tablets y plegables, theming de Material 3 con colores dinámicos, interfaces accesibles de Android, y gestos e interacciones específicos de Android.

El skill se centra en crear aplicaciones de Android modernas y adaptativas que se integran perfectamente con el ecosistema de Android, siguiendo las guías de Material Design de Google y gestionando distintas configuraciones de pantalla.

Código UI

Ver el ejemplo de prompt ↗

Cómo funciona

01
Aplicar el theming de Material 3
Acceda a los colores mediante MaterialTheme.colorScheme para admitir automáticamente el modo oscuro y habilitar el color dinámico en Android 12+ para la personalización.
02
Construir componentes de UI con Compose
Cree composables usando los patrones de Jetpack Compose con un state hoisting adecuado para que los componentes sean reutilizables y testeables.
03
Implementar diseños adaptativos
Use WindowSizeClass para crear diseños responsivos que se adapten a teléfonos, tablets y dispositivos plegables.
04
Añadir soporte de accesibilidad
Proporcione contentDescription para todos los elementos interactivos y garantice objetivos táctiles de al menos 48dp para cumplir con la accesibilidad.
05
Gestionar el estado correctamente
Use remember y rememberSaveable de forma adecuada para evitar la pérdida de estado durante los cambios de configuración.

02 Encuentra tu caso de uso

Cuándo Usar el Skill mobile-android-design

Usa el skill mobile-android-design en Claude Code o Codex cuando el trabajo sea diseño de aplicaciones móviles de este tipo. El ajuste y límites a continuación se toman del propio archivo del skill.

Buen caso de uso

Diseño de interfaces de apps Android siguiendo las guías de Material Design 3
Construcción de UI y diseños con Jetpack Compose para aplicaciones nativas de Android
Creación de diseños adaptativos que funcionan en teléfonos, tablets y dispositivos plegables
Implementación de patrones de navegación de Android usando Navigation Compose
Construcción de interfaces accesibles de Android con objetivos táctiles y descripciones de contenido adecuados

03 Dentro del skill

Reglas que la skill mobile-android-design da a Claude Code y Codex

1 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente — la parte del archivo que cambia el resultado.

LazyColumn para listas largas
Use LazyColumn en lugar de Column al mostrar listas desplazables largas para evitar problemas de rendimiento.

04 Ponlo a trabajar

Instalar mobile-android-design en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar mobile-android-design a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Formulario genérico de la CLI de skills para plugins/ui-design/skills/mobile-android-design/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de aplicación móvil

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Build a product listing screen for [app name] using Jetpack Compose with Material Design 3. The screen should display a list of [items] with thumbnails, titles, and prices. Use adaptive layout with WindowSizeClass to show a single column on phones and a two-column grid on tablets. Each item card should navigate to a detail screen when tapped. Include proper state hoisting and accessibility support with content descriptions.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Antes de aceptar el resultado, busca esto en la transcripción y los archivos:

El resultado se entrega como código de interfaz, según lista el catálogo para este skill.
El agente nombra el skill mobile-android-design en su plan o transcripción antes de producir el resultado.
Su propio contenido, nombres y números aparecen sin cambios en la salida.

En OpenDesign, importe mobile-android-design desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Rama main
Archivo de skill: plugins/ui-design/skills/mobile-android-design/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 4236bb9
License: MIT De LICENSE.
Estrellas del repositorio: 39.635 Instantánea de GitHub tomada el 14/09/2026 para todo el repositorio wshobson/agents, que contiene 18 skills en este catálogo. No es una calificación ni un recuento de uso para mobile-android-design.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo usar esta skillEnumera escenarios para Material Design 3, UI de Compose, navegación, layouts adaptables y accesibilidad
Conceptos básicosEl contenido técnico detallado se movió a references/details.md debido a restricciones de tamaño
Componente de inicio rápidoProporciona un ejemplo de código completo en Compose para ItemListCard con estilo de Material Design 3
Buenas prácticasOcho reglas concretas sobre theming, color dinámico, layouts, accesibilidad, estado y previsualizaciones
Problemas comunesSeis problemas frecuentes: recomposición, pérdida de estado, rendimiento, fugas de theme, navegación y fugas de memoria

La descripción propia del Skill

Domina los patrones de Material Design 3 y Jetpack Compose para construir apps nativas de Android. Usa cuando diseñes interfaces Android, implementes UI con Compose o sigas las guías de Material Design de Google.

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 3.797 caracteres. Lee el archivo completo en GitHub.

Mobile Android Design

Ejecuta mobile-android-design en una tarea real de diseño de aplicación móvil.

Descarga OpenDesign, importa mobile-android-design desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills