Advanced Mobile Design

A Claude Code skill for designing and building mobile-first experiences with touch-first interaction patterns, platform-specific conventions, and performance optimization. Follows the core principle that mobile is not a small desktop — it demands its own design thinking.

When to Use This Skill

Choose Advanced Mobile Design when:

• You're building a mobile-first or responsive web application
• You need to implement touch gestures, bottom sheets, or mobile navigation patterns
• You want to optimize performance for mobile devices and slow networks
• You need to design for both iOS and Android platform conventions
• You're building a Progressive Web App (PWA)

Consider alternatives when:

• You need native iOS/Android development (use platform-specific tools)
• You want desktop-first design (use a frontend design skill)
• You need general responsive CSS (use a CSS framework skill)

Quick Start

Copy
# Install the skill
claude install advanced-mobile-design

# Design mobile navigation
claude "Design a mobile navigation pattern for an e-commerce app with 5 main sections. Include bottom tab bar and gesture navigation"

# Optimize for mobile performance
claude "My React app takes 8 seconds to load on 3G mobile. Help me optimize to under 3 seconds"

# Build a mobile-first component
claude "Build a mobile-first bottom sheet component with drag-to-dismiss, snap points, and keyboard avoidance"

Core Concepts

Mobile Design Principles

Principle	Desktop Approach	Mobile Approach
Navigation	Top navbar, sidebar	Bottom tab bar, hamburger, gestures
Interaction	Hover, click	Tap, swipe, long-press, pinch
Content	Multi-column, dense	Single column, progressive disclosure
Input	Keyboard-first	Touch-first, minimal typing
Performance	Fast connection assumed	Slow 3G as baseline
Layout	Fixed widths	Fluid, edge-to-edge

Touch Target Guidelines

Minimum Sizes:
  Apple HIG: 44×44 points
  Material Design: 48×48 dp
  Web (WCAG): 44×44 CSS pixels

Spacing:
  Between tap targets: minimum 8px gap
  Edge padding: minimum 16px from screen edges
  Bottom action area: keep within thumb reach zone

Thumb Zone (right-handed):
  ┌──────────────────┐
  │   Hard to reach   │
  │                    │
  │   Easy to reach    │
  │                    │
  │ ■■■ Natural ■■■■  │
  └──────────────────┘
  Primary actions → bottom center/right

Mobile Navigation Patterns

Pattern	When to Use	Implementation
Bottom Tab Bar	3-5 main sections	Fixed bottom nav, 48px height
Hamburger Menu	5+ sections, secondary nav	Slide-out drawer, overlay
Bottom Sheet	Contextual actions, filters	Draggable panel from bottom
Swipe Navigation	Sequential content	Horizontal swipe between views
Stack Navigation	Deep hierarchies	Push/pop with back gesture

Configuration

Parameter	Type	Default	Description
platform	string	"cross_platform"	Target: ios, android, cross_platform, pwa
framework	string	"react"	Framework: react, react_native, flutter, vanilla
performance_target	string	"3g"	Network: 3g, 4g, wifi
breakpoints	object	{sm: 375, md: 768}	Responsive breakpoints
accessibility	boolean	true	Include mobile a11y patterns

Best Practices

1. Design for the thumb zone — Place primary actions within natural thumb reach (bottom third of screen). Navigation bars belong at the bottom on mobile, not the top. Destructive actions should be in hard-to-reach areas to prevent accidental taps.

2. Optimize for 3G as your baseline — If your app works well on a slow connection, it'll be excellent on a fast one. Target initial load under 3 seconds on 3G. Use code splitting, lazy loading, and skeleton screens.

3. Use native platform conventions — iOS users expect swipe-to-go-back, bottom tab bars, and action sheets. Android users expect the back button, floating action buttons, and bottom navigation. Don't fight platform conventions.

4. Minimize text input — Mobile typing is slow and error-prone. Use dropdowns, toggles, and selection lists instead of text fields wherever possible. When text input is necessary, use the correct input type (email, tel, number) to show the appropriate keyboard.

5. Test on real devices, not just emulators — Browser DevTools mobile mode doesn't accurately simulate touch behavior, scroll performance, or keyboard interactions. Test on at least one real iOS and one real Android device.

Common Issues

Touch targets too small — Ensure all interactive elements are at least 44×44 CSS pixels. Add padding to small elements to increase the tap area without changing visual size. Use min-height and min-width on buttons and links.

Viewport not scaling correctly — Make sure you have <meta name="viewport" content="width=device-width, initial-scale=1"> in your HTML. Without this, mobile browsers render at desktop width and zoom out, making everything tiny.

Keyboard pushes content off screen — On iOS, the virtual keyboard resizes the viewport. Use visualViewport API to detect keyboard height, and scroll input fields into view. Avoid fixed-position elements at the bottom that overlap the keyboard.