Claude Code Plugins

Community-maintained marketplace

Feedback

mobile-development

@htlabs-xyz/htlabs
0
0

Build modern mobile applications with React Native, Flutter, Swift/SwiftUI, and Kotlin/Jetpack Compose. Covers mobile-first design principles, performance optimization (battery, memory, network), offline-first architecture, platform-specific guidelines (iOS HIG, Material Design), testing strategies, security best practices, accessibility, app store deployment, and mobile development mindset. Use when building mobile apps, implementing mobile UX patterns, optimizing for mobile constraints, or making native vs cross-platform decisions.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name mobile-development
description Build modern mobile applications with React Native, Flutter, Swift/SwiftUI, and Kotlin/Jetpack Compose. Covers mobile-first design principles, performance optimization (battery, memory, network), offline-first architecture, platform-specific guidelines (iOS HIG, Material Design), testing strategies, security best practices, accessibility, app store deployment, and mobile development mindset. Use when building mobile apps, implementing mobile UX patterns, optimizing for mobile constraints, or making native vs cross-platform decisions.
license MIT
version 1.0.0

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:

  1. Performance is Foundation, Not Feature - 70% abandon apps >3s load time
  2. Every Kilobyte, Every Millisecond Matters - Mobile constraints are real
  3. Offline-First by Default - Network is unreliable, design for it
  4. User Context > Developer Environment - Think real-world usage scenarios
  5. Platform Awareness Without Platform Lock-In - Respect platform conventions
  6. Iterate, Don't Perfect - Ship, measure, improve cycle is survival
  7. Security and Accessibility by Design - Not afterthoughts
  8. Test on Real Devices - Simulators lie about performance
  9. Architecture Scales with Complexity - Don't over-engineer simple apps
  10. 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

  1. Testing only on simulators - Real devices show true performance
  2. Ignoring platform conventions - Users expect platform-specific patterns
  3. No offline handling - Network failures will happen
  4. Poor memory management - Leads to crashes and poor UX
  5. Hardcoded credentials - Security vulnerability
  6. No accessibility - Excludes 15%+ of users
  7. Premature optimization - Optimize based on metrics, not assumptions
  8. Over-engineering - Start simple, scale as needed
  9. Skipping real device testing - Simulators don't show battery/network issues
  10. 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:

Tools & Testing:

Community: