mobile-android-design

Aperçu

Qu'est-ce que mobile-android-design ?

mobile-android-design est une compétence spécialisée pour les développeurs et designers Android souhaitant créer des interfaces mobiles visuellement attrayantes, adaptatives et accessibles. Elle se concentre sur les principes de Material Design 3 (Material You) et Jetpack Compose, la boîte à outils UI moderne de Google pour Android. Cette compétence couvre le theming, la navigation, les systèmes de mise en page et les bonnes pratiques pour concevoir des applications qui s'adaptent parfaitement aux téléphones, tablettes et appareils pliables.

À qui s'adresse cette compétence ?

• Développeurs d'applications Android créant des interfaces natives
• Designers appliquant les directives Material Design 3
• Équipes adoptant Jetpack Compose pour des projets Android modernes
• Toute personne ayant besoin de mises en page adaptatives, de theming dynamique ou de navigation avancée

Problèmes résolus

• Simplifie la conception UI avec les composants Material Design 3
• Facilite la configuration de la navigation avec Navigation Compose
• Permet le theming dynamique des couleurs et l'accessibilité
• Supporte des mises en page réactives pour différents types d'appareils

Comment utiliser

Étapes d'installation

1. Installez la compétence avec :

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

2. Commencez par consulter SKILL.md pour une vue d'ensemble des concepts et du workflow.
3. Explorez le dossier references/ pour des guides pratiques :
   • android-navigation.md : modèles et configuration de la navigation
   • compose-components.md : composants UI Jetpack Compose et interactions
   • material3-theming.md : theming et implémentation des couleurs dynamiques

Concepts clés et fichiers

Principes de Material Design 3

• Personnalisation avec les couleurs dynamiques
• Accessibilité via des palettes tonales
• Mises en page réactives pour grands écrans

Système de mise en page Jetpack Compose

• Utilisez Column et Row pour des agencements flexibles
• Implémentez listes, pull-to-refresh et swipe-to-dismiss avec Compose

Modèles de navigation

• Configurez Navigation Compose dans android-navigation.md
• Utilisez des routes et arguments typés pour une navigation robuste

Theming et UI adaptative

• Appliquez le theming Material 3 avec couleurs dynamiques (material3-theming.md)
• Personnalisez les schémas de couleurs pour les modes clair et sombre

Adapter à votre projet

• Référez-vous aux guides et exemples de code fournis
• Intégrez les patterns Material 3 et Compose dans votre propre dépôt
• Ajustez les workflows selon vos outils et besoins applicatifs

FAQ

mobile-android-design convient-il à tous les projets Android ?

Cette compétence est idéale pour les projets utilisant Jetpack Compose et visant les standards UI Android modernes. Si votre application repose sur des mises en page XML héritées ou des systèmes de design plus anciens, envisagez d'abord une migration vers Compose et Material 3.

Où trouver des exemples de navigation et de theming ?

Consultez les fichiers references/android-navigation.md et references/material3-theming.md pour des exemples de code détaillés et des instructions de configuration.

Comment prévisualiser l'intégralité du contenu de la compétence ?

Ouvrez l'onglet Fichiers pour parcourir l'arborescence complète, incluant les références imbriquées et les scripts d'aide pour les patterns UI avancés.

Puis-je personnaliser la palette de couleurs Material 3 ?

Oui. Consultez material3-theming.md pour des conseils sur la définition de schémas de couleurs personnalisés et l'activation du support des couleurs dynamiques.

Que faire si je dois prendre en charge tablettes et appareils pliables ?

mobile-android-design inclut des stratégies de mise en page réactives et des patterns UI adaptatifs pour les grands écrans. Consultez les sections sur la mise en page dans SKILL.md et les guides des composants Compose pour les meilleures pratiques.