gesture-patterns
The gesture-patterns skill provides guidelines for designing touch and pointer interactions across devices, covering core gestures like tap, swipe, pinch, and drag along with rules for discoverability, feedback, conflict resolution, and accessibility. Use this when creating intuitive gesture-based interfaces that feel natural and include non-gesture alternatives for all interactions.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/gesture-patterns && cp -r /tmp/gesture-patterns/interaction-design/skills/gesture-patterns ~/.claude/skills/gesture-patternsSKILL.md
# 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
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
Analyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).