What does the Mobile App UX skill do?

It provides Claude with a specialized knowledge base for mobile interface design, including touch target sizes, navigation patterns, and mobile-specific code snippets.

What is 'Thumb Zone' design?

Thumb Zone design is a layout strategy that places primary actions within the natural reach of a user's thumb when holding a phone one-handed.

Can I use this for React Native or Flutter?

Yes, while some snippets are in CSS/React, the core UX principles and interaction patterns provided are applicable to any mobile development framework.

How does this skill improve mobile accessibility?

It enforces standards for color contrast, screen reader support, text scaling, and touch area spacing to ensure apps are usable by everyone.

Mobile App UX Best Practices

Name: Mobile App UX Best Practices
Author: iButters

byiButters

•

Mobile Development

Implements touch-friendly smartphone interfaces and mobile-first navigation patterns based on industry-standard UX principles.

The mobile-app-ux skill empowers Claude to design and implement superior smartphone interfaces by applying specialized mobile UX/UI guidelines. It provides precise specifications for touch targets, thumb-zone optimization, and gesture handling to ensure applications are intuitive on small screens. Whether you are building with React, plain CSS, or native frameworks, this skill assists in creating accessible, high-performance mobile experiences through standardized patterns for bottom sheets, swipeable cards, and progressive disclosure.

Key Features

01Mobile-specific navigation patterns including bottom bars and sheets

021 GitHub stars

03Thumb-zone layout design for improved one-handed ergonomics

04Gesture-driven interaction implementation and haptic feedback guidance

05Performance and accessibility checklists specifically for mobile environments

06Touch target optimization with standardized 44-48px minimum sizing

Use Cases

01Implementing fluid gestures like swipe-to-action and pull-to-refresh

02Building accessible and touch-friendly form components for mobile apps

03Refactoring a desktop-centric web interface into a mobile-first responsive design

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ibutters/claudecodeplugins mobile-app-ux

For use in Claude.ai and ChatGPT

Download Skill