ホーム/移动开发/senior-mobile
S

senior-mobile

by @borgheiv
4.9(28)

iOS、Android、React Native、Flutterなどのプラットフォーム向けに専門的なモバイルアプリケーション開発ガイダンスを提供します。

Mobile ArchitectureAdvanced iOS/AndroidPerformance OptimizationCross-Platform DevelopmentMobile StrategyGitHub
インストール方法
npx skills add borghei/claude-skills --skill senior-mobile
compare_arrows

Before / After 効果比較

1
使用前

経験不足のチームによって開発されたモバイルアプリケーションは、パフォーマンスのボトルネック、メモリリーク、UIのフリーズ、バッテリー消費の速さなどの問題を抱え、ユーザーエクスペリエンスが悪く、アプリストアの評価も低かった。

使用後

'senior-mobile' スキル指導により、アプリケーションはiOS、Android、React Native、またはFlutterプラットフォームで包括的な最適化が行われました。パフォーマンスの問題が解決され、スムーズなUIアニメーション、効率的なオフラインデータ処理、およびより低いリソース消費が実現され、ユーザー満足度とアプリケーション品質が大幅に向上しました。

description SKILL.md

senior-mobile

Senior Mobile Developer

Expert mobile application development across iOS, Android, React Native, and Flutter.

Keywords

mobile, ios, android, react-native, flutter, swift, kotlin, swiftui, jetpack-compose, expo-router, zustand, app-store, performance, offline-first

Quick Start

# Scaffold a React Native project
python scripts/mobile_scaffold.py --platform react-native --name MyApp

# Build for production
python scripts/build.py --platform ios --env production

# Generate App Store metadata
python scripts/store_metadata.py --screenshots ./screenshots

# Profile rendering performance
python scripts/profile.py --platform android --output report.html

Tools

Script Purpose

scripts/mobile_scaffold.py Scaffold project for react-native, ios, android, or flutter

scripts/build.py Build automation with environment and platform flags

scripts/store_metadata.py Generate App Store / Play Store listing metadata

scripts/profile.py Profile rendering, memory, and startup performance

Platform Decision Matrix

Aspect Native iOS Native Android React Native Flutter

Language Swift Kotlin TypeScript Dart

UI Framework SwiftUI/UIKit Compose/XML React Widgets

Performance Best Best Good Very Good

Code Sharing None None ~80% ~95%

Best For iOS-only, hardware-heavy Android-only, hardware-heavy Web team, shared logic Maximum code sharing

Workflow 1: Scaffold a React Native App (Expo Router)

  • Generate project -- python scripts/mobile_scaffold.py --platform react-native --name MyApp

  • Verify directory structure matches this layout:

src/
├── app/              # Expo Router file-based routes
│   ├── (tabs)/       # Tab navigation group
│   ├── auth/         # Auth screens
│   └── _layout.tsx   # Root layout
├── components/
│   ├── ui/           # Reusable primitives (Button, Input, Card)
│   └── features/     # Domain components (ProductCard, UserAvatar)
├── hooks/            # Custom hooks (useAuth, useApi)
├── services/         # API clients and storage
├── stores/           # Zustand state stores
└── utils/            # Helpers

  • Configure navigation in app/_layout.tsx with Stack and Tabs.

  • Set up state management with Zustand + AsyncStorage persistence.

  • Validate -- Run the app on both iOS simulator and Android emulator. Confirm navigation and state persistence work.

Workflow 2: Build a SwiftUI Feature (iOS)

  • Create the View using NavigationStack, @StateObject for ViewModel binding, and .task for async data loading.

  • Create the ViewModel as @MainActor class with @Published properties. Inject services via protocol for testability.

  • Wire data flow: View observes ViewModel -> ViewModel calls Service -> Service returns data -> ViewModel updates @Published -> View re-renders.

  • Add search/refresh: .searchable(text:) for filtering, .refreshable for pull-to-refresh.

  • Validate -- Run in Xcode previews first, then simulator. Confirm async loading, error states, and empty states all render correctly.

Example: SwiftUI ViewModel Pattern

@MainActor
class ProductListViewModel: ObservableObject {
    @Published private(set) var products: [Product] = []
    @Published private(set) var isLoading = false
    @Published private(set) var error: Error?

    private let service: ProductServiceProtocol

    init(service: ProductServiceProtocol = ProductService()) {
        self.service = service
    }

    func loadProducts() async {
        isLoading = true
        error = nil
        do {
            products = try await service.fetchProducts()
        } catch {
            self.error = error
        }
        isLoading = false
    }
}

Workflow 3: Build a Jetpack Compose Feature (Android)

  • Create the Composable screen with Scaffold, TopAppBar, and state collection via collectAsStateWithLifecycle().

  • Handle UI states with a sealed interface: Loading, Success<T>, Error.

  • Create the ViewModel with @HiltViewModel, MutableStateFlow, and repository injection.

  • Build list UI using LazyColumn with key parameter for stable identity and Arrangement.spacedBy() for spacing.

  • Validate -- Run on emulator. Confirm state transitions (loading -> success, loading -> error -> retry) work correctly.

Example: Compose UiState Pattern

sealed interface UiState<out T> {
    data object Loading : UiState<Nothing>
    data class Success<T>(val data: T) : UiState<T>
    data class Error(val message: String) : UiState<Nothing>
}

@HiltViewModel
class ProductListViewModel @Inject constructor(
    private val repository: ProductRepository
) : ViewModel() {
    private val _uiState = MutableStateFlow<UiState<List<Product>>>(UiState.Loading)
    val uiState: StateFlow<UiState<List<Product>>> = _uiState.asStateFlow()

    fun loadProducts() {
        viewModelScope.launch {
            _uiState.value = UiState.Loading
            repository.getProducts()
                .catch { e -> _uiState.value = UiState.Error(e.message ?: "Unknown error") }
                .collect { products -> _uiState.value = UiState.Success(products) }
        }
    }
}

Workflow 4: Optimize Mobile Performance

  • Profile -- python scripts/profile.py --platform <ios|android> --output report.html

  • Apply React Native optimizations:

Use FlatList with keyExtractor, initialNumToRender=10, windowSize=5, removeClippedSubviews=true

  • Memoize components with React.memo and handlers with useCallback

  • Supply getItemLayout for fixed-height rows to skip measurement

  • Apply native iOS optimizations:

Implement prefetchItemsAt for image pre-loading in collection views

  • Apply native Android optimizations:

Set setHasFixedSize(true) and setItemViewCacheSize(20) on RecyclerViews

  • Validate -- Re-run profiler and confirm frame drops reduced and startup time improved.

Workflow 5: Submit to App Store / Play Store

  • Generate metadata -- python scripts/store_metadata.py --screenshots ./screenshots

  • Build release -- python scripts/build.py --platform ios --env production

  • Review the generated listing (title, description, keywords, screenshots).

  • Upload via Xcode (iOS) or Play Console (Android).

  • Validate -- Monitor review status and address any rejection feedback.

Reference Materials

Document Path

React Native Guide references/react_native_guide.md

iOS Patterns references/ios_patterns.md

Android Patterns references/android_patterns.md

App Store Guide references/app_store_guide.md

Full Code Examples REFERENCE.md

Weekly Installs247Repositoryborghei/claude-skillsGitHub Stars42First SeenJan 23, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled onopencode205gemini-cli192codex187github-copilot182cursor178claude-code176

forumユーザーレビュー (0)

レビューを書く

効果
使いやすさ
ドキュメント
互換性

レビューなし

統計データ

インストール数613
評価4.9 / 5.0
バージョン
更新日2026年3月17日
比較事例1 件

ユーザー評価

4.9(28)
5
0%
4
0%
3
0%
2
0%
1
0%

この Skill を評価

0.0

対応プラットフォーム

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

タイムライン

作成2026年3月17日
最終更新2026年3月17日