mobile-design
Créer des Applications Mobiles avec les Bonnes Pratiques de Design
Les applications mobiles échouent lorsque les développeurs appliquent une pensée desktop. Cette compétence enseigne les principes de conception mobile-first, la psychologie du toucher, l'optimisation des performances et les conventions spécifiques aux plateformes iOS et Android.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "mobile-design". Comment dois-je implémenter la navigation dans une application React Native pour iOS et Android ?
النتيجة المتوقعة:
Basé sur les principes mobile-design : 1) Utilisez React Navigation avec des onglets inférieurs (max 5 éléments), 2) Implémentez lazy: false pour préserver l'état des onglets, 3) Ajoutez un écouteur BackHandler pour le bouton retour matériel Android, 4) Utilisez la gestion safe area iOS, 5) Considérez les modèles de navigation spécifiques à la plateforme - iOS utilise le swipe depuis le bord tandis qu'Android utilise le retour système.
استخدام "mobile-design". Quels sont les problèmes de performance critiques à éviter dans les listes React Native ?
النتيجة المتوقعة:
Problèmes critiques : 1) NE JAMAIS utiliser ScrollView avec .map() pour les longues listes - utilisez FlatList, 2) Toujours envelopper les éléments de liste dans React.memo, 3) Utiliser useCallback pour la fonction renderItem, 4) NE JAMAIS utiliser l'index comme key - utilisez des IDs stables, 5) Utilisez useNativeDriver: true pour les animations, 6) Supprimez toutes les instructions console.log avant la production.
التدقيق الأمني
آمنThis skill is a legitimate mobile design and engineering doctrine. All 758 static scanner detections are false positives: backtick characters in markdown documentation, mentions of security terms (Keychain, SAM) in educational context about secure coding practices, and references to cryptographic algorithms in warnings against weak crypto. The included mobile_audit.py is a genuine React Native/Flutter code analysis tool for mobile-specific performance and security issues.
درجة الجودة
ماذا يمكنك بناءه
Décisions d'Architecture d'Application Mobile
Utiliser l'arbre de décision du framework et le MFRI pour évaluer s'il faut développer avec React Native, Flutter ou des frameworks natifs en fonction des exigences du projet.
Revue d'Optimisation des Performances
Appliquer la doctrine de performance mobile pour auditer le code React Native ou Flutter existant pour des problèmes de performance courants comme l'abus de ScrollView, l'absence de mémorisation, et les console.log en production.
Validation de Design Multi-Plateforme
Utiliser la matrice d'unification de plateforme pour décider quels éléments doivent être unifiés entre iOS et Android versus les implémentations spécifiques à chaque plateforme.
جرّب هذه الموجهات
En utilisant le framework MFRI de la compétence mobile-design, évaluez cette demande de fonctionnalité pour une application [platform] : [describe feature]. Quel est le score de faisabilité et quelles considérations doivent être prises en compte ?
Examinez cet extrait de code React Native/Flutter pour des problèmes de performance mobile. Vérifiez : ScrollView vs FlatList, utilisation de React.memo, useCallback pour renderItem, keyExtractor avec des IDs stables, et les instructions console.log qui doivent être supprimées : ``` [paste code here] ```
Pour une application mobile cross-platform, déterminez quels éléments UI doivent DIVERGER entre iOS et Android selon la matrice de plateforme de la compétence mobile-design. Exemple d'élément : [navigation pattern]. Fournissez des recommandations avec justification.
Auditez cet écran mobile pour l'accessibilité tactile : Vérifiez les tailles des zones de toucher (minimum 44pt iOS, 48dp Android), le placement dans la zone du pouce pour les CTA principaux, les alternatives gestuelles pour les actions de balayage, et le retour haptique sur les actions importantes.
أفضل الممارسات
- Toujours évaluer la faisabilité des fonctionnalités avec MFRI avant l'implémentation - les scores inférieurs à 3 nécessitent une refonte
- Lire les fichiers spécifiques à la plateforme (platform-ios.md, platform-android.md) avant de concevoir toute UI mobile
- Appliquer le Mandatory Mobile Checkpoint avant d'écrire du code - documenter la plateforme, le framework et les principes de design
تجنب
- Appliquer des patterns web desktop au mobile (divs scrollables, états hover, typographie large)
- Ignorer les conventions de plateforme - iOS et Android ont des modèles de navigation, gestes et composants différents
- Négliger la considération offline - les utilisateurs mobiles perdent fréquemment la connectivité et attendent une dégradation gracieuse