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.
What this skill does
# 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
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.