mobile-design

Guide mobile-first design with iOS HIG and Android Material Design conventions.

41|12|Updated Jan 16, 2026
One-click install
npx skills add https://github.com/nguyenphp/antigravity-marketing --skill mobile-design-nguyenphp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/nguyenphp/antigravity-marketing/tree/main/templates/.agent/skills/mobile-design
Command: npx skills add https://github.com/nguyenphp/antigravity-marketing --skill mobile-design-nguyenphp

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the complexities of mobile-first design, ensuring apps are intuitive, performant, and adhere to platform-specific conventions for iOS and Android. It guides decision-making to avoid common pitfalls.

Core Features & Use Cases

  • Platform-Specific Design: Tailors design principles for iOS (HIG) and Android (Material Design).
  • Performance Optimization: Focuses on efficient rendering, touch interaction, and battery consciousness.
  • Decision Frameworks: Provides checklists and decision trees for choosing frameworks, navigation, and state management.
  • Use Case: When starting a new React Native app, use this Skill to ensure the design adheres to both iOS and Android best practices from the outset, covering navigation, touch targets, and performance.

Quick Start

Use the mobile-design skill to generate a design checklist for a new React Native application targeting both iOS and Android.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
What are the key mobile design conventions for iOS and Android?

Mobile design performance optimization in React Native and Flutter focuses on efficient rendering and battery consciousness. Decision frameworks guide state management and touch interactions to prevent UI jank and ensure smooth, performant user experiences.

How do I create a design checklist for a new React Native app?

Mobile design navigation patterns differ based on platform-specific conventions, utilizing decision trees to select appropriate route management. This framework ensures intuitive user flow by adhering to iOS and Android structural standards while maintaining performance.

Does mobile UX design affect battery life and rendering performance?

Mobile UX design directly impacts battery consciousness and efficient rendering. By applying mobile-first performance optimization techniques, you reduce unnecessary computational overhead and ensure the application remains responsive without draining device resources.

What is touch interaction psychology in mobile app design?

Touch interaction psychology in mobile app design defines how users physically engage with interfaces, dictating touch target sizing and gesture responsiveness. It provides decision frameworks to ensure user-friendly, accessible, and intuitive touch interactions.