mobile-android-designdi Seth Hobson

Mobile Android Design Skill.

Uno skill per Claude Code e Codex per il design di app mobile: UI Android nativa con Material Design 3 e Jetpack Compose.

Mobile Apps
Codice UI

Scarica OpenDesign Guida all'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

Intestazione e intestazioni di sezione lette dal file upstream il 14/09/2026 · 3.797 caratteri in totale

01 Cosa fa

Cosa fa la Skill mobile-android-design in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill insegna agli agenti a costruire applicazioni Android native utilizzando Material Design 3 (Material You) e Jetpack Compose. Copre l'implementazione di layout UI in Compose, pattern di navigazione Android con Navigation Compose, layout adattivi per smartphone, tablet e dispositivi pieghevoli, theming Material 3 con colori dinamici, interfacce Android accessibili e gesture e interazioni specifiche di Android.

La skill si concentra sulla creazione di applicazioni Android moderne e adattive che si integrano perfettamente con l'ecosistema Android, seguendo le linee guida Material Design di Google e gestendo diverse configurazioni di schermo.

Codice UI

Vedi l'esempio di prompt ↗

Come funziona

01
Applicare il Theming Material 3
Accedere ai colori tramite MaterialTheme.colorScheme per supportare automaticamente la modalità scura e attivare il colore dinamico su Android 12+ per la personalizzazione.
02
Costruire Componenti UI in Compose
Creare composable utilizzando i pattern di Jetpack Compose con un corretto state hoisting per rendere i componenti riutilizzabili e testabili.
03
Implementare Layout Adattivi
Utilizzare WindowSizeClass per creare design responsive che si adattano a smartphone, tablet e dispositivi pieghevoli.
04
Aggiungere Supporto per l'Accessibilità
Fornire contentDescription per tutti gli elementi interattivi e garantire target di tocco minimi di 48dp per la conformità all'accessibilità.
05
Gestire lo Stato Correttamente
Utilizzare remember e rememberSaveable in modo appropriato per evitare la perdita dello stato durante i cambiamenti di configurazione.

02 Trova la tua applicazione

Quando usare la skill mobile-android-design

Usa la skill mobile-android-design in Claude Code o Codex quando il lavoro riguarda il design di app mobile di questo tipo. Ambito e limiti seguono il file della skill.

Buona applicazione

Progettare interfacce di app Android che seguono le linee guida Material Design 3
Costruire UI e layout in Jetpack Compose per applicazioni Android native
Creare layout adattivi che funzionano su smartphone, tablet e dispositivi pieghevoli
Implementare pattern di navigazione Android utilizzando Navigation Compose
Costruire interfacce Android accessibili con target di tocco e content description appropriati

03 Dentro la skill

Regole che la Skill mobile-android-design impone a Claude Code e Codex

1 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

LazyColumn per liste lunghe
Usare LazyColumn invece di Column quando si visualizzano liste scorrevoli lunghe, per evitare problemi di performance.

04 Mettila al lavoro

Installa mobile-android-design in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi mobile-android-design a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Modulo CLI generico skills per plugins/ui-design/skills/mobile-android-design/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai Allo Skill Un Primo Task Di Design Di App Mobile

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Prima di accettare l'output, cerca questi elementi nella trascrizione e nei file:

Il risultato viene fornito come codice UI, come elenca il catalogo per questa skill.
L'agente nomina la skill mobile-android-design nel suo piano o trascrizione prima di produrre il risultato.
I tuoi contenuti, nomi e numeri appaiono invariati nell'output.

In OpenDesign importi mobile-android-design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
File della skill: plugins/ui-design/skills/mobile-android-design/SKILL.md Checksum del contenuto registrato alla verifica; commit 4236bb9
License: MIT Da LICENSE.
Stelle del repository: 39.635 Snapshot GitHub acquisita il 14-09-2026 per l'intero repository wshobson/agents, che contiene 18 skill in questo catalogo. Non è una valutazione o conteggio d'uso per mobile-android-design.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando usare questa skillElenca gli scenari per Material Design 3, Compose UI, navigazione, layout adattivi, theming e accessibilità
Concetti fondamentaliIl contenuto tecnico dettagliato è stato spostato in references/details.md per limiti di dimensione
Componente di avvio rapidoFornisce un esempio completo di codice Compose per ItemListCard con stile Material Design 3
Best practiceOtto regole concrete su theming, colore dinamico, layout, accessibilità, stato e preview
Problemi comuniSei problemi frequenti: recomposition, perdita di stato, performance, theme leak, navigazione e memory leak

Descrizione della skill

"Padroneggia i pattern di Material Design 3 e Jetpack Compose per costruire app Android native. Da usare quando progetti interfacce Android, implementi UI in Compose o segui le linee guida Material Design di Google."

Descrizione front-matter da SKILL.md. Il file completo è di circa 3.797 caratteri. Leggi il file completo su GitHub.

Mobile Android Design

Esegui mobile-android-design su un task reale di progettazione mobile.

Scarica OpenDesign, importa mobile-android-design dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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