Skip to main content
affpapa.org
RU EN
skill CX Codex

gesture-patterns — Claude Code skill for gesture interactions

Designs touch and pointer gestures such as swipes, dragging and long presses. Use it when an interface relies on gestural input.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a claude-code
Open on GitHub

What gesture-patterns does

This skill helps plan taps, double taps, long presses, swipes, pinches, rotation, dragging and pull-to-refresh. It maps each gesture to an action such as selection, navigation, dismissal, value adjustment or a context menu.

Its guidance covers visible affordances, first-use hints, immediate visual feedback, progress cues and completion confirmation. It suggests a 10-15px movement threshold and treats 500ms as a typical long-press threshold. It also addresses scroll-versus-swipe, tap-versus-long-press, and pinch-versus-drag conflicts.

Every gesture needs a button or menu alternative, and gesture animations should respect reduced-motion preferences. System gestures take priority, so check that the interface does not intercept back swipes or notification pulls. For standard iOS and Android gestures, the author directs you to platform-conventions in ui-design.

What it helps with

  • design a swipe for navigation or dismissal
  • separate scrolling from horizontal swipes
  • add visible hints for hidden gestures
  • set thresholds for dragging and long presses
  • provide a button or menu alternative to a gesture

Example prompts for the agent

  • Design gestures for a list where a swipe reveals actions without interfering with scrolling.
  • Review card dragging for accessibility and add controls that do not require gestures.
  • Suggest feedback and activation thresholds for pinch zoom on an image.

How to install gesture-patterns

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a claude-code

2Manually: put the files in place

~/.claude/skills/gesture-patterns/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/gesture-patterns/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about gesture-patterns

How do I install gesture-patterns in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a claude-code, then run npx skills add Owl-Listener/designer-skills --skill gesture-patterns -a claude-code again. The skill file is at ~/.claude/skills/gesture-patterns/SKILL.md.

What does gesture-patterns do?

It guides the design of touch and pointer gestures. The skill covers discoverability, feedback, activation thresholds, gesture conflicts and accessible alternatives.

How does gesture-patterns address accessibility?

Each gesture should have a button or menu alternative. The guidance also covers switch control, voice control, documenting custom gestures and reduced-motion preferences.

Source text

SKILL.md · MIT 
---
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

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →
design-system-patterns Seth Hobson Guides the design of design tokens, theme switching, and component library architecture. Use it when establishing shared UI foundations for a project. CX Codex 15,953installs mobile-ios-design Seth Hobson Guides native iOS interface work with Apple HIG and SwiftUI patterns. Use it when building views, navigation, or adaptive layouts. CX Codex 23,659installs checklist-design Checklist Design Audits websites, web apps, and mobile interfaces against Checklist Design checklists. It flags missing UI elements and critiques hierarchy, layout, typography, and accessibility. CX Codex +1 1,100installs ui-design-brain carmahhawwari This skill guides interface generation with documented component patterns and design-system rules. Use it for pages, dashboards, forms, navigation, and other UI work. CX Codex +1 845installs app-ui-design majiayu000 A skill for designing iOS and Android interfaces: design systems, accessibility, platform guidelines. Useful when the agent lays out screens or checks contrast. CX Codex +1 636installs ui-designer VoltAgent Community Designs visual interfaces, builds component libraries, and creates handoff documentation. Ideal when code needs structured UI states and design tokens. 1,979installs

From the same set111

handoff-spec Generates developer handoff specifications covering measurements, interaction states, responsive breakpoints, and edge cases before engineering starts. CX Codex +1 2,100installs experience-map The skill maps every touchpoint, channel and relationship across a service. Useful when the experience spans more than one product. CX Codex +1 2,100installs jobs-to-be-done A Claude Code skill that runs a Jobs-to-Be-Done pass: splits a task into functional, emotional and social parts, then returns a map with design implications. CX Codex +1 2,100installs user-persona This skill builds 2-4 research-grounded personas from interview transcripts, surveys, or analytics. It helps teams align design decisions with observed user behavior. CX Codex +1 2,100installs feedback-patterns Gives the agent a method for designing how a system answers a user action: toasts, progress, badges, notifications. Useful when the interface goes silent after a click. CX Codex +1 2,100installs design-brief Drafts a project brief covering problem space, audience, constraints, and success criteria. Built for kicking off a specific task or feature. CX Codex +1 2,100installs competitive-analysis A skill that compares rival products on UX: patterns, features, gaps and opportunities. Useful when you need to know what competitors actually do. CX Codex +1 2,100installs prototype-strategy Decide what kind of prototype to build and how detailed it should be, before you start building it. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor