mobile-android-designpor Seth Hobson

Mobile Android Design Skill.

Um skill para Claude Code e Codex voltado ao design de apps mobile: UI nativa Android com Material Design 3 e Jetpack Compose.

Mobile Apps
Código de UI

Baixar OpenDesign Ver guia 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

Cabeçalho e títulos de seção lidos do arquivo upstream em 2026-09-14 · 3.797 caracteres no total

01 O que faz

O Que a Skill mobile-android-design Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Essa skill ensina agentes a criar aplicativos Android nativos usando Material Design 3 (Material You) e Jetpack Compose. Ela cobre a implementação de layouts de UI em Compose, padrões de navegação Android com Navigation Compose, layouts adaptativos para celulares, tablets e dispositivos dobráveis, temas Material 3 com cores dinâmicas, interfaces Android acessíveis e gestos e interações específicos do Android.

A skill foca na criação de aplicativos Android modernos e adaptativos que se integram perfeitamente ao ecossistema Android, seguindo as diretrizes de Material Design do Google e tratando diferentes configurações de tela.

Código de UI

Veja o exemplo de prompt ↗

Como funciona

01
Aplicar Temas do Material 3
Acesse cores por meio de MaterialTheme.colorScheme para oferecer suporte automático ao modo escuro e ativar cor dinâmica no Android 12+ para personalização.
02
Construir Componentes de UI em Compose
Crie composables usando padrões do Jetpack Compose com elevação de estado (state hoisting) adequada para tornar os componentes reutilizáveis e testáveis.
03
Implementar Layouts Adaptativos
Use WindowSizeClass para criar designs responsivos que se adaptam a celulares, tablets e dispositivos dobráveis.
04
Adicionar Suporte de Acessibilidade
Forneça contentDescription para todos os elementos interativos e garanta alvos de toque de no mínimo 48dp para conformidade de acessibilidade.
05
Gerenciar o Estado Corretamente
Use remember e rememberSaveable adequadamente para evitar a perda de estado durante mudanças de configuração.

02 Encontre o ideal para você

Quando Usar a Skill mobile-android-design

Use a skill mobile-android-design no Claude Code ou Codex quando a tarefa for design de app mobile deste tipo. Adequação e limites abaixo são do próprio arquivo da skill.

Boa Combinação

Projetar interfaces de aplicativos Android que seguem as diretrizes do Material Design 3
Construir UI e layouts em Jetpack Compose para aplicativos Android nativos
Criar layouts adaptativos que funcionam em celulares, tablets e dispositivos dobráveis
Implementar padrões de navegação Android usando Navigation Compose
Construir interfaces Android acessíveis com alvos de toque e descrições de conteúdo adequados

03 Dentro da skill

Regras que a Skill mobile-android-design Fornece ao Claude Code e ao Codex

1 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

LazyColumn para Listas Longas
Use LazyColumn em vez de Column ao exibir listas roláveis longas para evitar problemas de desempenho.

04 Coloque em prática

Instalar mobile-android-design no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar mobile-android-design ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Forma genérica de CLI skills para plugins/ui-design/skills/mobile-android-design/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Design de Aplicativo Mobile

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

Antes de aceitar o resultado, procure por estes itens na transcrição e nos arquivos:

O resultado é entregue como código de UI, conforme o catálogo lista para esta skill.
O agente nomeia a skill mobile-android-design em seu plano ou transcrição antes de produzir o resultado.
Seu próprio conteúdo, nomes e números aparecem inalterados na saída.

No OpenDesign importe mobile-android-design a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-a na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Arquivo da skill: plugins/ui-design/skills/mobile-android-design/SKILL.md Checksum do conteúdo registrado na verificação; commit 4236bb9
License: MIT Do LICENSE.
Estrelas do repositório: 39.635 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório wshobson/agents, que contém 18 skills neste catálogo. Não é uma classificação ou contagem de uso para mobile-android-design.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando Usar Esta SkillLista cenários para Material Design 3, Compose UI, navegação, layouts adaptativos, temas e acessibilidade
Conceitos FundamentaisConteúdo técnico detalhado movido para references/details.md devido a restrições de tamanho
Componente de Início RápidoFornece exemplo completo de código Compose para ItemListCard com estilo Material Design 3
Melhores PráticasOito regras concretas cobrindo temas, cor dinâmica, layouts, acessibilidade, estado e previews
Problemas ComunsSeis problemas frequentes: recomposição, perda de estado, desempenho, vazamento de tema, navegação e vazamentos de memória

A Descrição da Própria Skill

Domine padrões de Material Design 3 e Jetpack Compose para construir apps Android nativos. Use ao projetar interfaces Android, implementar UI Compose ou seguir as diretrizes de Material Design do Google.

Descrição de front-matter do SKILL.md. O arquivo completo tem cerca de 3.797 caracteres. Leia o arquivo completo no GitHub.

Mobile Android Design

Execute mobile-android-design em uma tarefa real de design de aplicativo móvel.

Baixe o OpenDesign, importe mobile-android-design pelo link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills