mobile-design
Создание мобильных приложений с соблюдением лучших практик дизайна
Мобильные приложения терпят неудачу, когда разработчики применяют десктопное мышление. Этот навык обучает принципам mobile-first дизайна, психологии касаний, оптимизации производительности и платформенно-специфичным соглашениям для iOS и Android.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «mobile-design». Как следует реализовать навигацию в React Native приложении для iOS и Android?
Ожидаемый результат:
На основе принципов mobile-design: 1) Используйте React Navigation с нижними табами (максимум 5 элементов), 2) Реализуйте lazy: false для сохранения состояния табов, 3) Добавьте обработчик BackHandler для аппаратной кнопки назад на Android, 4) Используйте iOS-safe area handling, 5) Учтите платформенно-специфичные паттерны навигации - iOS использует edge swipe, а Android - системную кнопку назад.
Использование «mobile-design». Какие критические проблемы производительности следует избегать в списках React Native?
Ожидаемый результат:
Критические проблемы: 1) НИКОГДА не используйте ScrollView с .map() для длинных списков - используйте FlatList, 2) Всегда оборачивайте элементы списка в React.memo, 3) Используйте useCallback для функции renderItem, 4) НИКОГДА не используйте index как key - используйте стабильные ID, 5) Используйте useNativeDriver: true для анимаций, 6) Удалите все операторы console.log перед продакшеном.
Аудит безопасности
Безопасно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.
Оценка качества
Что вы можете построить
Решения по архитектуре мобильного приложения
Используйте дерево решений фреймворка и MFRI для оценки того, следует ли создавать приложение с помощью React Native, Flutter или нативных фреймворков на основе требований проекта.
Аудит оптимизации производительности
Примените доктрину мобильной производительности для аудита существующего кода React Native или Flutter на наличие распространенных проблем производительности, таких как злоупотребление ScrollView, отсутствие мемоизации и console.log в продакшене.
Валидация кроссплатформенного дизайна
Используйте матрицу объединения платформ для определения того, какие элементы должны быть унифицированы для iOS и Android, а какие требуют платформенно-специфичной реализации.
Попробуйте эти промпты
Используя фреймворк MFRI из навыка mobile-design, оцените этот запрос функции для приложения [platform]: [описание функции]. Какова оценка осуществимости и какие соображения должны быть учтены?
Проверьте этот фрагмент кода React Native/Flutter на проблемы производительности. Проверьте: ScrollView vs FlatList, использование React.memo, useCallback для renderItem, keyExtractor со стабильными ID и операторы console.log, которые следует удалить: ``` [вставьте код здесь] ```
Для кроссплатформенного мобильного приложения определите, какие UI элементы должны РАСХОДИТЬСЯ между iOS и Android на основе матрицы платформ из навыка mobile-design. Пример элемента: [паттерн навигации]. Предоставьте рекомендации с обоснованием.
Проведите аудит этого мобильного экрана на тач-доступность: проверьте размеры тач-целей (минимум 44pt iOS, 48dp Android), размещение в thumb zone для основных CTA, альтернативы жестам для swipe-действий и тактильную обратную связь на важных действиях.
Лучшие практики
- Всегда оценивайте осуществимость функции с помощью MFRI перед реализацией - оценки ниже 3 требуют редизайна
- Читайте платформенно-специфичные файлы (platform-ios.md, platform-android.md) перед проектированием любого мобильного UI
- Применяйте Mandatory Mobile Checkpoint перед написанием любого кода - документируйте платформу, фреймворк и принципы дизайна
Избегать
- Применение десктопных веб-паттернов к мобильным (scrollable divs, hover состояния, крупная типографика)
- Игнорирование платформенных соглашений - iOS и Android имеют различные паттерны навигации, жестов и компонентов
- Пропуск рассмотрения офлайн-режима - мобильные пользователи часто теряют соединение и ожидают корректной деградации