mobile-design

Guide mobile-first design with iOS and Android platform conventions.

Updated Mar 7, 2026
One-click install
npx skills add https://github.com/devon87warren-afk/eboss-monorepo --skill mobile-design-devon87warren-afk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/devon87warren-afk/eboss-monorepo/tree/main/apps/manager/.agent/skills/mobile-design
Command: npx skills add https://github.com/devon87warren-afk/eboss-monorepo --skill mobile-design-devon87warren-afk

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 apps are intuitive, performant, and adhere to platform conventions across iOS and Android. It guides against common AI defaults and promotes thoughtful, user-centric mobile experiences.

Core Features & Use Cases

  • Platform-Specific Design: Tailors design decisions for iOS (HIG) and Android (Material Design).
  • Performance Optimization: Focuses on smooth scrolling, efficient animations, and battery-conscious choices.
  • Touch Interaction: Emphasizes large touch targets, thumb zone placement, and gesture discoverability.
  • Use Case: When starting a new React Native app, use this Skill to define the navigation structure, choose state management, and ensure all UI elements meet platform accessibility and performance standards before development begins.

Quick Start

Use the mobile-design skill to audit the current project's adherence to touch interaction principles and platform conventions.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
What is mobile-first design and how does it differ for iOS and Android?

Mobile-first design prioritizes touch interactions and small screens before scaling up. It requires strict adherence to iOS Human Interface Guidelines and Android Material Design conventions to ensure native-feeling user experiences.

How do I optimize mobile UI performance for smooth scrolling and animations?

Optimize mobile UI performance by choosing battery-conscious animations, minimizing render passes, and following structured design best practices to eliminate jank during scrolling and transitions.

Can I use this to audit an existing React Native or Flutter app for UI issues?

Yes, you can audit existing React Native and Flutter apps to evaluate touch target sizes, thumb zone placement, and gesture discoverability against established mobile design principles.

What's the best way to structure navigation for a new mobile app?

The best way to structure mobile navigation is by defining the hierarchy early and enforcing platform-specific conventions, ensuring intuitive user flows before development begins.

Why do AI-generated mobile UIs often feel non-native?

AI-generated mobile UIs feel non-native because they often rely on generic defaults. This skill enforces a structured design thinking process to counter those anti-patterns with platform-specific patterns.

Does mobile design require different touch interaction patterns than web?

Mobile design requires specific touch interaction patterns, emphasizing large touch targets and thumb zone placement, which are critical for usability and not typically addressed in web design.