Mobile Design

Mobile Design

Overview

Design and build mobile applications that feel native on each platform. This skill covers React Native, Flutter, and SwiftUI with deep knowledge of platform-specific Human Interface Guidelines (Apple HIG) and Material Design, gesture handling, responsive layouts, offline-first patterns, and app store submission requirements.

Phase 1: Platform Analysis

1. Identify target platforms (iOS, Android, both) 2. Choose framework (React Native, Flutter, SwiftUI, or cross-platform) 3. Review platform-specific design guidelines 4. Define navigation architecture 5. Map offline requirements

STOP — Present platform and framework recommendation with rationale before design.

Framework Selection Decision Table

Phase 2: Design Implementation

1. Build component library with platform variants 2. Implement navigation (tab bar, stack, drawer) 3. Handle safe areas and notches 4. Add gesture recognizers 5. Implement responsive layouts for phone/tablet

STOP — Present navigation architecture and component inventory for review.

Platform-Specific HIG Compliance

Apple Human Interface Guidelines

Material Design (Android)

Cross-Platform Pattern Decision Table

Safe Area Handling

React Native

import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

function Screen() {
  const insets = useSafeAreaInsets();
  return (
    <View style={{ flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom }}>
      {/* Content */}
    </View>
  );
}

Flutter

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: // Content
    ),
  );
}

SwiftUI

var body: some View {
  VStack {
    // Content automatically respects safe areas
  }
  .ignoresSafeArea(.keyboard) // Only ignore keyboard if needed
}

Gesture Navigation Patterns

Touch Target Rules

Phase 3: Platform Polish

1. Platform-specific animations and transitions 2. Haptic feedback integration 3. App icon and launch screen 4. Dark mode and Dynamic Type support 5. App store metadata and screenshots

STOP — Test on physical devices before declaring complete.

Responsive Layout Decision Table

React Native Responsive

import { useWindowDimensions } from 'react-native';

function useResponsive() {
  const { width } = useWindowDimensions();
  return {
    isPhone: width < 768,
    isTablet: width >= 768 && width < 1024,
    isDesktop: width >= 1024,
    columns: width < 768 ? 1 : width < 1024 ? 2 : 3,
  };
}

Flutter Responsive

class ResponsiveLayout extends StatelessWidget {
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) return MobileLayout();
        if (constraints.maxWidth < 1200) return TabletLayout();
        return DesktopLayout();
      },
    );
  }
}

Offline-First Architecture

Implementation Checklist

• [ ] Network status detection and UI indicator
• [ ] Local database for all critical data
• [ ] Operation queue for pending writes
• [ ] Retry logic with exponential backoff
• [ ] Conflict detection and resolution strategy
• [ ] Cache invalidation policy
• [ ] Sync status indicator in UI
• [ ] Graceful degradation for network-only features

App Store Guidelines Summary

Performance Targets

Anti-Patterns / Common Mistakes

Documentation Lookup (Context7)

Use mcp__context7__resolve-library-id then mcp__context7__query-docs for up-to-date docs. Returned docs override memorized knowledge.

• react-native — for component API, navigation, or platform-specific modules
• flutter — for widget catalog, state management, or platform channels

---

Integration Points

Skill Type

FLEXIBLE — Adapt patterns to the chosen framework and target platforms. Platform-specific guidelines should be followed when targeting a single platform; cross-platform apps may blend conventions thoughtfully.