Aller au guide d’utilisation
mobile-android-designpar Seth Hobson

Mobile Android Design Skill.

Un skill Claude Code et Codex pour le design d'applications mobiles : UI Android native avec Material Design 3 et Jetpack Compose.

  • Applications mobiles
  • Code UI
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
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 3 797 caractères au total

01 Ce qu'il fait

Ce que fait le skill mobile-android-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill apprend aux agents à créer des applications Android natives à l'aide de Material Design 3 (Material You) et de Jetpack Compose. Il couvre l'implémentation de mises en page UI Compose, les modèles de navigation Android avec Navigation Compose, les mises en page adaptatives pour smartphones, tablettes et appareils pliables, le thème Material 3 avec couleurs dynamiques, les interfaces Android accessibles, ainsi que les gestes et interactions spécifiques à Android.

Le skill se concentre sur la création d'applications Android modernes et adaptatives qui s'intègrent parfaitement à l'écosystème Android, en suivant les directives Material Design de Google et en gérant différentes configurations d'écran.

Code UI
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Appliquer le thème Material 3

    Accédez aux couleurs via MaterialTheme.colorScheme pour prendre en charge automatiquement le mode sombre et activer la couleur dynamique sur Android 12+ pour la personnalisation.

  2. 02
    Créer des composants UI Compose

    Créez des composables à l'aide des modèles Jetpack Compose avec une élévation d'état appropriée pour rendre les composants réutilisables et testables.

  3. 03
    Implémenter des mises en page adaptatives

    Utilisez WindowSizeClass pour créer des designs responsives qui s'adaptent aux smartphones, tablettes et appareils pliables.

  4. 04
    Ajouter le support d'accessibilité

    Fournissez contentDescription pour tous les éléments interactifs et assurez des cibles tactiles d'au moins 48dp pour la conformité en matière d'accessibilité.

  5. 05
    Gérer correctement l'état

    Utilisez remember et rememberSaveable de manière appropriée pour éviter la perte d'état lors des changements de configuration.

02 Trouvez celui qui vous convient

Quand utiliser le skill mobile-android-design

Utilisez le skill mobile-android-design dans Claude Code ou Codex lorsque le travail concerne ce type de design d'application mobile. La portée et les limites ci-dessous proviennent du propre fichier du skill.

Bon choix

  • Concevoir des interfaces d'applications Android conformes aux directives Material Design 3
  • Créer des UI et mises en page Jetpack Compose pour des applications Android natives
  • Créer des mises en page adaptatives fonctionnant sur smartphones, tablettes et appareils pliables
  • Implémenter des modèles de navigation Android avec Navigation Compose
  • Créer des interfaces Android accessibles avec des cibles tactiles et des descriptions de contenu appropriées

    03 Dans le skill

    Règles que le skill mobile-android-design donne à Claude Code et Codex

    1 instructions concrètes, valeurs par défaut et limites que le SKILL.md définit pour l'agent — la partie du fichier qui change le résultat.

    1. LazyColumn pour les listes longues

      Utilisez LazyColumn au lieu de Column pour afficher de longues listes défilantes afin d'éviter les problèmes de performance.

    04 Mettez-le en pratique

    Installer mobile-android-design dans Claude Code ou Codex

    Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

    Ajouter mobile-android-design à Claude Code, Codex ou votre agent

    Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

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

    Formulaire générique skills CLI pour plugins/ui-design/skills/mobile-android-design/SKILL.md ; le dépôt peut documenter son propre chemin.

    Donner au skill une première tâche de conception d'application mobile

    Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

    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.

    Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

    Vérifiez le premier résultat

    Avant d'accepter le résultat, recherchez ceci dans la transcription et les fichiers :

    • Le résultat est livré sous forme de code UI, comme le catalogue l'indique pour ce skill.
    • L'agent nomme le skill mobile-android-design dans son plan ou sa transcription avant de produire le résultat.
    • Votre propre contenu, vos noms et vos chiffres apparaissent inchangés dans la sortie.

    Dans OpenDesign, importez mobile-android-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

    05 Open source, traçable

    Source, licence et vérification

    D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

    Repository
    github.com/wshobson/agents Branche main
    Fichier du skill
    plugins/ui-design/skills/mobile-android-design/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 4236bb9
    License
    MIT D'après LICENSE.
    Étoiles du dépôt
    39 635 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour mobile-android-design.
    Vérifié par OpenDesign
    2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

    Dans le SKILL.md

    1. Quand utiliser ce skillListe les scénarios pour Material Design 3, l'UI Compose, la navigation, les mises en page adaptatives, le thème et l'accessibilité
    2. Concepts fondamentauxLe contenu technique détaillé a été déplacé vers references/details.md en raison de contraintes de taille
    3. Composant de démarrage rapideFournit un exemple de code Compose complet pour ItemListCard avec le style Material Design 3
    4. Bonnes pratiquesHuit règles concrètes couvrant le thème, la couleur dynamique, les mises en page, l'accessibilité, l'état et les aperçus
    5. Problèmes courantsSix problèmes fréquents : recomposition, perte d'état, performance, fuites de thème, navigation et fuites de mémoire
    Description du skill lui-même
    « Maîtrisez les patterns Material Design 3 et Jetpack Compose pour construire des applications Android natives. À utiliser lors de la conception d'interfaces Android, de l'implémentation d'UI Compose ou du respect des directives Material Design de Google. »

    Description front-matter du fichier SKILL.md. Le fichier complet fait environ 3 797 caractères. Lire le fichier complet sur GitHub.

    Mobile Android Design

    Exécutez mobile-android-design sur une vraie tâche de conception d'application mobile.

    Téléchargez OpenDesign, importez mobile-android-design depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

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

    OpenDesign Desktop

    Un seul design system. Votre marque, cohérente partout

    Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

    • Sites, slides, prototypes, dashboards, images et vidéos
    • Plus de 140 design systems et la bibliothèque complète de modèles et skills
    • Codex local et plus de 21 agents de code · Gratuit
    Télécharger gratuitement

    Disponible sur macOS et Windows