# Build Responsive Drag and Swipe Interactions

Gesture interfaces can lag behind touch input, jump on release, or conflict with scrolling. This skill guides direct tracking, velocity-aware release, and interruptible interactions.

## Install

```bash
npx skillstore add emilkowalski/gestures
```

## Metadata

- Status: approved
- Slug: emilkowalski-gestures
- Skillstore revision: r1
- Version status: missing
- Tree hash: 5fe7d76d6711667e3c9067d3ed57d4d59c5820a2eee61a7cbfb76374318d5e3a
- Author: emilkowalski
- GitHub username: emilkowalski
- Repository: https://github.com/emilkowalski/skills/tree/5206a950b715e0cabe7043ea0b2304332b91494e/skills/gestures
- Ref: c993c6abcbffafea2683d7748b53b3dfaf438415
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 72
- Public page: https://skillstore.pages.dev/skills/emilkowalski-gestures
- Manifest: https://skillstore.pages.dev/api/skills/emilkowalski-gestures/manifest

## Capabilities

- Explain direct pointer tracking with motion values or element transforms instead of per-move React state updates.
- Guide distance-based and velocity-based dismissal using Motion drag event properties.
- Show how to derive overlay opacity from drawer position with linked motion values.
- Recommend Vaul for sheets and describe transition timing and interactive child exclusions.
- Describe interruptible release motion, drag elasticity, and hold-to-confirm timing.
- Provide touch target, scrolling, hover, real-device testing, and reduced-motion guidance.

## Use Cases

- Improve swipe dismissal: Refine a swipeable card with direct tracking, fast-flick dismissal, and quick snap-back when release thresholds are not met.
- Review mobile drawer behavior: Evaluate drawer timing, overlay synchronization, touch targets, interactive children, and reduced-motion behavior before release.
- Diagnose gesture regressions: Use the touch checklist to investigate scroll conflicts, accidental drags, interrupted animations, and differences between desktop simulation and phones.

## Prompt Templates

### Understand gesture phases

```
Explain tracking and release phases for a swipeable card. Identify when direct movement, springs, and velocity should apply.
```

### Add swipe dismissal

```
Review this Motion component: [component]. Add distance-based and velocity-based swipe dismissal, drag resistance, and quick snap-back without per-move React state.
```

### Refine a Vaul drawer

```
Review this Vaul drawer: [component]. Check overlay progress, interactive child exclusions, floating-drawer timing, touch targets, and reduced-motion behavior.
```

### Diagnose interrupted gestures

```
Analyze this gesture implementation and recording observations: [details]. Diagnose lag, release jumps, and interruption failures. Propose focused changes and real-phone regression checks.
```

## Limitations

- Provides instructions and illustrative snippets, not a complete application or standalone gesture library.
- Examples focus on Motion, React, CSS, and Vaul rather than native mobile frameworks.
- Requires project-specific integration and real-device testing; the skill includes no automated test suite.
- References companion skills that are not included in this single-file package.

## Best Practices

- Separate direct tracking from release physics and derive linked visuals from the same drag progress.
- Prefer an established drawer library when it covers the interaction, and verify focus trapping and Escape dismissal.
- Test on real phones with scrolling, interrupted gestures, interactive children, and reduced-motion settings.

## Anti Patterns

- Apply a spring during pointer tracking or update React state for every pointer movement.
- Dismiss only by distance while ignoring fast flicks and release velocity.
- Use keyframe animations on draggable elements or animate linked overlays independently of drag progress.

## Security Audit

- Audited at: 2026-11-08T14:42:33.634\+00:00
- Summary: All 24 static findings are false positives: Markdown formatting caused 23 command-execution alerts, and the URL is a Vaul documentation link. No evidence found of shell execution, data exfiltration, or prompt injection in the reviewed SKILL.md. The file provides gesture implementation guidance and illustrative frontend snippets.

## Stats

- Views: 0
- Downloads: 0
- Favorites: 0
- Popularity score: 0