skills.rest
cyhinverse
cyhinverseCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Guide mobile design decisions for iOS, Android, React Native, and Flutter.

Updated Mar 3, 2025
Search Tags:#accessibility#ios#android#design-thinking#ux-patterns#mobile-design#mobile-ux
One-click install
npx skills add https://github.com/cyhinverse/YiBu --skill mobile-design-cyhinverse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/cyhinverse/YiBu/tree/main/.agents/skills/mobile-design
Command: npx skills add https://github.com/cyhinverse/YiBu --skill mobile-design-cyhinverse

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mobile teams struggle to build consistent, accessible, high-performance mobile experiences across iOS and Android. This guide provides thinking patterns and platform-aware decisions to avoid common AI or blanket-blind patterns.

Core Features & Use Cases

  • Platform-aware design thinking for iOS vs Android, plus cross-platform React Native/Flutter workflows.
  • Anti-pattern awareness, performance and accessibility best practices.
  • Use during early planning and ongoing development to align teams and outcomes.

Quick Start

Apply a context-driven mobile design process: perform context scan, challenge defaults, decompose screens, assess touch targets, and decide navigation, typography, and color guidelines.

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 design thinking for consistent iOS and Android interfaces?▼

Mobile design thinking provides a structured, platform-aware framework to align iOS and Android interfaces. It enforces requirements like thumb-zone placement, dark mode support, and performance budgets to resolve inconsistent mobile design decisions across teams.

What is the best way to plan cross-platform mobile UX for React Native and Flutter?▼

Cross-platform mobile UX planning for React Native and Flutter requires challenging defaults and decomposing screens early. This framework guides platform-aware decisions for navigation, typography, and color to ensure high-performance, accessible mobile experiences.

How do I avoid mobile design anti-patterns when building accessible apps?▼

Avoiding mobile design anti-patterns involves applying an anti-pattern awareness check during early planning. The framework enforces accessibility best practices, touch target assessments, and performance budgets to prevent common blanket-blind design mistakes.

Does this mobile design framework support both dark mode and thumb-zone placement?▼

Yes, the mobile design framework explicitly enforces both dark mode support and thumb-zone placement. It assesses touch targets and establishes color guidelines to ensure accessible, high-performance mobile interfaces across iOS and Android platforms.

When do I need a structured mobile design process for my app development?▼

A structured mobile design process is needed when teams struggle with inconsistent, accessible, or high-performance mobile experiences. Use it during early planning and ongoing development to perform context scans, challenge defaults, and align mobile outcomes.

Related Skills

Explore More Design & Creative Skills→
amaledtuningamaledtuning

stitch-ui-design

Craft Stitch prompts for web and mobile UI design workflows.

Community
Intermediate
gensart-projsgensart-projs

mobile-design

Guide mobile UI/UX planning and critique for iOS and Android projects.

Community
Advanced
BigdropsBigdrops
1

tailwind-capacitor

Integrate Tailwind CSS into Capacitor mobile apps for mobile-first design.

Community
Intermediate
efekrbasefekrbas
41

material-design

Transform generic interfaces into Material Design layouts with consistent elevation and motion.

Community
Basic