skills.rest
Helcio-Nogueira
Helcio-NogueiraCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Guides mobile app design decisions for iOS, Android, React Native, and Flutter projects.

Updated Mar 23, 2026
Search Tags:#mobile design#performance optimization#ios#android#flutter#react native#touch interaction
One-click install
npx skills add https://github.com/Helcio-Nogueira/Painel_Inteligente_Hackaton_2026 --skill mobile-design-helcio-nogueira
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/Helcio-Nogueira/Painel_Inteligente_Hackaton_2026/tree/main/.agents/skills/mobile-design
Command: npx skills add https://github.com/Helcio-Nogueira/Painel_Inteligente_Hackaton_2026 --skill mobile-design-helcio-nogueira

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Mobile app development often suffers from AI-generated code that relies on memorized defaults: ScrollView for long lists, insecure token storage, tiny touch targets, and platform-agnostic designs that feel wrong on both iOS and Android. This Skill forces deliberate, context-based decision-making before any mobile code is written. ## Core Features & Use Cases - Anti-Memorization Protocol: A mandatory design-thinking checklist that prevents default patterns (tab bars everywhere, Redux for simple apps) and requires platform-specific analysis for iOS and Android. - Performance Guardrails: Concrete rules for React Native (FlatList with memoized renderItem, useNativeDriver) and Flutter (const constructors, ListView.builder, dispose patterns) to maintain 60fps. - Decision Trees: Framework selection (RN vs Flutter vs native), state management (Zustand/Riverpod/BLoC), storage strategy (SecureStore vs AsyncStorage vs SQLite), and offline sync patterns. - Use Case: When asked to build a cross-platform e-commerce app, the Skill requires confirming platform, framework, navigation, and offline needs first, then applies touch-target minimums, thumb-zone placement, and platform-specific navigation conventions. ## Quick Start Ask the assistant to design a mobile app screen or architecture and it will read the reference files, complete the mandatory checkpoint, and produce platform-aware guidance.

Frequently Asked Questions about mobile-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize FlatList performance in React Native?▼

Wrap list items in React.memo, memoize renderItem with useCallback, use a stable keyExtractor with item IDs instead of indexes, and provide getItemLayout for fixed-height items. Consider FlashList for better recycling and memory management on large datasets.

Should I use React Native or Flutter for my mobile app?▼

Choose React Native with Expo when you need OTA updates and have a web-focused team. Choose Flutter for pixel-perfect identical UI across platforms. Choose native SwiftUI or Kotlin when you need maximum performance or deep platform-specific features.

What is the minimum touch target size for mobile apps?▼

iOS requires a minimum of 44pt by 44pt and Android requires 48dp by 48dp for all tappable elements. Maintain at least 8-12px spacing between adjacent targets to prevent accidental taps, and place primary actions in the thumb zone.

Where should I store authentication tokens in a mobile app?▼

Never store tokens in AsyncStorage or plain key-value storage since they are readable on rooted devices. Use iOS Keychain, Android EncryptedSharedPreferences, or expo-secure-store, and keep short-lived access tokens in memory with refresh tokens in secure storage.

Why does my React Native app crash on launch but work in development?▼

Immediate launch crashes are almost always native configuration issues such as missing Info.plist entries or AndroidManifest declarations. Check native logs with adb logcat on Android or Xcode device logs on iOS, and clean native build caches.

When should I use dark mode true black versus near black?▼

True black (#000000) maximizes OLED battery savings since black pixels are fully off, but can cause scroll smearing. Near black (#121212) follows Material Design guidance, scrolls more smoothly, and still saves significant battery on OLED screens.

Related Skills

Explore More Design & Creative Skills→
BoneTheDeveloperBoneTheDeveloper

mobile-development

Guide mobile app architecture, testing, and deployment across React Native, Flutter, SwiftUI, and Jetpack Compose.

Community
Advanced
liqiha0liqiha0

mobile-engineer

Coordinate device management, app installation, and Maestro UI automation tests.

Community
Advanced
mkazimotomkazimoto

maui-push-notifications

Integrate push notifications for .NET MAUI apps on Android and iOS via Azure Notification Hubs.

Community
Advanced
DanhvbDanhvb

Mobile Web Domain Knowledge

Provide structured mobile and web domain knowledge for architecture planning.

Community
Advanced