skills.rest
nishchaydev
nishchaydevCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Enforce mobile-first design and engineering guardrails for iOS and Android apps.

Updated Feb 2, 2026
Search Tags:#performance#accessibility#navigation#flutter#react native#mobile ux#touch targets
One-click install
npx skills add https://github.com/nishchaydev/emitra --skill mobile-design-nishchaydev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/nishchaydev/emitra/tree/main/.agent/skills/mobile-design
Command: npx skills add https://github.com/nishchaydev/emitra --skill mobile-design-nishchaydev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps you avoid common AI and engineering mistakes in mobile apps by enforcing context-based mobile design decisions across touch, performance, navigation, typography, colors, testing, and mobile backend constraints.

Core Features & Use Cases

  • Mobile-first design thinking: Forces platform-aware decisions so you don’t treat mobile as “a small desktop.”
  • Touch and UX correctness: Guides thumb-zone placement, touch target sizing, gesture affordances, haptics, and accessibility considerations.
  • Performance guardrails: Prevents jank and crashes by steering lists, animations, memory cleanup, and rendering patterns toward mobile-safe defaults.
  • Navigation and deep linking: Chooses tab/stack/drawer approaches correctly and supports back handling and deep-link navigation from day one.
  • Mobile-specific UI systems: Covers typography scaling, OLED/dark mode color strategies, contrast, and platform conventions.
  • Testing and debugging strategy: Recommends a mobile testing pyramid, device-focused validation, and effective mobile debugging workflows.
  • Mobile backend patterns: Ensures offline behavior, push notifications, token storage guidance, app versioning, and mobile-optimized API design.

Quick Start

Use the mobile-design skill to design a React Native or Flutter screen that meets iOS/Android conventions for touch targets, navigation behavior, performance, and accessibility.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I design mobile UX that feels native in React Native or Flutter?▼

Mobile UX performance guardrails prevent jank by steering list rendering, animations, and memory cleanup toward mobile-safe defaults. Apply scroll and list performance patterns to maintain smooth 60fps interactions and avoid crashes.

What is the minimum touch target size for iOS and Android accessibility?▼

The minimum touch target size for iOS and Android accessibility is 44–48px. Enforcing these dimensions ensures thumb-zone reachability and compliance with platform-native accessibility scaling requirements for all interactive elements.

How do I handle offline behavior and mobile API design for apps?▼

Handle offline behavior by implementing resilient offline-capable experiences, secure token storage, and mobile-optimized API design. Plan mobile backend patterns that support push notifications and app versioning to ensure continuous functionality.

Does this mobile design approach work for both React Native and Flutter?▼

Yes, this mobile design approach works for React Native, Flutter, and native mobile projects. It applies platform-sensitive UI and architecture decisions, validating screen-level behavior and enforcing constraints like OLED-aware dark mode and deep-link rules across environments.

Why does my mobile app navigation feel different from native iOS and Android conventions?▼

Mobile app navigation feels non-native when tab, stack, or drawer approaches are chosen incorrectly. Fix this by applying platform-native navigation rules, supporting back handling, and implementing deep-link navigation from the start of your architecture.

Related Skills

Explore More Design & Creative Skills→
rafaelminatto1rafaelminatto1

mobile-design

Apply mobile design thinking protocols for iOS and Android UX decisions.

Community
Advanced
raphaelmansraphaelmans

pwa-development

Integrate service workers, caching strategies, and Workbox for offline-capable PWAs.

Community
Advanced
apakouapakou

FE_PushNotificationIntegration

Integrate web push notifications in React apps using the Push API.

Community
Basic
ChiejiChieji

adapt

Creates context-aware adaptation plans for responsive web and app interfaces.

Community
Intermediate