mobile-design

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

1|Updated Jun 30, 2026

Search Tags:#performance #mobile #react-native #flutter #ux #design-system

Ready to run

npx skills add https://github.com/Itinerant18/Urban-assist --skill mobile-design-itinerant18

💬 Prompt for ChatGPT / Claude Chat▼

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.