mobile-design

Provide mobile app design, development, and optimization guidelines.

Updated Mar 8, 2026
One-click install
npx skills add https://github.com/roger8b/slideflow --skill mobile-design-roger8b
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/roger8b/slideflow/tree/main/.agent/skills/mobile-design
Command: npx skills add https://github.com/roger8b/slideflow --skill mobile-design-roger8b

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive mobile design thinking, user interaction best practices, and performance optimization tips specifically tailored for mobile app development.

Core Features & Use Cases

  • Design Thinking Frameworks: Mobile-first principles, interaction guidelines, and performance impact analysis.
  • Framework Decision Trees: Guidance for choosing the right development framework (React Native, Flutter, native) based on project requirements.
  • Offline Sync Strategies: Best practices for offline-first architectures, sync queues, and conflict resolution.
  • Performance Optimization: Techniques for improving mobile app performance, memory management, and battery efficiency.
  • API Optimization: Best practices for mobile backend design, network requests, and caching strategies.
  • Security Guidelines: Recommendations for secure mobile development, device attestation, and request signing.
  • Navigation Patterns: Analysis of navigation structures like tab bars, drawers, stack navigation, and modal dialogs.
  • Color System: Best practices for mobile color design, including OLED optimization, dark mode, and outdoor visibility.

Quick Start

Run the 'mobile_audit.py' script to perform a mobile UX and touch audit on your app project directory.

Frequently Asked Questions about mobile-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between React Native, Flutter, and native for mobile app development?

Framework decision trees guide mobile app development selection by comparing React Native, Flutter, and native options against project requirements like performance, offline sync capabilities, and state management complexity.

What are the best practices for offline sync and conflict resolution in mobile apps?

Offline sync best practices implement offline-first architectures using sync queues and conflict resolution strategies to manage data consistency when network connectivity is intermittent or unavailable.

How do I optimize mobile app performance and battery efficiency?

Mobile app performance optimization techniques target memory management and battery efficiency by analyzing performance impact and applying specific mobile-first design principles to reduce resource consumption.

Does this provide security guidelines for mobile API requests and device attestation?

Security guidelines cover secure mobile development practices including device attestation and request signing to protect API requests, backend design, and network communications against unauthorized access.

What navigation patterns should I use for mobile app interfaces?

Mobile navigation patterns analyze structures like tab bars, drawers, stack navigation, and modal dialogs to determine the optimal interaction model for user interaction flows and content hierarchy.

How do I design a mobile color system for OLED screens and dark mode?

Mobile color system design addresses OLED optimization, dark mode, and outdoor visibility by applying color principles that enhance screen visibility and conserve battery life on mobile displays.