skills.rest
manutej
manutejCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Provide mobile UX patterns for touch interactions, navigation, and accessibility.

61|15|Updated Oct 18, 2025
Search Tags:#accessibility#patterns#navigation#ux#touch#mobile-design
One-click install
npx skills add https://github.com/manutej/luxor-claude-marketplace --skill mobile-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/manutej/luxor-claude-marketplace/tree/main/plugins/luxor-frontend-essentials/skills/mobile-design
Command: npx skills add https://github.com/manutej/luxor-claude-marketplace --skill mobile-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides mobile-first UX patterns, touch interactions, and platform-consistent navigation for mobile apps.

Core Features & Use Cases

  • Mobile-First Principles: Prioritize essential content and performance.
  • Touch & Gestures: Tap, swipe, pinch, and long-press interactions.
  • Navigation Patterns: Bottom bars, drawers, and sheets.
  • Accessibility: Mobile accessibility best practices.

Quick Start

Outline a mobile navigation structure for a new app with bottom tabs and a settings drawer.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I design touch interactions and gestures for mobile apps?▼

Touch interactions like tap, swipe, pinch, and long-press form the foundation of mobile UX. This Skill provides patterns for implementing these gestures with proper feedback, ensuring they're discoverable and accessible across native iOS/Android apps, PWAs, and hybrid frameworks.

What's the best way to structure mobile navigation for usability?▼

Mobile navigation patterns—bottom tabs, drawers, and sheets—optimize for thumb-reach and one-handed use. This Skill guides you through platform conventions and layout structures that improve discoverability while respecting safe-area constraints on different devices.

How do I ensure mobile interfaces meet accessibility standards?▼

WCAG-compliant mobile accessibility requires minimum touch targets, semantic structure, and screen-reader support. This Skill covers mobile-specific accessibility best practices that work across web apps, native apps, and PWAs to serve all users effectively.

Can I apply mobile-first design to responsive web apps and native apps?▼

Mobile-first principles apply across web, native iOS/Android, PWAs, and hybrid frameworks by prioritizing essential content and performance. This Skill provides guidance for responsive grids and viewport handling that adapts to all screen sizes and platforms.

What viewport and layout setup do mobile apps need?▼

Proper viewport handling, safe-area aware layouts, and responsive grids prevent content overflow and ensure usability across device sizes. This Skill addresses the technical setup required for layouts that respect platform conventions and perform efficiently on mobile.

Related Skills

UnicornUnicorn

ui-design-agent

Design UI patterns, components, and design systems for web and mobile applications.

Official
Advanced
Lyiu-10Lyiu-10

react-native-design

Build React Native apps with StyleSheet, React Navigation 6+, and Reanimated 3.

Community
Intermediate
tomasbassotomasbasso

frontend-design

Translates design briefs into production-grade frontend interfaces and components.

Community
Advanced
jkhowlandjkhowland

adapt

Adapt designs across screen sizes, devices, contexts, or platforms.

Community
Advanced