mobile-design

Name: mobile-design
Availability: InStock
Author: twuanminn

Guide mobile design decisions with platform-aware UX, performance, and accessibility considerations.

Updated Jan 26, 2026

Search Tags:#performance #checkpoints #ux #design-thinking #mobile-design #thumb-zone #platform-differences

Ready to run

npx skills add https://github.com/TwuanMinn/fadelab --skill mobile-design-twuanminn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/TwuanMinn/fadelab/tree/main/.agent/skills/skills/mobile-design
Command: npx skills add https://github.com/TwuanMinn/fadelab --skill mobile-design-twuanminn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Teams building mobile apps often struggle to apply generic AI design patterns across iOS, Android, and cross-platform frameworks. This Skill provides a thinking-driven framework that prioritizes thumb-friendly interactions, platform conventions, offline readiness, and performance considerations over memorized templates.

Core Features & Use Cases

Anti-pattern aware guidance that surfaces platform-specific decisions for iOS, Android, React Native, Flutter, or native development.
A curated reference set (design-thinking, touch psychology, performance, color, typography, and navigation) to inform decisions and reduce cognitive load.
A formal pre-work process (checkpoints) to align stakeholders before writing code.

Quick Start

Describe your project context and goals, then run through the Mandatory Checkpoint before writing mobile code.

Frequently Asked Questions about mobile-design

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

FAQPage Schema

How do I design mobile interfaces that are thumb-friendly across iOS and Android?▼

Designing thumb-friendly mobile interfaces requires applying platform-aware UX patterns and thumb-zone ergonomics. This framework embeds touch psychology and navigation considerations directly into your mobile design workflow for iOS, Android, React Native, and Flutter.

What is the best way to ensure mobile app performance during UI design?▼

Ensuring mobile app performance during UI design involves embedding performance checkpoints into your decision process. This approach evaluates offline readiness, target devices, and framework constraints before writing code to prevent bottlenecks.

Does this mobile design workflow support cross-platform frameworks like React Native and Flutter?▼

Yes, this mobile design workflow supports cross-platform frameworks like React Native and Flutter. It provides specialized anti-pattern guidance and platform-specific decision trees for both native and cross-platform development scenarios.

How do I align stakeholders before writing mobile code?▼

Aligning stakeholders before writing mobile code requires completing a formal pre-work checkpoint process. This framework prompts you to specify platform, framework, offline needs, and target devices to establish clear design decisions early.

When do I need to apply platform-specific typography and color systems in mobile design?▼

You need to apply platform-specific typography and color systems when building for distinct environments like iOS and Android. This framework uses structured reference files to ensure your mobile design meets platform conventions and accessibility standards.

Why does generic AI design fail for native mobile app development?▼

Generic AI design fails for native mobile app development because it ignores platform conventions and thumb-zone ergonomics. This framework replaces memorized templates with a thinking-driven workflow tailored to iOS, Android, and cross-platform environments.