# Mobile Gesture Handler

> Handles touch gestures including swipe, pinch, long press, and drag. Provides unified gesture recognition across iOS and Android.

- Skill: `fadil369/mobile-gesture-handler` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fadil369/mobile-gesture-handler`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fadil369/mobile-gesture-handler/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: fadil369 (https://skillmd.com/u/fadil369)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fadil369/mobile-gesture-handler

---


# Mobile Gesture Handler

Handles touch gestures including swipe, pinch, long press, and drag. Provides unified gesture recognition across iOS and Android.

## Decision Framework

### When to Apply
Use when: Touch interactions, swipe navigation, drag-and-drop on mobile, pinch-to-zoom, mobile-specific UX

### When NOT to Apply
Don't use when: Desktop-only applications, simple tap interactions

## Anti-Patterns

### 1. Tiny Touch Targets
```css
/* BAD: 20px target */
.icon-button { width: 20px; height: 20px; }

/* GOOD: 44px minimum per Apple/Google guidelines */
.icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
```

### 2. No Gesture Feedback
Always provide visual feedback during gestures (swipe reveals, drag handles, etc.).


## Trigger Phrases

- "Touch gestures"
- "Swipe navigation"
- "Pinch to zoom"
- "Long press"
- "Mobile interactions"

## Patterns

### Swipe Detector
```javascript
function useSwipe(onSwipeLeft, onSwipeRight, threshold = 50) {
  const touchStart = useRef(null);
  
  const onTouchStart = (e) => { touchStart.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (!touchStart.current) return;
    const diff = touchStart.current - e.changedTouches[0].clientX;
    if (Math.abs(diff) > threshold) {
      diff > 0 ? onSwipeLeft?.() : onSwipeRight?.();
    }
    touchStart.current = null;
  };

  return { onTouchStart, onTouchEnd };
}
```

### Long Press
```javascript
function useLongPress(callback, delay = 500) {
  const timerRef = useRef(null);
  
  const start = () => { timerRef.current = setTimeout(callback, delay); };
  const cancel = () => clearTimeout(timerRef.current);
  
  return {
    onTouchStart: start, onTouchEnd: cancel, onTouchMove: cancel,
    onMouseDown: start, onMouseUp: cancel, onMouseLeave: cancel,
  };
}
```

## Integration
- Works with: accessibility-pattern-library, component-lifecycle-manager