mobile-design

Q: How do I install mobile-design?

Run npx skills add https://github.com/manutej/luxor-claude-marketplace --skill mobile-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mobile-design/ (personal) or .claude/skills/mobile-design/ (project).

Q: Which AI agents can use mobile-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Q: Is mobile-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Q: Who maintains mobile-design?

It is published by manutej in manutej/luxor-claude-marketplace. It has 545 recorded installs.

by manutejMobile

Mobile UX patterns, touch interactions, gesture design, mobile-first principles, app navigation, and mobile performance

Installs: 545
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/manutej/luxor-claude-marketplace --skill mobile-design

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads mobile-design automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Mobile Design Skill

When to Use This Skill

Use this skill when working on:

Mobile-First Web Applications: Building responsive websites that prioritize mobile user experience
Native Mobile Apps: Designing iOS or Android applications with platform-specific patterns
Progressive Web Apps (PWAs): Creating app-like experiences in the browser
Hybrid Mobile Applications: Developing cross-platform apps using React Native, Flutter, or similar frameworks
Responsive Design Systems: Creating components that adapt seamlessly across devices
Touch-First Interfaces: Designing for touchscreen interactions rather than mouse/keyboard
Mobile E-commerce: Building shopping experiences optimized for small screens
Mobile Dashboards: Adapting data-heavy interfaces for mobile consumption
Gesture-Based Interfaces: Implementing swipe, pinch, and other touch gestures
Accessibility Audits: Ensuring mobile interfaces meet accessibility standards

This skill helps you create mobile experiences that feel native, perform well, and delight users on smartphones and tablets.

Core Concepts

Mobile-First Design Philosophy

Mobile-first design starts with the smallest screen and progressively enhances for larger devices:

Why Mobile-First?

Forces prioritization of essential content and features
Improves performance by default (lighter assets, simpler layouts)
Easier to scale up than scale down
Reflects actual user behavior (mobile traffic often exceeds desktop)
Ensures core functionality works on all devices

Mobile-First vs Desktop-First:

/* Mobile-First Approach (Recommended) */
/* Base styles for mobile */
.container {
  padding: 16px;
  font-size: 14px;
}

/* Tablet enhancements */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    font-size: 16px;
  }
}

/* Desktop enhancements */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Desktop-First Approach (Not Recommended) */
/* Base styles for desktop */
.container {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 16px;
}

/* Tablet overrides */
@media (max-width: 1023px) {
  .container {
    padding: 24px;
  }
}

/* Mobile overrides */
@media (max-width: 767px) {
  .container {
    padding: 16px;
    font-size: 14px;
  }
}

Touch Targets and Ergonomics

Minimum Touch Target Sizes:

Apple: 44×44 points (iOS Human Interface Guidelines)
Google: 48×48 dp (Material Design)
Microsoft: 40×40 pixels (Windows Phone)
Recommended: 48×48 pixels minimum, 56×56 pixels optimal

Touch Target Spacing:

Minimum 8px spacing between interactive elements
Optimal 12-16px spacing for frequently used controls
Edge-to-edge buttons can touch if they're different types (e.g., cancel vs confirm)

Thumb Zones:

Mobile screens have three ergonomic zones:

Easy Zone (Green): Bottom third, center - easiest to reach with thumb
Stretch Zone (Yellow): Middle area - requires slight reach
Difficult Zone (Red): Top corners - hardest to reach one-handed

Design Implications:

Place primary actions in the easy zone (bottom center)
Put destructive actions in difficult zones (top corners)
Navigation typically at top or bottom, never middle
Consider both left-handed and right-handed users

// React Native: Bottom-aligned primary action (easy zone)
<View style={styles.container}>
  <ScrollView style={styles.content}>
    {/* Main content */}
  </ScrollView>

  <View style={styles.bottomActions}>
    <TouchableOpacity style={styles.primaryButton}>
      <Text>Continue</Text>
    </TouchableOpacity>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
  bottomActions: {
    padding: 16,
    paddingBottom: 32, // Extra padding for iPhone home indicator
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
  },
  primaryButton: {
    height: 56, // Optimal touch target
    borderRadius: 28,
    backgroundColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Viewport and Screen Considerations

Common Mobile Breakpoints:

/* Extra small devices (phones, 320px - 479px) */
@media (min-width: 320px) { }

/* Small devices (large phones, 480px - 767px) */
@media (min-width: 480px) { }

/* Medium devices (tablets, 768px - 1023px) */
@media (min-width: 768px) { }

/* Large devices (small laptops, 1024px - 1279px) */
@media (min-width: 1024px) { }

/* Extra large devices (desktops, 1280px and up) */
@media (min-width: 1280px) { }

Viewport Meta Tag:

<!-- Responsive viewport (required for mobile) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">

<!-- PWA with standalone mode -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Safe Areas (iPhone X and later):

/* Account for notch and home indicator */
.header {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.footer {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Touch Interactions

Tap (Primary Interaction)

Single Tap:

Primary action on buttons, links, list items
Should provide immediate visual feedback (0-100ms delay)
Minimum size: 48×48 pixels

// React: Tap with visual feedback
import { useState } from 'react';

function TapButton({ onPress, children }) {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <button
      className={`tap-button ${isPressed ? 'pressed' : ''}`}
      onTouchStart={() => setIsPressed(true)}
      onTouchEnd={() => setIsPressed(false)}
      onTouchCancel={() => setIsPressed(false)}
      onClick={onPress}
    >
      {children}
    </button>
  );
}

// CSS
.tap-button {
  padding: 16px 24px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  min-height: 48px;
  transition: transform 0.1s, background 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.tap-button.pressed {
  transform: scale(0.96);
  background: #0051D5;
}

.tap-button:active {
  transform: scale(0.96);
}

Double Tap:

Zoom in/out (maps, images)
Like/favorite (Instagram, Twitter)
Less common, use sparingly

iOS Double-Tap Zoom Prevention:

/* Prevent double-tap zoom while allowing pinch zoom */
touch-action: manipulation;

Swipe Gestures

Horizontal Swipe:

Navigate between screens/pages
Reveal actions (swipe-to-delete, swipe-to-archive)
Dismiss cards/modals
Switch tabs

// React: Swipeable list item
import { useState } from 'react';

function SwipeableListItem({ children, onDelete, onArchive }) {
  const [touchStart, setTouchStart] = useState(null);
  const [touchEnd, setTouchEnd] = useState(null);
  const [translateX, setTranslateX] = useState(0);

  const minSwipeDistance = 50;

  const onTouchStart = (e) => {
    setTouchEnd(null);
    setTouchStart(e.targetTouches[0].clientX);
  };

  const onTouchMove = (e) => {
    setTouchEnd(e.targetTouches[0].clientX);
    const distance = touchStart - e.targetTouches[0].clientX;
    setTranslateX(-distance);
  };

  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;

    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;

    if (isLeftSwipe) {
      setTranslateX(-80); // Show actions
    } else if (isRightSwipe) {
      setTranslateX(0); // Reset
    } else {
      setTranslateX(0); // Snap back
    }
  };

  return (
    <div className="swipeable-item-container">
      <div className="swipe-actions">
        <button onClick={onArchive} className="archive-btn">Archive</button>
        <button onClick={onDelete} className="delete-btn">Delete</button>
      </div>

      <div
        className="swipeable-item"
        style={{ transform: `translateX(${translateX}px)` }}
        onTouchStart={onTouchStart}
        onTouchMove={onTouchMove}
        onTouchEnd={onTouchEnd}
      >
        {children}
      </div>
    </div>
  );
}

Vertical Swipe:

Pull to refresh (downward swipe from top)
Scroll content
Dismiss bottom sheets/modals (downward swipe)

// Pull to Refresh
function PullToRefresh({ onRefresh, children }) {
  const [pulling, setPulling] = useState(false);
  const [pullDistance, setPullDistance] = useState(0);
  const threshold = 80;

  const handleTouchStart = (e) => {
    if (window.scrollY === 0) {
      setPulling(true);
    }
  };

  const handleTouchMove = (e) => {
    if (pulling && window.scrollY === 0) {
      const distance = e.touches[0].clientY - e.touches[0].target.getBoundingClientRect().top;
      setPullDistance(Math.min(distance, threshold * 1.5));
    }
  };

  const handleTouchEnd = () => {
    if (pullDistance >= threshold) {
      onRefresh();
    }
    setPulling(false);
    setPullDistance(0);
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {pullDistance > 0 && (
        <div className="pull-indicator" style={{ height: pullDistance }}>
          {pullDistance >= threshold ? '↻ Release to refresh' : '↓ Pull to refresh'}
        </div>
      )}
      {children}
    </div>
  );
}

Pinch and Spread (Zoom)

Used for:

Image galleries
Maps
PDF viewers
Any zoomable content

// React: Pinch to Zoom
function PinchZoomImage({ src, alt }) {
  const [scale, setScale] = useState(1);
  const [lastScale, setLastScale] = useState(1);

  const handleTouchMove = (e) => {
    if (e.touches.length === 2) {
      e.preventDefault();

      const touch1 = e.touches[0];
      const touch2 = e.touches[1];

      const distance = Math.hypot(
        touch1.clientX - touch2.clientX,
        touch1.clientY - touch2.clientY
      );

      if (lastDistance) {
        const newScale = lastScale * (distance / lastDistance);
        setScale(Math.max(1, Math.min(newScale, 4))); // Limit 1x to 4x
      }

      lastDistance = distance;
    }
  };

  const handleTouchEnd = () => {
    setLastScale(scale);
    lastDistance = null;
  };

  let lastDistance = null;

  return (
    <div
      className="pinch-zoom-container"
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <img
        src={src}
        alt={alt}
        style={{
          transform: `scale(${scale})`,
          transition: lastDistance ? 'none' : 'transform 0.2s',
        }}
      />
    </div>
  );
}

Long Press

Used for:

Context menus
Item selection mode
Drag-and-drop initiation
Additional options

// React: Long Press Handler
function useLongPress(callback, ms = 500) {
  const [startLongPress, setStartLongPress] = useState(false);

  useEffect(() => {
    let timerId;
    if (startLongPress) {
      timerId = setTimeout(callback, ms);
    } else {
      clearTimeout(timerId);
    }

    return () => {
      clearTimeout(timerId);
    };
  }, [startLongPress, callback, ms]);

  return {
    onTouchStart: () => setStartLongPress(true),
    onTouchEnd: () => setStartLongPress(false),
    onTouchMove: () => setStartLongPress(false),
  };
}

// Usage
function LongPressItem({ item }) {
  const longPressProps = useLongPress(() => {
    console.log('Long press detected!');
    // Show context menu
  }, 500);

  return (
    <div {...longPressProps} className="long-press-item">
      {item.name}
    </div>
  );
}

Drag and Drop

// React Native: Drag and Drop
import { PanResponder, Animated } from 'react-native';

function DraggableCard({ children }) {
  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value,
        });
      },
      onPanResponderMove: Animated.event(
        [null, { dx: pan.x, dy: pan.y }],
        { useNativeDriver: false }
      ),
      onPanResponderRelease: () => {
        pan.flattenOffset();
        Animated.spring(pan, {
          toValue: { x: 0, y: 0 },
          useNativeDriver: true,
        }).start();
      },
    })
  ).current;

  return (
    <Animated.View
      {...panResponder.panHandlers}
      style={{
        transform: [{ translateX: pan.x }, { translateY: pan.y }],
      }}
    >
      {children}
    </Animated.View>
  );
}

Navigation Patterns

Tab Bar Navigation

Bottom Tab Bar (iOS standard, Android common):

// React Native: Bottom Tab Navigation
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

function AppNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Search') {
            iconName = focused ? 'search' : 'search-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person-outline';
          }

          return <Icon name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#007AFF',
        tabBarInactiveTintColor: '#8E8E93',
        tabBarStyle: {
          height: 88, // Account for safe area
          paddingBottom: 34, // iPhone home indicator
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

Best Practices:

3-5 tabs maximum
Always show labels (don't rely on icons alone)
Highlight active tab clearly
Keep tabs visible at all times
Most important section on the left (for LTR languages)

Hamburger Menu (Drawer Navigation)

// React Native: Drawer Navigation
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function DrawerNavigator() {
  return (
    <Drawer.Navigator
      screenOptions={{
        drawerPosition: 'left',
        drawerType: 'slide',
        drawerStyle: {
          width: 280,
        },
        headerShown: true,
      }}
    >
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        options={{
          drawerIcon: ({ color, size }) => (
            <Icon name="home-outline" color={color} size={size} />
          ),
        }}
      />
      <Drawer.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          drawerIcon: ({ color, size }) => (
            <Icon name="settings-outline" color={color} size={size} />
          ),
        }}
      />
    </Drawer.Navigator>
  );
}

When to Use:

Secondary navigation
Many navigation options (6+)
Infrequently accessed features
Settings and account options

Avoid When:

Primary navigation is needed
User needs quick access to all sections
You have 5 or fewer main sections (use tabs instead)

Bottom Sheets and Modals

Bottom Sheet (Material Design):

// React: Bottom Sheet
function BottomSheet({ isOpen, onClose, children }) {
  const [startY, setStartY] = useState(0);
  const [currentY, setCurrentY] = useState(0);

  const handleTouchStart = (e) => {
    setStartY(e.touches[0].clientY);
  };

  const handleTouchMove = (e) => {
    const delta = e.touches[0].clientY - startY;
    if (delta > 0) { // Only allow downward drag
      setCurrentY(delta);
    }
  };

  const handleTouchEnd = () => {
    if (currentY > 100) { // Threshold for closing
      onClose();
    }
    setCurrentY(0);
  };

  if (!isOpen) return null;

  return (
    <>
      <div className="bottom-sheet-backdrop" onClick={onClose} />
      <div
        className="bottom-sheet"
        style={{ transform: `translateY(${currentY}px)` }}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
      >
        <div className="bottom-sheet-handle" />
        <div className="bottom-sheet-content">
          {children}
        </div>
      </div>
    </>
  );
}

// CSS
.bottom-sheet-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 16px;
  max-height: 80vh;
  z-index: 1000;
  transition: transform 0.3s;
}

.bottom-sheet-handle {
  width: 40px;
  height: 4px;
  background: #D1D1D6;
  border-radius: 2px;
  margin: 8px auto 16px;
}

Full-Screen Modal:

// iOS-style modal with slide-up animation
function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-container">
        <div className="modal-header">
          <button onClick={onClose} className="modal-close">
            Done
          </button>
        </div>
        <div className="modal-content">
          {children}
        </div>
      </div>
    </div>
  );
}

// CSS
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: fadeIn 0.3s;
}

.modal-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  animation: slideUp 0.3s;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

Stack Navigation

// React Navigation: Stack Navigator
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function StackNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#007AFF',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        cardStyleInterpolator: ({ current, layouts }) => {
          return {
            cardStyle: {
              transform: [
                {
                  translateX: current.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: [layouts.screen.width, 0],
                  }),
                },
              ],
            },
          };
        },
      }}
    >
      <Stack.Screen name="List" component={ListScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
      <Stack.Screen name="Edit" component={EditScreen} />
    </Stack.Navigator>
  );
}

Mobile UI Components

Cards

Material Design Card:

function Card({ image, title, subtitle, description, actions }) {
  return (
    <div className="card">
      {image && (
        <div className="card-media">
          <img src={image} alt={title} />
        </div>
      )}

      <div className="card-content">
        <h3 className="card-title">{title}</h3>
        {subtitle && <p className="card-subtitle">{subtitle}</p>}
        <p className="card-description">{description}</p>
      </div>

      {actions && (
        <div className="card-actions">
          {actions}
        </div>
      )}
    </div>
  );
}

// CSS
.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.card-media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.card-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
}

.card-description {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.card-actions {
  padding: 8px 16px 16px;
  display: flex;
  gap: 8px;
}

Lists

iOS-Style List:

function IOSList({ items, onItemPress }) {
  return (
    <div className="ios-list">
      {items.map((item, index) => (
        <div
          key={item.id}
          className="ios-list-item"
          onClick={() => onItemPress(item)}
        >
          {item.icon && (
            <div className="ios-list-icon">{item.icon}</div>
          )}

          <div className="ios-list-content">
            <div className="ios-list-title">{item.title}</div>
            {item.subtitle && (
              <div className="ios-list-subtitle">{item.subtitle}</div>
            )}
          </div>

          {item.badge && (
            <div className="ios-list-badge">{item.badge}</div>
          )}

          <div className="ios-list-chevron">›</div>
        </div>
      ))}
    </div>
  );
}

// CSS
.ios-list {
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

.ios-list-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  min-height: 56px;
  border-bottom: 0.5px solid #E5E5EA;
  -webkit-tap-highlight-color: transparent;
}

.ios-list-item:active {
  background: #F2F2F7;
}

.ios-list-item:last-child {
  border-bottom: none;
}

.ios-list-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-list-content {
  flex: 1;
}

.ios-list-title {
  font-size: 17px;
  color: #000;
}

.ios-list-subtitle {
  font-size: 15px;
  color: #8E8E93;
  margin-top: 2px;
}

.ios-list-badge {
  background: #FF3B30;
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  margin-right: 8px;
}

.ios-list-chevron {
  font-size: 24px;
  color: #C7C7CC;
}

Forms

Mobile-Optimized Form:

function MobileForm() {
  return (
    <form className="mobile-form">
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          inputMode="email"
          autoComplete="email"
          placeholder="you@example.com"
        />
      </div>

      <div className="form-group">
        <label htmlFor="phone">Phone</label>
        <input
          id="phone"
          type="tel"
          inputMode="tel"
          autoComplete="tel"
          placeholder="(555) 123-4567"
        />
      </div>

      <div className="form-group">
        <label htmlFor="amount">Amount</label>
        <input
          id="amount"
          type="number"
          inputMode="decimal"
          placeholder="0.00"
        />
      </div>

      <button type="submit" className="submit-button">
        Submit
      </button>
    </form>
  );
}

// CSS
.mobile-form {
  padding: 16px;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.form-group input {
  width: 100%;
  height: 56px;
  padding: 16px;
  font-size: 16px; /* Prevents zoom on iOS */
  border: 2px solid #E5E5EA;
  border-radius: 12px;
  background: white;
  -webkit-appearance: none;
}

.form-group input:focus {
  outline: none;
  border-color: #007AFF;
}

.submit-button {
  width: 100%;
  height: 56px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
}

Input Types for Mobile Keyboards:

<!-- Email keyboard -->
<input type="email" inputmode="email">

<!-- Numeric keyboard -->
<input type="number" inputmode="numeric">

<!-- Decimal keyboard (includes . and ,) -->
<input type="number" inputmode="decimal">

<!-- Telephone keyboard -->
<input type="tel" inputmode="tel">

<!-- URL keyboard (includes .com, /, etc.) -->
<input type="url" inputmode="url">

<!-- Search keyboard (includes search button) -->
<input type="search" inputmode="search">

Action Sheets

// iOS-style Action Sheet
function ActionSheet({ isOpen, onClose, title, options }) {
  if (!isOpen) return null;

  return (
    <>
      <div className="action-sheet-backdrop" onClick={onClose} />
      <div className="action-sheet">
        {title && <div className="action-sheet-title">{title}</div>}

        <div className="action-sheet-options">
          {options.map((option, index) => (
            <button
              key={index}
              className={`action-sheet-option ${option.destructive ? 'destructive' : ''}`}
              onClick={() => {
                option.onPress();
                onClose();
              }}
            >
              {option.icon && <span className="option-icon">{option.icon}</span>}
              {option.label}
            </button>
          ))}
        </div>

        <button className="action-sheet-cancel" onClick={onClose}>
          Cancel
        </button>
      </div>
    </>
  );
}

// CSS
.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 1001;
  padding: 8px;
  animation: slideUp 0.3s;
}

.action-sheet-title {
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
  text-align: center;
  border-radius: 14px 14px 0 0;
  font-size: 13px;
  color: #8E8E93;
}

.action-sheet-options {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}

.action-sheet-option {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid #E5E5EA;
  font-size: 20px;
  color: #007AFF;
  -webkit-tap-highlight-color: transparent;
}

.action-sheet-option:active {
  background: rgba(0, 0, 0, 0.05);
}

.action-sheet-option.destructive {
  color: #FF3B30;
}

.action-sheet-cancel {
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 600;
  color: #007AFF;
}

Platform Conventions

iOS Human Interface Guidelines

Navigation Bar:

Height: 44pt (plus status bar)
Large title: 52pt collapsible header
Back button always shows previous screen title
Right-aligned action buttons

Tab Bar:

Height: 49pt (plus safe area)
5 tabs maximum
Badge notifications on tab icons
Selected tab uses accent color

Typography:

SF Pro (system font)
Dynamic Type support required
Font sizes: 11pt to 34pt
Weight hierarchy: Regular, Medium, Semibold, Bold

Colors:

System colors adapt to light/dark mode
Blue (#007AFF) for tappable elements
Red (#FF3B30) for destructive actions
Semantic colors: label, secondaryLabel, tertiaryLabel

Spacing:

Minimum margins: 16pt
Standard spacing: 8pt, 16pt, 24pt, 32pt
Component padding: 16pt horizontal, 12pt vertical

// SwiftUI: iOS Navigation
struct ContentView: View {
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    HStack {
                        Image(systemName: item.icon)
                            .foregroundColor(.accentColor)

                        VStack(alignment: .leading) {
                            Text(item.title)
                                .font(.headline)
                            Text(item.subtitle)
                                .font(.subheadline)
                                .foregroundColor(.secondary)
                        }
                    }
                    .padding(.vertical, 8)
                }
            }
            .navigationTitle("Items")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

Material Design (Android)

App Bar:

Height: 56dp (64dp for tablets)
Elevation: 4dp
Hamburger icon or back arrow on left
Title centered or left-aligned
Action icons on right (max 3)

Bottom Navigation:

Height: 56dp
3-5 destinations
Icons with text labels
Active indicator

FAB (Floating Action Button):

Size: 56×56dp (regular), 40×40dp (mini)
Position: 16dp from edges
Primary action only
Extended FAB includes text label

Typography:

Roboto font family
Scale: 12sp to 96sp
Line height: 1.5× font size
Letter spacing varies by size

Elevation:

Shadow depth indicates hierarchy
0dp: flat surface
1-8dp: raised components
16-24dp: modals and dialogs

Spacing:

4dp grid system
Keylines: 16dp, 72dp from edges
Component spacing: 8dp, 16dp, 24dp

// Jetpack Compose: Material Design
@Composable
fun MaterialCard(item: Item) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = item.title,
                style = MaterialTheme.typography.headlineSmall
            )

            Spacer(modifier = Modifier.height(8.dp))

            Text(
                text = item.description,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )

            Spacer(modifier = Modifier.height(16.dp))

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.End
            ) {
                TextButton(onClick = { /* Action */ }) {
                    Text("ACTION")
                }
            }
        }
    }
}

Accessibility

Touch Target Sizes

WCAG 2.1 Level AAA:

Minimum: 44×44 pixels
Recommended: 48×48 pixels or larger
Spacing: 8px minimum between targets

// Accessible button component
function AccessibleButton({ children, onPress, variant = 'primary' }) {
  return (
    <button
      className={`accessible-button ${variant}`}
      onClick={onPress}
      style={{
        minWidth: '48px',
        minHeight: '48px',
        padding: '12px 24px',
      }}
    >
      {children}
    </button>
  );
}

Screen Reader Support

Semantic HTML:

function AccessibleMobileNav() {
  return (
    <nav role="navigation" aria-label="Main navigation">
      <ul>
        <li>
          <a href="/home" aria-current="page">
            <Icon name="home" aria-hidden="true" />
            <span>Home</span>
          </a>
        </li>
        <li>
          <a href="/search">
            <Icon name="search" aria-hidden="true" />
            <span>Search</span>
          </a>
        </li>
      </ul>
    </nav>
  );
}

React Native Accessibility:

import { View, Text, TouchableOpacity } from 'react-native';

function AccessibleCard({ title, description, onPress }) {
  return (
    <TouchableOpacity
      accessible={true}
      accessibilityLabel={`${title}. ${description}`}
      accessibilityRole="button"
      accessibilityHint="Double tap to view details"
      onPress={onPress}
    >
      <View>
        <Text>{title}</Text>
        <Text>{description}</Text>
      </View>
    </TouchableOpacity>
  );
}

Color Contrast

WCAG AA Requirements:

Normal text: 4.5:1 contrast ratio
Large text (18pt+): 3:1 contrast ratio
UI components: 3:1 contrast ratio

/* Good contrast examples */
.primary-button {
  background: #0066CC; /* Blue */
  color: #FFFFFF; /* White - 6.4:1 ratio */
}

.secondary-button {
  background: #FFFFFF; /* White */
  color: #333333; /* Dark gray - 12.6:1 ratio */
  border: 2px solid #333333;
}

/* Bad contrast (avoid) */
.bad-button {
  background: #FFCC00; /* Yellow */
  color: #FFFFFF; /* White - 1.4:1 ratio ❌ */
}

Focus Indicators

/* Visible focus states for keyboard navigation */
button:focus-visible {
  outline: 3px solid #007AFF;
  outline-offset: 2px;
}

input:focus-visible {
  border-color: #007AFF;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

/* Remove default focus ring, add custom */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 3px solid #007AFF;
  outline-offset: 2px;
}

Performance

Image Optimization

Responsive Images:

<!-- Serve different sizes based on screen width -->
<img
  src="image-800w.jpg"
  srcset="
    image-400w.jpg 400w,
    image-800w.jpg 800w,
    image-1200w.jpg 1200w
  "
  sizes="
    (max-width: 480px) 100vw,
    (max-width: 768px) 50vw,
    33vw
  "
  alt="Product image"
  loading="lazy"
>

<!-- WebP with fallback -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Fallback image">
</picture>

Lazy Loading:

// React: Intersection Observer for lazy loading
function LazyImage({ src, alt }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isInView, setIsInView] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsInView(true);
          observer.disconnect();
        }
      },
      { rootMargin: '50px' }
    );

    if (imgRef.current) {
      observer.observe(imgRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={imgRef} className="lazy-image-container">
      {!isLoaded && <div className="skeleton-loader" />}
      {isInView && (
        <img
          src={src}
          alt={alt}
          onLoad={() => setIsLoaded(true)}
          style={{ opacity: isLoaded ? 1 : 0 }}
        />
      )}
    </div>
  );
}

Loading Strategies

Skeleton Screens:

function SkeletonCard() {
  return (
    <div className="skeleton-card">
      <div className="skeleton skeleton-image" />
      <div className="skeleton skeleton-title" />
      <div className="skeleton skeleton-text" />
      <div className="skeleton skeleton-text short" />
    </div>
  );
}

// CSS
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-image {
  height: 200px;
  border-radius: 8px 8px 0 0;
}

.skeleton-title {
  height: 24px;
  margin: 16px;
  border-radius: 4px;
}

.skeleton-text {
  height: 16px;
  margin: 8px 16px;
  border-radius: 4px;
}

.skeleton-text.short {
  width: 60%;
}

Progressive Web App (PWA):

// service-worker.js
const CACHE_NAME = 'mobile-app-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png',
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // Return cached version or fetch new
        return response || fetch(event.request);
      })
  );
});

Performance Metrics

Core Web Vitals for Mobile:

LCP (Largest Contentful Paint): < 2.5s
FID (First Input Delay): < 100ms
CLS (Cumulative Layout Shift): < 0.1

// Measure performance
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime);
  }
});

observer.observe({ entryTypes: ['navigation', 'paint', 'largest-contentful-paint'] });

Responsive Breakpoints

Common Device Widths

/* iPhone SE (2022) */
@media (min-width: 375px) and (max-width: 667px) {
  /* Small phone styles */
}

/* iPhone 12/13/14 Pro */
@media (min-width: 390px) and (max-width: 844px) {
  /* Standard phone styles */
}

/* iPhone 14 Pro Max */
@media (min-width: 428px) and (max-width: 926px) {
  /* Large phone styles */
}

/* iPad Mini */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet styles */
}

/* iPad Pro */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* Large tablet styles */
}

Orientation-Specific Styles

/* Portrait mode */
@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

/* Landscape mode */
@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }

  .sidebar {
    width: 300px;
  }
}

/* Prevent layout shift on keyboard open */
@media (max-height: 500px) {
  .bottom-nav {
    display: none;
  }
}

Container Queries (Modern Approach)

/* Component adapts to container size, not viewport */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@container (min-width: 600px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

Examples

1. Mobile E-commerce Product List

function ProductList({ products }) {
  return (
    <div className="product-list">
      {products.map((product) => (
        <div key={product.id} className="product-card">
          <div className="product-image-container">
            <img
              src={product.image}
              alt={product.name}
              loading="lazy"
            />
            {product.badge && (
              <span className="product-badge">{product.badge}</span>
            )}
          </div>

          <div className="product-info">
            <h3 className="product-name">{product.name}</h3>
            <p className="product-price">${product.price}</p>

            {product.rating && (
              <div className="product-rating">
                {'★'.repeat(product.rating)}
                {'☆'.repeat(5 - product.rating)}
                <span className="review-count">
                  ({product.reviewCount})
                </span>
              </div>
            )}
          </div>

          <button className="add-to-cart-btn">
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
}

// CSS
.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}

@media (min-width: 768px) {
  .product-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-image-container {
  position: relative;
  aspect-ratio: 1;
  background: #f5f5f5;
}

.product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #FF3B30;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.product-info {
  padding: 12px;
}

.product-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  font-size: 16px;
  font-weight: 700;
  color: #007AFF;
  margin: 0 0 8px 0;
}

.product-rating {
  font-size: 14px;
  color: #FFB800;
}

.review-count {
  color: #666;
  font-size: 12px;
  margin-left: 4px;
}

.add-to-cart-btn {
  width: 100%;
  height: 44px;
  background: #007AFF;
  color: white;
  border: none;
  font-size: 14px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

.add-to-cart-btn:active {
  background: #0051D5;
}

2. Infinite Scroll Feed

function InfiniteFeed() {
  const [posts, setPosts] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const observerTarget = useRef(null);

  const loadMore = async () => {
    if (loading || !hasMore) return;

    setLoading(true);
    const newPosts = await fetchPosts(page);

    if (newPosts.length === 0) {
      setHasMore(false);
    } else {
      setPosts(prev => [...prev, ...newPosts]);
      setPage(prev => prev + 1);
    }

    setLoading(false);
  };

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          loadMore();
        }
      },
      { threshold: 0.5 }
    );

    if (observerTarget.current) {
      observer.observe(observerTarget.current);
    }

    return () => observer.disconnect();
  }, [loading, hasMore]);

  return (
    <div className="feed">
      {posts.map(post => (
        <FeedCard key={post.id} post={post} />
      ))}

      {loading && <LoadingSpinner />}

      <div ref={observerTarget} style={{ height: '20px' }} />

      {!hasMore && (
        <div className="feed-end">No more posts</div>
      )}
    </div>
  );
}

3. Mobile Search with Autocomplete

function MobileSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isFocused, setIsFocused] = useState(false);
  const [recentSearches, setRecentSearches] = useState([]);

  const handleSearch = async (value) => {
    setQuery(value);

    if (value.length >= 2) {
      const searchResults = await fetchSearchResults(value);
      setResults(searchResults);
    } else {
      setResults([]);
    }
  };

  const handleSubmit = (searchQuery) => {
    // Save to recent searches
    const updated = [searchQuery, ...recentSearches.slice(0, 4)];
    setRecentSearches(updated);
    localStorage.setItem('recentSearches', JSON.stringify(updated));

    // Navigate to results
    window.location.href = `/search?q=${encodeURIComponent(searchQuery)}`;
  };

  return (
    <div className="mobile-search">
      <div className="search-bar">
        <input
          type="search"
          inputMode="search"
          placeholder="Search products..."
          value={query}
          onChange={(e) => handleSearch(e.target.value)}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setTimeout(() => setIsFocused(false), 200)}
        />

        {query && (
          <button
            className="clear-button"
            onClick={() => {
              setQuery('');
              setResults([]);
            }}
          >
            ✕
          </button>
        )}
      </div>

      {isFocused && (
        <div className="search-dropdown">
          {query.length === 0 && recentSearches.length > 0 && (
            <div className="recent-searches">
              <h4>Recent Searches</h4>
              {recentSearches.map((search, index) => (
                <button
                  key={index}
                  className="search-suggestion"
                  onClick={() => handleSubmit(search)}
                >
                  <span className="icon">🕐</span>
                  {search}
                </button>
              ))}
            </div>
          )}

          {results.length > 0 && (
            <div className="search-results">
              {results.map((result) => (
                <button
                  key={result.id}
                  className="search-result-item"
                  onClick={() => handleSubmit(result.name)}
                >
                  <img src={result.thumbnail} alt="" />
                  <div>
                    <div className="result-name">{result.name}</div>
                    <div className="result-category">{result.category}</div>
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

4. Filter Drawer

function FilterDrawer({ isOpen, onClose, onApply }) {
  const [filters, setFilters] = useState({
    priceRange: [0, 1000],
    category: [],
    rating: 0,
    inStock: false,
  });

  return (
    <>
      {isOpen && (
        <div className="filter-drawer-overlay" onClick={onClose} />
      )}

      <div className={`filter-drawer ${isOpen ? 'open' : ''}`}>
        <div className="filter-header">
          <h2>Filters</h2>
          <button onClick={onClose}>✕</button>
        </div>

        <div className="filter-content">
          <div className="filter-section">
            <h3>Price Range</h3>
            <input
              type="range"
              min="0"
              max="1000"
              value={filters.priceRange[1]}
              onChange={(e) => setFilters({
                ...filters,
                priceRange: [0, parseInt(e.target.value)]
              })}
            />
            <div className="price-display">
              ${filters.priceRange[0]} - ${filters.priceRange[1]}
            </div>
          </div>

          <div className="filter-section">
            <h3>Category</h3>
            {['Electronics', 'Clothing', 'Books', 'Home'].map(cat => (
              <label key={cat} className="checkbox-label">
                <input
                  type="checkbox"
                  checked={filters.category.includes(cat)}
                  onChange={(e) => {
                    if (e.target.checked) {
                      setFilters({
                        ...filters,
                        category: [...filters.category, cat]
                      });
                    } else {
                      setFilters({
                        ...filters,
                        category: filters.category.filter(c => c !== cat)
                      });
                    }
                  }}
                />
                {cat}
              </label>
            ))}
          </div>

          <div className="filter-section">
            <label className="checkbox-label">
              <input
                type="checkbox"
                checked={filters.inStock}
                onChange={(e) => setFilters({
                  ...filters,
                  inStock: e.target.checked
                })}
              />
              In Stock Only
            </label>
          </div>
        </div>

        <div className="filter-actions">
          <button
            className="clear-button"
            onClick={() => setFilters({
              priceRange: [0, 1000],
              category: [],
              rating: 0,
              inStock: false,
            })}
          >
            Clear All
          </button>

          <button
            className="apply-button"
            onClick={() => {
              onApply(filters);
              onClose();
            }}
          >
            Apply Filters
          </button>
        </div>
      </div>
    </>
  );
}

// CSS
.filter-drawer {
  position: fixed;
  right: -100%;
  top: 0;
  bottom: 0;
  width: 85%;
  max-width: 400px;
  background: white;
  z-index: 1001;
  transition: right 0.3s;
  display: flex;
  flex-direction: column;
}

.filter-drawer.open {
  right: 0;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #E5E5EA;
}

.filter-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 15px;
}

.checkbox-label input {
  margin-right: 12px;
  width: 20px;
  height: 20px;
}

.filter-actions {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #E5E5EA;
}

.clear-button,
.apply-button {
  flex: 1;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}

.clear-button {
  background: white;
  border: 2px solid #007AFF;
  color: #007AFF;
}

.apply-button {
  background: #007AFF;
  border: none;
  color: white;
}

5. Mobile Payment Form

function MobilePaymentForm() {
  const [cardNumber, setCardNumber] = useState('');
  const [expiry, setExpiry] = useState('');
  const [cvv, setCvv] = useState('');

  const formatCardNumber = (value) => {
    return value
      .replace(/\s/g, '')
      .match(/.{1,4}/g)
      ?.join(' ') || '';
  };

  const formatExpiry = (value) => {
    const cleaned = value.replace(/\D/g, '');
    if (cleaned.length >= 2) {
      return `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}`;
    }
    return cleaned;
  };

  return (
    <form className="payment-form">
      <div className="form-group">
        <label>Card Number</label>
        <input
          type="text"
          inputMode="numeric"
          maxLength="19"
          placeholder="1234 5678 9012 3456"
          value={formatCardNumber(cardNumber)}
          onChange={(e) => setCardNumber(e.target.value.replace(/\s/g, ''))}
        />
      </div>

      <div className="form-row">
        <div className="form-group">
          <label>Expiry</label>
          <input
            type="text"
            inputMode="numeric"
            maxLength="5"
            placeholder="MM/YY"
            value={expiry}
            onChange={(e) => setExpiry(formatExpiry(e.target.value))}
          />
        </div>

        <div className="form-group">
          <label>CVV</label>
          <input
            type="text"
            inputMode="numeric"
            maxLength="4"
            placeholder="123"
            value={cvv}
            onChange={(e) => setCvv(e.target.value.replace(/\D/g, ''))}
          />
        </div>
      </div>

      <button type="submit" className="pay-button">
        Pay $99.99
      </button>
    </form>
  );
}

6-20. Additional Examples

For brevity, here are summaries of 14 more essential mobile design patterns:

6. Sticky Header with Scroll Progress

Header shrinks on scroll
Progress bar shows reading position
Back-to-top button appears after scroll

7. Image Gallery with Pinch Zoom

Full-screen image viewer
Swipe between images
Pinch to zoom functionality

8. Mobile-Optimized Data Table

Horizontal scroll with sticky first column
Card view on small screens
Expandable rows for details

9. Bottom Sheet Menu

Swipe up to expand
Drag to dismiss
Multiple snap points (collapsed, half, full)

10. Mobile Calendar Picker

Month view optimized for touch
Date range selection
Quick actions (Today, Tomorrow, Next Week)

11. Floating Action Button (FAB) with Speed Dial

Primary action always visible
Expands to show related actions
Smooth animations

12. Pull to Refresh

Custom loading animation
Haptic feedback
Success/error states

13. Swipeable Tabs

Horizontal scroll tabs
Active tab indicator
Snap to tab on scroll

14. Mobile Video Player

Custom controls optimized for touch
Picture-in-picture mode
Gesture controls (tap to pause, double-tap to skip)

15. Mobile Toast Notifications

Non-intrusive messaging
Auto-dismiss with manual override
Action buttons

16. Collapsible Accordion

Touch-friendly expand/collapse
Smooth animations
Multiple sections

17. Mobile Stepper Form

Multi-step process
Progress indicator
Back/Next navigation

18. Voice Input Interface

Microphone button
Real-time transcription
Voice feedback

19. Onboarding Carousel

Swipeable introduction screens
Skip option
Progress dots

20. Mobile Share Sheet

Native-like sharing interface
Common share targets
Copy link functionality

Conclusion

Mobile design requires deep understanding of touch interactions, platform conventions, and performance optimization. By following mobile-first principles, respecting thumb zones, and implementing platform-appropriate patterns, you create experiences that feel natural and performant on mobile devices.

Remember: mobile users are often on-the-go, have limited attention, and expect instant responsiveness. Prioritize speed, clarity, and ease of use above all else.

FAQ

What does the mobile-design skill do?

Mobile UX patterns, touch interactions, gesture design, mobile-first principles, app navigation, and mobile performance

How do I install mobile-design?

Run npx skills add https://github.com/manutej/luxor-claude-marketplace --skill mobile-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mobile-design/ (personal) or .claude/skills/mobile-design/ (project).

Which AI agents can use mobile-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is mobile-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains mobile-design?

It is published by manutej in manutej/luxor-claude-marketplace. It has 545 recorded installs.