mobile-app-design-mastery_skill

Overview

This skill delivers production-grade mobile UI design guidance adapted from Refactoring UI for Flutter and native apps. It focuses on single-screen workflows, touch-optimized spacing, platform-aware patterns, and a practical type/spacing/elevation system. Use it to create usable, native-feeling iOS and Android screens that scale from phones to tablets.

How this skill works

The skill inspects the target screen and recommends a design-first workflow: gray-scale prototyping, establishing spacing and type scales, then applying color and depth. It enforces touch targets, spacing tokens, and elevation rules and offers platform-specific adjustments (iOS vs Android). It also flags anti-patterns like undersized taps, illegible type, and unsafe edge-to-edge controls.

When to use it

• Designing a new Flutter, iOS, or Android screen from scratch
• Refining existing mobile screens for accessibility and touch comfort
• Creating component libraries or spacing/type tokens for apps
• Preparing designs for handoff to developers with clear platform rules
• Auditing mobile UI for hierarchy, depth, and interaction issues

Best practices

• Start with the primary screen and core task before adding navigation chrome
• Work in greyscale to lock hierarchy, then introduce color
• Use a consistent spacing scale (xs–2xl) and a clear type scale for readability
• Respect minimum touch sizes (44pt iOS / 48dp Android) and add comfortable padding
• Use elevation/subtle shadows per platform rather than identical effects everywhere
• Avoid relying on color alone—pair with weight, contrast, or icons

Example use cases

• Designing a mobile checkout screen with a single clear CTA and touch-friendly inputs
• Converting desktop UI into a native-feeling mobile layout with proper spacing tokens
• Creating a reusable component set for Flutter that implements type, spacing, and elevation scales
• Auditing an app for mobile anti-patterns: small text, cramped touch targets, and unsafe areas
• Designing modal, bottom sheet, or FAB interactions with platform-aware depth and feedback