mobile-design

Guide mobile-first design decisions for React Native and Flutter apps.

1|Updated Jun 30, 2026
One-click install
npx skills add https://github.com/Itinerant18/Urban-assist --skill mobile-design-itinerant18
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/Itinerant18/Urban-assist/tree/main/.cursor/skills/mobile-design
Command: npx skills add https://github.com/Itinerant18/Urban-assist --skill mobile-design-itinerant18

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill prevents common AI pitfalls in mobile development by enforcing platform-specific design thinking, performance optimization, and touch-first interaction patterns for iOS and Android.

Core Features & Use Cases

  • Platform-Specific Guidance: Provides deep insights into iOS Human Interface Guidelines and Android Material Design 3.
  • Performance Optimization: Offers critical rules for React Native and Flutter, including list virtualization and animation performance.
  • Use Case: When building a cross-platform app, use this Skill to decide between React Native and Flutter, implement platform-native navigation, and ensure your touch targets meet accessibility standards.

Quick Start

Use the mobile-design skill to audit my current React Native project for touch target compliance and list performance.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I ensure my React Native app follows iOS and Android platform-specific design conventions?

To ensure platform-specific design in React Native, apply iOS Human Interface Guidelines and Android Material Design 3 rules. This framework enforces platform-native navigation patterns and touch target accessibility standards to maintain cross-platform UI consistency.

What is the best way to choose between React Native and Flutter for cross-platform app development?

Choosing between React Native and Flutter requires evaluating performance optimization rules like list virtualization and animation rendering. This framework provides technical decision-making criteria to select the appropriate stack based on performance and UX requirements.

How do I audit a mobile app for touch target compliance and list performance?

Auditing mobile app touch target compliance and list performance involves checking accessibility standards and list virtualization rules. This framework provides mandatory pre-development checklists to verify React Native and Flutter interaction patterns meet guidelines.

Why does my Flutter app experience animation performance issues on mobile?

Flutter animation performance issues often stem from violating mobile-first optimization rules. This framework identifies critical performance bottlenecks and enforces technical constraints to ensure smooth rendering and list virtualization.

Can I use mobile-first UX design principles for both iOS and Android applications?

Yes, mobile-first UX design principles apply to both iOS and Android applications. This framework provides platform-aware guidance, ensuring touch psychology and accessibility standards are met across both platforms.

What state management strategies should I use for cross-platform mobile development?

State management strategies for cross-platform mobile development depend on React Native or Flutter architecture. This framework facilitates the selection of state management and navigation patterns tailored to your chosen platform conventions.