gesture-patterns
owl-listener/designer-skills
Design intuitive touch and pointer gestures—swipe, drag, long-press—with discoverability and accessibility.
What is gesture-patterns?
Expert guidance for designing gesture-based interactions across touch and pointer devices. Use this when building gestural input, including tap, swipe, drag, pinch, and long-press patterns. For platform-specific iOS/Android gestures, refer to platform-conventions instead.
- Design core gestures: tap, double-tap, long-press, swipe, pinch, rotate, drag, and pull-to-refresh
- Implement gesture discoverability through visual affordances, hints, and non-gesture alternatives
- Apply feedback patterns: immediate visual response, progress indication, threshold indicators, and completion confirmation
- Resolve gesture conflicts: scroll vs swipe, tap vs long-press, pinch vs drag, and system gesture priority
- Ensure accessibility with non-gesture alternatives, switch control, voice control, and reduced-motion support
- Apply best practices: platform conventions, simple gestures, undo for destructive actions, one-handed use
How to install gesture-patterns
npx skills add https://github.com/owl-listener/designer-skills --skill gesture-patternsHow to use gesture-patterns
- 1.Identify the primary gestures needed for your interaction (tap, swipe, drag, pinch, etc.)
- 2.Define gesture thresholds: minimum distance (10-15px), velocity, direction lock, and cancel zones
- 3.Pair each gesture with a visible affordance or button alternative for discoverability
- 4.Design immediate visual feedback when the gesture starts and progress indication during execution
- 5.Test conflict resolution: ensure scroll vs swipe direction-locking and tap vs long-press timing (500ms) work correctly
- 6.Verify accessibility: confirm every gesture has a non-gesture alternative and respects reduced-motion preferences
- 7.Validate one-handed use and test with actual touch devices
Use cases
- Building a mobile app with swipe-to-dismiss or swipe-to-navigate patterns
- Designing a map or image viewer with pinch-to-zoom and rotate gestures
- Creating a pull-to-refresh interface with visual feedback and threshold indicators
- Implementing a reorderable list using long-press to enter reorder mode
- Designing a touch interface that supports both gesture and button-based alternatives for accessibility
- Mobile app designers
- Interaction designers
- UX engineers building touch interfaces
- Product teams designing gesture-heavy applications
- Accessibility-focused design teams
gesture-patterns FAQ
Use gesture-patterns for custom gesture design and interaction logic. Use platform-conventions for OS-standard gestures specific to iOS and Android.
The typical threshold is 500ms. This allows users to distinguish between a quick tap and an intentional long-press.
Use direction-locking: after initial movement, lock the gesture to either horizontal (swipe) or vertical (scroll) based on the direction of the first movement.
Every custom gesture must have a non-gesture alternative (button or menu), support switch control and voice control, be documented, and respect reduced-motion preferences.
Yes, especially for destructive actions like delete or dismiss. Provide undo to help users recover from accidental gestures.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: gesture-patterns
description: Design gesture interactions for touch and pointer — swipe, drag, long-press, and their discoverability. Use when input is gestural. For OS-standard gestures on iOS and Android, use platform-conventions (ui-design).
Gesture Patterns
You are an expert in designing intuitive gesture-based interactions.
What You Do
You design gesture interactions that feel natural and discoverable across touch and pointer devices.
Core Gestures
- Tap: Select, activate, toggle
- Double tap: Zoom, like/favorite
- Long press: Context menu, reorder mode, preview
- Swipe: Navigate, dismiss, reveal actions
- Pinch: Zoom in/out
- Rotate: Rotate content (maps, images)
- Drag: Move, reorder, adjust values
- Pull: Refresh content (pull-to-refresh)
Gesture Design Rules
Discoverability
- Pair gestures with visible affordances
- Provide visual hints on first use
- Always have a non-gesture alternative (button/menu)
Feedback
- Immediate visual response when gesture starts
- Progress indication during gesture
- Threshold indicators (snap points, rubber-banding)
- Completion confirmation
Thresholds
- Minimum distance before gesture activates (10-15px)
- Velocity thresholds for flick/swipe
- Direction lock (horizontal vs vertical)
- Cancel zone (return to start to abort)
Conflict Resolution
- Scroll vs swipe: direction lock after initial movement
- Tap vs long press: time threshold (500ms typical)
- Pinch vs drag: number of touch points
- System gestures take priority (back swipe, notification pull)
Accessibility
- Every gesture must have a non-gesture alternative
- Support switch control and voice control
- Custom gestures should be documented
- Respect reduced-motion preferences for gesture animations
Best Practices
- Follow platform conventions
- Keep gestures simple (one or two fingers)
- Provide undo for destructive gesture actions
- Test with one-handed use
- Don't require precision timing
Related skills
More from owl-listener/designer-skills and the wider catalog.
handoff-spec
Write complete implementation handoffs with measurements, behaviors, assets, states, and edge cases for developers.
heuristic-evaluation
Systematic expert review of interfaces against Nielsen's 10 usability heuristics with severity ratings.
hicks-law
Reduce decision time by controlling the number of simultaneous choices presented.
icon-system
Design and standardize icon systems with grid, sizing, naming, and implementation specs.
illustration-style
Define visual language, colour usage, and application rules for consistent illustrations across your product.
information-architecture
Design content structure, hierarchy, labeling, and navigation models to help users find information and understand their location.