gesture-patterns

designowl-listener1.8K installs

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).

Install

npx skills add https://github.com/owl-listener/designer-skills --skill gesture-patterns

SKILL.md

---name: gesture-patternsdescription: 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

frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography hyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.