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本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
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
$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. 下の青いボタンを押して
ck-mobile-development.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
ck-mobile-developmentフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
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の戒め:
- パフォーマンスは機能ではなく基盤である - 70%のユーザーが3秒以上ロードにかかるアプリを放棄します
- すべてのキロバイト、すべてのミリ秒が重要である - モバイルの制約は現実です
- デフォルトでオフラインファーストである - ネットワークは信頼できないため、それに合わせて設計します
- 開発環境よりもユーザーコンテキストを重視する - 現実世界の利用シナリオを考えます
- プラットフォームロックインなしにプラットフォームを意識する - プラットフォームの慣習を尊重します
- 完璧にするのではなく反復する - リリース、測定、改善のサイクルが生き残りにつながります
- 設計段階からセキュリティとアクセシビリティを考慮する - 後回しにしません
- 実機でテストする - シミュレーターはパフォーマンスについて嘘をつきます
- アーキテクチャは複雑さに応じて拡張する - シンプルなアプリを過剰に設計しません
- 継続的な学習が生き残りにつながる - モバイルの状況は急速に進化します
思考パターンと意思決定フレームワークについては、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:
- 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 eachmobile-ios.md- Swift 6, SwiftUI, iOS architecture patterns, HIG, App Store requirements, platform capabilitiesmobile-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, analyticsmobile-debugging.md- Debugging tools, performance profiling, crash analysis, network debugging, platform-specific debuggingmobile-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:
- Detox E2E: https://wix.github.io/Detox/
- Appium: https://appium.io/
- Fastlane: https://fastlane.tools/
- Firebase: https://firebase.google.com/
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
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (9,623 bytes)
- 📎 references/mobile-android.md (14,033 bytes)
- 📎 references/mobile-best-practices.md (12,672 bytes)
- 📎 references/mobile-debugging.md (21,605 bytes)
- 📎 references/mobile-frameworks.md (13,999 bytes)
- 📎 references/mobile-ios.md (10,583 bytes)
- 📎 references/mobile-mindset.md (16,098 bytes)