skills.rest
HamzaAburaneh
HamzaAburanehCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Provide mobile-first design guidance for touch, gesture, and navigation patterns.

Updated Jun 3, 2024
Search Tags:#accessibility#design-system#mobile-ui#ux-patterns#mobile-design#touch-interactions#gesture-design
One-click install
npx skills add https://github.com/HamzaAburaneh/inventory-final --skill mobile-design-hamzaaburaneh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/HamzaAburaneh/inventory-final/tree/main/.github/skills/mobile-design
Command: npx skills add https://github.com/HamzaAburaneh/inventory-final --skill mobile-design-hamzaaburaneh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Mobile Design Skill addresses the challenge of delivering consistent, usable, and accessible mobile experiences across devices and platforms.

Core Features & Use Cases

  • Mobile-first guidance: Principles, patterns, and best practices for designing and building mobile interfaces.
  • Gesture and touch patterns: Clear guidance for taps, swipes, long-press, pinch, and multi-touch interactions.
  • Navigation & accessibility: Consistent mobile navigation strategies with accessibility considerations.
  • Use Case: When building a mobile app, apply these guidelines to align design decisions with platform conventions and performance targets.

Quick Start

Review the core concepts in the SKILL.md, then consult EXAMPLES.md for practical demonstrations and ready-to-use patterns. Start applying these patterns to your mobile UI projects by mapping them to your components and interactions.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
What is touch-first mobile UX design and when do I need it?▼

Touch-first mobile UX design prioritizes reliable touch interactions, navigation patterns, and gesture design for mobile interfaces. You need it when building mobile-first web apps, native iOS or Android apps, PWAs, and cross-platform projects requiring accessible user experiences.

How do I design accessible mobile gestures for iOS and Android apps?▼

Design accessible mobile gestures by applying consistent UX patterns for taps, swipes, long-press, pinch, and multi-touch interactions. Aligning these touch interactions with platform conventions ensures reliable and accessible mobile user experiences across native apps.

Can I use these mobile UI patterns for Progressive Web Apps and cross-platform projects?▼

Yes, these mobile UI patterns apply to Progressive Web Apps and cross-platform projects requiring consistent touch interactions. The guidelines help align design decisions with platform conventions and performance targets across various mobile devices.

What's the best way to start applying mobile design patterns to my UI components?▼

Start by reviewing the core mobile design concepts in SKILL.md, then consult EXAMPLES.md for practical demonstrations and ready-to-use patterns. Map these touch interaction and navigation patterns directly to your existing UI components and interactions.

Why does my mobile navigation strategy feel inconsistent across different devices?▼

Mobile navigation feels inconsistent when touch interactions and accessibility considerations are not aligned with platform conventions. Applying standardized mobile UX patterns ensures consistent, usable, and accessible mobile experiences across different devices and platforms.

Related Skills

Explore More Design & Creative Skills→
gzyxdsgzyxds

ui-ux-pro-max

Standardizes UI/UX design quality across web and mobile projects with accessibility audits and responsive behavior.

Community
Advanced
nnkiennnnkienn
1

mobile-design

Teach mobile design and development best practices for iOS and Android platforms.

Community
Advanced
hulusi-tunchulusi-tunc
3

gesture-patterns

Define gesture vocabularies for touch and pointer device interactions.

Community
Intermediate
vonomarapvonomarap

ui-ux-pro-max

Generate UI/UX design systems with palettes, typography, and stack-specific guidelines.

Community
Advanced