mobile-app-ux

This skill provides expert design patterns and engineering constraints for creating mobile-first user experiences. It is intended for software engineers, UI/UX designers, and developers building smartphone interfaces. By providing standardized metrics for touch targets, thumb zone reachability, and navigational structures, it helps ensure that applications are accessible, responsive, and performant on mobile devices. Use this skill when designing or refactoring UI components to adhere to platform-specific mobile standards, such as those found in iOS and Android human interface guidelines.

• Detailed touch target sizing specifications, including minimum recommended dimensions for buttons, icons, list items, and form inputs.

• Navigation design patterns focusing on thumb-reach optimization, bottom navigation, and the avoidance of anti-patterns like hamburger menus for primary flows.

• Interaction design guidance for gesture handling, including swipeable cards, bottom sheets, and progressive disclosure techniques to maintain UI clarity.

• Performance checklists for mobile-specific metrics like First Contentful Paint, Time to Interactive, and 60fps animation standards.

• Accessibility support for screen readers, semantic HTML usage, and contrast ratios to ensure inclusive mobile design.

• Trigger this skill by requesting mobile UX audits, app design consultations, or guidance on touch interface implementation.

• Input requirements include target platform considerations or specific component design goals like form layouts or navigation flows.

• Expected outputs include CSS snippets for touch target scaling, React component patterns for mobile-native interactions, and critiques of current UI layouts based on mobile best practices.

• Constraints include maintaining high accessibility standards, such as 4.5:1 contrast ratios, and prioritizing content-first design over excessive UI chrome.