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.