Agent skill
mobile-development
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.
Install this agent skill to your Project
npx add-skill https://github.com/samhvw8/dot-claude/tree/main/skills/mobile-development
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
debugging
Systematic debugging methodology with root cause analysis. Phases: investigate, hypothesize, validate, verify. Capabilities: backward call stack tracing, multi-layer validation, verification protocols, symptom analysis, regression prevention. Actions: debug, investigate, trace, analyze, validate, verify bugs. Keywords: debugging, root cause, bug fix, stack trace, error investigation, test failure, exception handling, breakpoint, logging, reproduce, isolate, regression, call stack, symptom vs cause, hypothesis testing, validation, verification protocol. Use when: encountering bugs, analyzing test failures, tracing unexpected behavior, investigating performance issues, preventing regressions, validating fixes before completion claims.
prompt-enhancer
Prompt engineering and optimization for AI/LLMs. Capabilities: transform unclear prompts, reduce token usage, improve structure, add constraints, optimize for specific models, backward-compatible rewrites. Actions: improve, enhance, optimize, refactor, compress prompts. Keywords: prompt engineering, prompt optimization, token efficiency, LLM prompt, AI prompt, clarity, structure, system prompt, user prompt, few-shot, chain-of-thought, instruction tuning, prompt compression, token reduction, prompt rewrite, semantic preservation. Use when: improving unclear prompts, reducing token consumption, optimizing LLM outputs, restructuring verbose requests, creating system prompts, enhancing prompt clarity.
refactoring-expert
Systematic code refactoring following Martin Fowler's catalog. Methodologies: characterization tests, Red-Green-Refactor, incremental transformation. Capabilities: SOLID compliance, DRY cleanup, code smell detection, complexity reduction, legacy modernization, design patterns, functional programming patterns. Actions: refactor, extract, inline, rename, move, simplify code. Keywords: refactor, SOLID, DRY, code smell, complexity, extract method, inline, rename, move, clean code, technical debt, legacy code, design pattern, characterization test, Red-Green-Refactor, functional programming, higher-order function, immutability, pure function, composition, currying, side effects. Use when: improving code quality, reducing technical debt, applying SOLID principles, fixing DRY violations, removing code smells, modernizing legacy code, applying design patterns.
infra-engineer
Comprehensive infrastructure engineering covering DevOps, cloud platforms, FinOps, and DevSecOps. Platforms: AWS (EC2, Lambda, S3, ECS, EKS, RDS, CloudFormation), Azure basics, Cloudflare (Workers, R2, D1, Pages), GCP (GKE, Cloud Run, Cloud Storage), Docker, Kubernetes. Capabilities: CI/CD pipelines (GitHub Actions, GitLab CI, Jenkins), GitOps, infrastructure as code (Terraform, CloudFormation), container orchestration, cost optimization, security scanning, vulnerability management, secrets management, compliance (SOC2, HIPAA). Actions: deploy, configure, manage, scale, monitor, secure, optimize cloud infrastructure. Keywords: AWS, EC2, Lambda, S3, ECS, EKS, RDS, CloudFormation, Azure, Kubernetes, k8s, Docker, Terraform, CI/CD, GitHub Actions, GitLab CI, Jenkins, ArgoCD, Flux, cost optimization, FinOps, reserved instances, spot instances, security scanning, SAST, DAST, vulnerability management, secrets management, Vault, compliance, monitoring, observability. Use when: deploying to AWS/Azure/GCP/Cloudflare, setting up CI/CD pipelines, implementing GitOps workflows, managing Kubernetes clusters, optimizing cloud costs, implementing security best practices, managing infrastructure as code, container orchestration, compliance requirements, cost analysis and optimization.
aesthetic
Visual design intelligence and UI aesthetics. Integrates: chrome-devtools, ai-multimodal, media-processing. Capabilities: design analysis, visual hierarchy, color theory, typography, micro-interactions, animation, design systems, accessibility. Actions: analyze, design, create, capture, evaluate, implement UI aesthetics. Keywords: Dribbble, Behance, Mobbin, design inspiration, visual hierarchy, color palette, typography, spacing, animation, micro-interaction, design system, style guide, accessibility, WCAG, contrast ratio, golden ratio, whitespace, visual rhythm. Use when: building beautiful UIs, analyzing design inspiration, implementing visual hierarchy, adding animations/micro-interactions, creating design systems, evaluating aesthetic quality, capturing design screenshots.
ui-ux-design
UI/UX design reference database. 50+ styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Didn't find tool you were looking for?