skills.rest
BrunoSantanaDeveloper
BrunoSantanaDeveloperCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-design

Apply mobile design guidelines to iOS and Android apps across React Native, Flutter, and native codebases.

Updated Jan 27, 2026
Search Tags:#performance#mobile#ux#dark-mode#touch-targets#design-thinking#thumb-zone
One-click install
npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill mobile-design-brunosantanadeveloper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit/tree/main/skills/mobile-design
Command: npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill mobile-design-brunosantanadeveloper

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mobile design guidance consolidates critical UX patterns and checks to help teams build iOS and Android apps with platform-appropriate UX, accessibility, and performance.

Core Features & Use Cases

  • Design-thinking framework for mobile apps across React Native, Flutter, and native platforms.
  • Thumb-zone optimization, touch-target sizing, dark mode, typography, color systems, and navigation patterns.
  • Real-world scenarios: apply guidelines to a fintech app to improve usability on small screens and varied lighting.

Quick Start

Start by applying platform-aware mobile design thinking to your React Native, Flutter, or native apps.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I apply mobile UX guidelines for touch targets and thumb-zone optimization in React Native?▼

To apply mobile UX guidelines in React Native, use structured decision trees that enforce thumb-zone optimization and minimum touch-target sizing. This ensures interactive elements remain accessible and usable on small screens across different device sizes.

What's the best way to implement OLED-friendly dark mode color systems for iOS and Android apps?▼

The best way to implement OLED-friendly dark mode is by applying platform-specific color systems that enforce true blacks and appropriate contrast ratios. This approach optimizes battery performance on OLED displays while maintaining visual accessibility.

Does this mobile design framework work with both Flutter and native codebases?▼

Yes, this mobile design framework works with Flutter, React Native, and native iOS and Android codebases. It applies platform-aware design thinking to guide navigation patterns, typography, and accessibility checks across all supported environments.

How do I ensure dynamic type support and accessibility in mobile app design?▼

To ensure dynamic type support and accessibility in mobile app design, apply structured checklists that validate typography scaling, color contrast, and touch-target sizing. This enforces platform-consistent patterns that accommodate users with varying visual needs.

Why does my fintech app have poor usability on small screens and in varied lighting conditions?▼

Fintech apps suffer poor usability on small screens when platform-specific UX guidelines for thumb-zone optimization and OLED-friendly colors are not applied. Structured design-thinking checklists address these issues by enforcing accessible touch targets and high-contrast color systems.

What platform-consistent navigation patterns should I use for iOS and Android apps?▼

Platform-consistent navigation patterns for iOS and Android apps are determined using structured decision trees that evaluate platform-specific UX guidelines. This process enforces native navigation paradigms, ensuring users experience familiar interaction models on each operating system.

Related Skills

Explore More Design & Creative Skills→
JesusFigueroa25JesusFigueroa25

mobile-developer

Guide cross-platform mobile development with React Native, Flutter, and native iOS/Android.

Community
Advanced
hkcm91hkcm91

optimizing-mobile-experience

Implement responsive design and touch gestures for mobile web applications.

Community
Intermediate
xiaobuliukunxiaobuliukun

ui-ux-pro-max

Generate design systems with color, typography, and accessibility guidelines across web and mobile stacks.

Community
Advanced
Ab-aswiniAb-aswini
2

mobile-design

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

Community
Advanced