Loading...

mobile-development

Original：🇺🇸 English

Translated

Cross-platform and native mobile development. Frameworks: React Native, Flutter, Swift/SwiftUI, Kotlin/Jetpack Compose. Capabilities: mobile UI, offline-first architecture, push notifications, deep linking, biometrics, app store deployment. Actions: build, create, implement, optimize, test, deploy mobile apps. Keywords: iOS, Android, React Native, Flutter, Swift, Kotlin, mobile app, offline sync, push notification, deep link, biometric auth, App Store, Play Store, iOS HIG, Material Design, battery optimization, memory management, mobile performance. Use when: building mobile apps, implementing mobile-first UX, choosing native vs cross-platform, optimizing battery/memory/network, deploying to app stores, handling mobile-specific features.

1installs

Sourcesamhvw8/dot-claude

Added on2026-02-10

NPX Install

npx skill4agent add samhvw8/dot-claude mobile-development

Tags

Translated version includes tags in frontmatter

mobile-development cross-platform-frameworks native-app-development mobile-performance-optimization app-store-deployment

SKILL.md Content

View Translation Comparison →

Mobile Development Skill

Production-ready mobile development with modern frameworks, best practices, and mobile-first thinking patterns.

When to Use

Building mobile applications (iOS, Android, or cross-platform)
Implementing mobile-first design and UX patterns
Optimizing for mobile constraints (battery, memory, network, small screens)
Making native vs cross-platform technology decisions
Implementing offline-first architecture and data sync
Following platform-specific guidelines (iOS HIG, Material Design)
Optimizing mobile app performance and user experience
Implementing mobile security and authentication
Testing mobile applications (unit, integration, E2E)
Deploying to App Store and Google Play

Technology Selection Guide

Cross-Platform Frameworks:

React Native: JavaScript expertise, web code sharing, mature ecosystem (121K stars, 67% familiarity)
Flutter: Performance-critical apps, complex animations, fastest-growing (170K stars, 46% adoption)

Native Development:

iOS (Swift/SwiftUI): Maximum iOS performance, latest features, Apple ecosystem integration
Android (Kotlin/Jetpack Compose): Maximum Android performance, Material Design 3, platform optimization

See:

references/mobile-frameworks.md

for detailed framework comparisons

Mobile Development Mindset

The 10 Commandments of Mobile Development:

Performance is Foundation, Not Feature - 70% abandon apps >3s load time
Every Kilobyte, Every Millisecond Matters - Mobile constraints are real
Offline-First by Default - Network is unreliable, design for it
User Context > Developer Environment - Think real-world usage scenarios
Platform Awareness Without Platform Lock-In - Respect platform conventions
Iterate, Don't Perfect - Ship, measure, improve cycle is survival
Security and Accessibility by Design - Not afterthoughts
Test on Real Devices - Simulators lie about performance
Architecture Scales with Complexity - Don't over-engineer simple apps
Continuous Learning is Survival - Mobile landscape evolves rapidly

See:

references/mobile-mindset.md

for thinking patterns and decision frameworks

Reference Navigation

Core Technologies:

```
mobile-frameworks.md
```
- React Native, Flutter, Swift, Kotlin, framework comparison matrices, when to use each
```
mobile-ios.md
```
- Swift 6, SwiftUI, iOS architecture patterns, HIG, App Store requirements, platform capabilities
```
mobile-android.md
```
- Kotlin, Jetpack Compose, Material Design 3, Play Store, Android-specific features

Best Practices & Development Mindset:

```
mobile-best-practices.md
```
- Mobile-first design, performance optimization, offline-first architecture, security, testing, accessibility, deployment, analytics
```
mobile-debugging.md
```
- Debugging tools, performance profiling, crash analysis, network debugging, platform-specific debugging
```
mobile-mindset.md
```
- Thinking patterns, decision frameworks, platform-specific thinking, common pitfalls, debugging strategies

Key Best Practices (2024-2025)

Performance Targets:

App launch: <2 seconds (70% abandon if >3s)
Memory usage: <100MB for typical screens
Network requests: Batch and cache aggressively
Battery impact: Respect Doze Mode and background restrictions
Animation: 60 FPS (16.67ms per frame)

Architecture:

MVVM for small-medium apps (clean separation, testable)
MVVM + Clean Architecture for large enterprise apps
Offline-first with hybrid sync (push + pull)
State management: Zustand (React Native), Riverpod 3 (Flutter), StateFlow (Android)

Security (OWASP Mobile Top 10):

OAuth 2.0 + JWT + Biometrics for authentication
Keychain (iOS) / KeyStore (Android) for sensitive data
Certificate pinning for network security
Never hardcode credentials or API keys
Implement proper session management

Testing Strategy:

Unit tests: 70%+ coverage for business logic
Integration tests: Critical user flows
E2E tests: Detox (React Native), Appium (cross-platform), XCUITest (iOS), Espresso (Android)
Real device testing mandatory before release

Deployment:

Fastlane for automation across platforms
Staged rollouts: Internal → Closed → Open → Production
Mandatory: iOS 17 SDK (2024), Android 15 API 35 (Aug 2025)
CI/CD saves 20% development time

Quick Decision Matrix

Need	Choose
JavaScript team, web code sharing	React Native
Performance-critical, complex animations	Flutter
Maximum iOS performance, latest features	Swift/SwiftUI native
Maximum Android performance, Material 3	Kotlin/Compose native
Rapid prototyping	React Native + Expo
Desktop + mobile	Flutter
Enterprise with JavaScript skills	React Native
Startup with limited resources	Flutter or React Native
Gaming or heavy graphics	Native (Swift/Kotlin) or Unity

Framework Quick Comparison (2024-2025)

Criterion	React Native	Flutter	Swift/SwiftUI	Kotlin/Compose
Stars	121K	170K	N/A	N/A
Adoption	35%	46%	iOS only	Android only
Performance	80-90% native	85-95% native	100% native	100% native
Dev Speed	Fast (hot reload)	Very fast (hot reload)	Fast (Xcode Previews)	Fast (Live Edit)
Learning Curve	Easy (JavaScript)	Medium (Dart)	Medium (Swift)	Medium (Kotlin)
UI Paradigm	Component-based	Widget-based	Declarative	Declarative
Community	Huge (npm)	Growing	Apple ecosystem	Android ecosystem
Best For	JS teams, web sharing	Performance, animations	iOS-only apps	Android-only apps

Implementation Checklist

Project Setup:

Choose framework → Initialize project → Configure dev environment → Setup version control → Configure CI/CD → Team standards

Architecture:

Choose pattern (MVVM/Clean) → Setup folders → State management → Navigation → API layer → Error handling → Logging

Core Features:

Authentication → Data persistence → API integration → Offline sync → Push notifications → Deep linking → Analytics

UI/UX:

Design system → Platform guidelines → Accessibility → Responsive layouts → Dark mode → Localization → Animations

Performance:

Image optimization → Lazy loading → Memory profiling → Network optimization → Battery testing → Launch time optimization

Quality:

Unit tests (70%+) → Integration tests → E2E tests → Accessibility testing → Performance testing → Security audit

Security:

Secure storage → Authentication flow → Network security → Input validation → Session management → Encryption

Deployment:

App icons/splash → Screenshots → Store listings → Privacy policy → TestFlight/Internal testing → Staged rollout → Monitoring

Platform-Specific Guidelines

iOS (Human Interface Guidelines):

Native navigation patterns (tab bar, navigation bar)
iOS design patterns (pull to refresh, swipe actions)
San Francisco font, iOS color system
Haptic feedback, 3D Touch/Haptic Touch
Respect safe areas and notch

Android (Material Design 3):

Material navigation (bottom nav, navigation drawer)
Floating action buttons, material components
Roboto font, Material You dynamic colors
Touch feedback (ripple effects)
Respect system bars and gestures

Common Pitfalls to Avoid

Testing only on simulators - Real devices show true performance
Ignoring platform conventions - Users expect platform-specific patterns
No offline handling - Network failures will happen
Poor memory management - Leads to crashes and poor UX
Hardcoded credentials - Security vulnerability
No accessibility - Excludes 15%+ of users
Premature optimization - Optimize based on metrics, not assumptions
Over-engineering - Start simple, scale as needed
Skipping real device testing - Simulators don't show battery/network issues
Not respecting battery - Background processing must be justified

Performance Budgets

Recommended Targets:

App size: <50MB initial download, <200MB total
Launch time: <2 seconds to interactive
Screen load: <1 second for cached data
Network request: <3 seconds for API calls
Memory: <100MB for typical screens, <200MB peak
Battery: <5% drain per hour of active use
Frame rate: 60 FPS (16.67ms per frame)

Resources

Official Documentation:

React Native: https://reactnative.dev/
Flutter: https://flutter.dev/
iOS HIG: https://developer.apple.com/design/human-interface-guidelines/
Material Design: https://m3.material.io/
OWASP Mobile: https://owasp.org/www-project-mobile-top-10/

Tools & Testing:

Community:

React Native Directory: https://reactnative.directory/
Pub.dev (Flutter packages): https://pub.dev/
Awesome React Native: https://github.com/jondot/awesome-react-native
Awesome Flutter: https://github.com/Solido/awesome-flutter