mobile-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the complexities of mobile-first design, ensuring applications are intuitive, performant, and adhere to platform-specific conventions for iOS and Android.

Core Features & Use Cases

  • Platform-Specific Design: Guides design decisions for iOS (HIG) and Android (Material Design).
  • Performance Optimization: Provides patterns to avoid common performance pitfalls in React Native and Flutter.
  • User Experience: Focuses on touch interaction, accessibility, and cognitive load reduction.
  • Use Case: When designing a new mobile app feature, use this Skill to ensure touch targets are appropriately sized, navigation is discoverable, and performance is optimized for mobile constraints.

Quick Start

Use the mobile-design skill to generate a design checklist for a new React Native app feature.

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 UI that follows iOS and Android platform conventions?

To design mobile UI following platform conventions, apply iOS Human Interface Guidelines and Android Material Design patterns to ensure native navigation, touch interactions, and visual hierarchy. This provides specific platform-specific guidance to align your cross-platform app with user expectations.

What are the best practices for mobile touch interaction and accessibility?

Mobile touch interaction and accessibility best practices involve sizing touch targets appropriately, ensuring navigation discoverability, and reducing cognitive load. Optimizing these elements creates intuitive user-centric applications that accommodate diverse user needs and interaction styles.

How do I optimize mobile app performance in React Native and Flutter?

To optimize mobile app performance in React Native and Flutter, implement specific architectural patterns to avoid common rendering and state management bottlenecks. This provides targeted performance optimization strategies addressing cross-platform framework constraints directly.

Does this mobile design approach support both React Native and Flutter frameworks?

Yes, this mobile design approach supports both React Native and Flutter frameworks. It provides comprehensive performance optimization strategies and mobile-first design principles applicable to cross-platform development, ensuring intuitive experiences across both environments.

Why does my mobile app feel slow on mobile devices?

Your mobile app may feel slow due to common cross-platform performance pitfalls like inefficient rendering loops or oversized touch targets. Addressing these mobile constraints through specific optimization patterns improves overall responsiveness and user experience quality.