jpskill.com
🛠️ 開発・MCP コミュニティ

ck:mobile-development

React Native、Flutter、Swift/SwiftUI、Kotlin/Jetpack Composeを用いて、iOS/Androidアプリ開発、UX改善、パフォーマンス最適化、オフライン対応、ストア公開までを支援するSkill。

📜 元の英語説明(参考)

Build mobile apps with React Native, Flutter, Swift/SwiftUI, Kotlin/Jetpack Compose. Use for iOS/Android, mobile UX, performance optimization, offline-first, app store deployment.

🇯🇵 日本人クリエイター向け解説

一言でいうと

React Native、Flutter、Swift/SwiftUI、Kotlin/Jetpack Composeを用いて、iOS/Androidアプリ開発、UX改善、パフォーマンス最適化、オフライン対応、ストア公開までを支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ck-mobile-development.zip https://jpskill.com/download/23651.zip && unzip -o ck-mobile-development.zip && rm ck-mobile-development.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/23651.zip -OutFile "$d\ck-mobile-development.zip"; Expand-Archive "$d\ck-mobile-development.zip" -DestinationPath $d -Force; ri "$d\ck-mobile-development.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ck-mobile-development.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ck-mobile-development フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
7

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] ck:mobile-development

モバイル開発スキル

最新のフレームワーク、ベストプラクティス、モバイルファーストの思考パターンを用いた、本番環境に対応したモバイル開発です。

利用シーン

  • モバイルアプリケーション(iOS、Android、またはクロスプラットフォーム)の構築
  • モバイルファーストのデザインとUXパターンの実装
  • モバイルの制約(バッテリー、メモリ、ネットワーク、小画面)への最適化
  • ネイティブとクロスプラットフォームの技術選定
  • オフラインファーストアーキテクチャとデータ同期の実装
  • プラットフォーム固有のガイドライン(iOS HIG、Material Design)の遵守
  • モバイルアプリのパフォーマンスとユーザーエクスペリエンスの最適化
  • モバイルセキュリティと認証の実装
  • モバイルアプリケーションのテスト(単体、結合、E2E)
  • App StoreとGoogle Playへのデプロイ

技術選定ガイド

クロスプラットフォームフレームワーク:

  • React Native: JavaScriptの専門知識、Webコード共有、成熟したエコシステム(121Kスター、67%の認知度)
  • Flutter: パフォーマンスが重要なアプリ、複雑なアニメーション、最も急速に成長中(170Kスター、46%の採用率)

ネイティブ開発:

  • iOS (Swift/SwiftUI): 最大限のiOSパフォーマンス、最新機能、Appleエコシステムとの統合
  • Android (Kotlin/Jetpack Compose): 最大限のAndroidパフォーマンス、Material Design 3、プラットフォーム最適化

詳細なフレームワーク比較については、references/mobile-frameworks.md を参照してください。

モバイル開発の考え方

モバイル開発の10の戒め:

  1. パフォーマンスは機能ではなく基盤である - 70%のユーザーが3秒以上ロードにかかるアプリを放棄します
  2. すべてのキロバイト、すべてのミリ秒が重要である - モバイルの制約は現実です
  3. デフォルトでオフラインファーストである - ネットワークは信頼できないため、それに合わせて設計します
  4. 開発環境よりもユーザーコンテキストを重視する - 現実世界の利用シナリオを考えます
  5. プラットフォームロックインなしにプラットフォームを意識する - プラットフォームの慣習を尊重します
  6. 完璧にするのではなく反復する - リリース、測定、改善のサイクルが生き残りにつながります
  7. 設計段階からセキュリティとアクセシビリティを考慮する - 後回しにしません
  8. 実機でテストする - シミュレーターはパフォーマンスについて嘘をつきます
  9. アーキテクチャは複雑さに応じて拡張する - シンプルなアプリを過剰に設計しません
  10. 継続的な学習が生き残りにつながる - モバイルの状況は急速に進化します

思考パターンと意思決定フレームワークについては、references/mobile-mindset.md を参照してください。

参照ナビゲーション

コアテクノロジー:

  • mobile-frameworks.md - React Native、Flutter、Swift、Kotlin、フレームワーク比較マトリックス、それぞれの使用時期
  • mobile-ios.md - Swift 6、SwiftUI、iOSアーキテクチャパターン、HIG、App Store要件、プラットフォーム機能
  • mobile-android.md - Kotlin、Jetpack Compose、Material Design 3、Play Store、Android固有機能

ベストプラクティスと開発の考え方:

  • mobile-best-practices.md - モバイルファーストデザイン、パフォーマンス最適化、オフラインファーストアーキテクチャ、セキュリティ、テスト、アクセシビリティ、デプロイ、アナリティクス
  • mobile-debugging.md - デバッグツール、パフォーマンスプロファイリング、クラッシュ分析、ネットワークデバッグ、プラットフォーム固有のデバッグ
  • mobile-mindset.md - 思考パターン、意思決定フレームワーク、プラットフォーム固有の思考、一般的な落とし穴、デバッグ戦略

主要なベストプラクティス (2024-2025)

パフォーマンス目標:

  • アプリ起動: 2秒未満(3秒以上で70%が放棄)
  • メモリ使用量: 通常の画面で100MB未満
  • ネットワークリクエスト: 積極的にバッチ処理とキャッシュ
  • バッテリーへの影響: Doze Modeとバックグラウンド制限を尊重
  • アニメーション: 60 FPS(1フレームあたり16.67ms)

アーキテクチャ:

  • 小~中規模アプリにはMVVM(クリーンな分離、テスト可能)
  • 大規模エンタープライズアプリにはMVVM + クリーンアーキテクチャ
  • ハイブリッド同期(プッシュ + プル)によるオフラインファースト
  • 状態管理: Zustand (React Native)、Riverpod 3 (Flutter)、StateFlow (Android)

セキュリティ (OWASP Mobile Top 10):

  • 認証にはOAuth 2.0 + JWT + 生体認証
  • 機密データにはKeychain (iOS) / KeyStore (Android)
  • ネットワークセキュリティには証明書ピンニング
  • 認証情報やAPIキーをハードコードしない
  • 適切なセッション管理を実装

テスト戦略:

  • 単体テスト: ビジネスロジックの70%以上のカバレッジ
  • 結合テスト: 重要なユーザーフロー
  • E2Eテスト: Detox (React Native)、Appium (クロスプラットフォーム)、XCUITest (iOS)、Espresso (Android)
  • リリース前の実機テストは必須

デプロイ:

  • クロスプラットフォームの自動化にはFastlane
  • 段階的ロールアウト: 内部 → クローズド → オープン → 本番
  • 必須: iOS 17 SDK (2024)、Android 15 API 35 (2025年8月)
  • CI/CDにより開発時間を20%削減

クイック意思決定マトリックス

ニーズ 選択
JavaScriptチーム、Webコード共有 React Native
パフォーマンスが重要、複雑なアニメーション Flutter
最大限のiOSパフォーマンス、最新機能 Swift/SwiftUIネイティブ
最大限のAndroidパフォーマンス、Material 3 Kotlin/Composeネイティブ
迅速なプロトタイピング React Native + Expo
デスクトップ + モバイル Flutter
JavaScriptスキルを持つエンタープライズ React Native
リソースが限られたスタートアップ Flutter または React Native
ゲームまたは重いグラフィックス ネイティブ (Swift/Kotlin) または Unity

フレームワーククイック比較 (2024-2025)

基準 React Native Flutter Swift/SwiftUI Kotlin/Compose
スター数 121K 170K N/A N/A
採用率 35% 46% iOSのみ Androidのみ
パフォーマンス ネイティブの80-90% ネイティブの85-95% ネイティブの100% ネイティブの100%
開発速度 速い (ホットリロード) 非常に速い (ホットリロード) 速い (Xcode Previews) 速い (Live Edit)
学習曲線 簡単 (JavaScript) 中程度 (Dart) 中程度 (Swift) 中程度 (Kotlin)
UIパラダイム コンポーネントベース ウィジェットベース 宣言型 宣言型
コミュニティ 巨大 (npm) 成長中 Appleエコシステム Androidエコシステム
最適用途 JSチーム、Web共有 パフォーマンス、アニメーション iOS専用アプリ Android専用アプリ

実装チェックリスト

プロジェクトセットアップ:

  • フレームワークの選択 → プロジェクトの初期化 → 開発環境の設定 → バージョン管理の設定 → CI/CDの設定 → チーム標準の確立

アーキテクチャ:

  • パターンの選択 (MVVM/Clean) → フォルダーのセットアップ → 状態管理

(原文がここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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:

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。