skills.rest
CElyousfi
CElyousfiCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Design mobile-first UX patterns and touch gestures for iOS, Android, and PWAs.

Updated Feb 3, 2026
Search Tags:#design#accessibility#mobile-first#ux-patterns#mobile-design#touch-interactions#gesture-design
One-click install
npx skills add https://github.com/CElyousfi/PalntsScanner --skill mobile-design-celyousfi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/CElyousfi/PalntsScanner/tree/main/.windsurf/skills/mobile-design
Command: npx skills add https://github.com/CElyousfi/PalntsScanner --skill mobile-design-celyousfi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill consolidates best practices for mobile UX design, helping teams create responsive, touch-friendly interfaces without boilerplate guidance.

Core Features & Use Cases

  • Mobile-First Design: Prioritize essential content and optimize for small screens.
  • Touch & Gesture Patterns: Guidance for taps, swipes, pinches, long presses, and drags.
  • Navigation & Accessibility: Best practices for bottom tab bars, drawers, modals, and accessibility.
  • Use Case: Design a mobile shopping app with clear hierarchy, thumb-friendly controls, and accessible navigation.

Quick Start

Quick Start: Use the mobile-design skill to outline a mobile-first layout and navigation flow for a sample app, focusing on touch targets and a bottom tab bar.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
What is mobile-first design and how do touch interactions affect UX patterns?▼

Mobile-first design prioritizes essential content for small screens, while touch interactions like taps, swipes, and pinches dictate UX patterns by requiring thumb-friendly controls and accessible navigation.

How do I design a mobile app navigation flow with bottom tab bars and touch gestures?▼

Design mobile app navigation by outlining a mobile-first layout using bottom tab bars, drawers, and modals, ensuring touch targets accommodate gestures like long presses and drags for optimal accessibility.

Does mobile UX design work the same way across iOS, Android, and PWAs?▼

Mobile UX design applies consistent touch-first patterns and performance optimization across iOS, Android, and PWAs, adapting gesture design and navigation components to each platform's specific interaction standards.

What is the best way to optimize mobile UI for accessibility and thumb-friendly controls?▼

The best way to optimize mobile UI accessibility is implementing touch-first patterns with appropriately sized touch targets, clear visual hierarchy, and thumb-friendly navigation components like bottom tab bars.

Can I use mobile UX patterns for complex gesture design like pinches and drags?▼

Yes, mobile UX patterns support complex gesture design including pinches, swipes, taps, long presses, and drags, providing structured guidance to integrate these touch interactions seamlessly into mobile interfaces.

Related Skills

Explore More Design & Creative Skills→
lachiehlachieh

adapt

Adapt designs across screen sizes, devices, and contexts with structured workflows.

Community
Advanced
bugrabilgebugrabilge
10

mobile-design

Guide mobile UI/UX design with iOS HIG and Android Material Design patterns.

Community
Intermediate
tsuji-tomonoritsuji-tomonori

a11y-testing-manual

Standardize manual accessibility testing for WCAG 2.2 AA compliance.

Community
Intermediate
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic