skills.rest
beliciobcardoso
beliciobcardosoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-design

Guides mobile-first design decisions for iOS, Android, React Native, and Flutter apps.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building mobile apps with AI often produces desktop-style patterns, memorized defaults, and performance-killing code like ScrollView lists or insecure token storage. This Skill forces deliberate, context-based thinking for touch interaction, platform conventions, performance, and offline behavior before any mobile code is written. ## Core Features & Use Cases - Anti-Memorization Protocol: Mandatory checkpoints and questioning matrices that prevent AI default patterns (tab bars everywhere, Redux for simple apps, AsyncStorage for tokens). - Platform Decision Guidance: Decision trees for framework selection (React Native vs Flutter vs native), state management, navigation patterns, storage strategy, and offline sync. - Performance & UX Rules: Concrete rules for FlatList/FlashList optimization, 60fps animations, 44-48px touch targets, thumb zones, OLED dark mode, and memory leak prevention. - Use Case: When asked to build a React Native e-commerce app, the Skill first requires confirming platform, framework, and offline needs, then applies memoized list rendering, SecureStore for tokens, and platform-specific navigation conventions. ## Quick Start Use the mobile-design skill to plan and build a cross-platform React Native app with proper touch targets, list performance, and platform-specific navigation.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I choose between React Native and Flutter for a mobile app?▼

Choose React Native with Expo when you need OTA updates and have a web team; choose Flutter for pixel-perfect identical UI across platforms. Pick native SwiftUI or Kotlin when maximum performance or deep OS integration is required.

How do I optimize FlatList performance in React Native?▼

Memoize list items with React.memo, wrap renderItem in useCallback, use a stable keyExtractor with item IDs instead of indexes, and provide getItemLayout for fixed-height items. Never use ScrollView with map for long lists.

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

iOS requires 44pt by 44pt minimum touch targets, while Android requires 48dp by 48dp. Keep at least 8-12px spacing between targets and place primary actions in the thumb zone at the bottom of the screen.

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

Store tokens in secure storage: iOS Keychain, Android EncryptedSharedPreferences, or Expo SecureStore. Never use AsyncStorage, which is plain text and accessible on rooted devices.

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

Immediate launch crashes are almost always native configuration issues in Info.plist or AndroidManifest.xml, not JavaScript errors. Check adb logcat on Android or Xcode device logs on iOS, and clean native build caches.

When should I use tab bar versus drawer navigation?▼

Use a tab bar for 3-5 equally important top-level destinations that users switch between frequently. Use a drawer only when you have more than 5 destinations or less frequently accessed sections, since drawer items are hidden and less discoverable.

Related Skills

Explore More Design & Creative Skills→
sicktasticsicktastic

positioning-statement

Guide teams through Geoffrey Moore value proposition and differentiation templates.

Community
Intermediate
arbazkhan971arbazkhan971
26

mobile

Automates mobile project setup, signing, and store submission for iOS/Android.

Community
Advanced
petrkindlmannpetrkindlmann
64

mobile-testing

Automate mobile app testing with Appium 2.0 and Detox across devices and CI.

Community
Advanced
barkleesandersbarkleesanders
5

capacitor-ios

Convert web applications into App Store-ready native iOS apps with Capacitor.

Community
Advanced