interaction-craft

Determine optimal gesture trigger timing and location for UI interactions.

16|1|Updated Feb 6, 2026
One-click install
npx skills add https://github.com/olzn/ui-craft --skill interaction-craft
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interaction-craft
Source: https://github.com/olzn/ui-craft/tree/main/interaction-craft
Command: npx skills add https://github.com/olzn/ui-craft --skill interaction-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Interaction designers often struggle to decide when a gesture should trigger, where transitions originate, and how elements should behave during and after user input, leading to inconsistent and confusing user experiences.

Core Features & Use Cases

  • Gesture Intent Rules: Choose between trigger‑during and trigger‑on‑end based on action cost.
  • Responsive Feedback: Ensure visual response from the first pixel of movement.
  • Spatial Consistency: Align entry and exit animations with their source elements.
  • Kinetic Physics: Apply momentum, variable timing, and interruptibility guidelines.
  • Frequency Calibration: Adjust animation richness based on how often an interaction occurs.
  • Drag Patterns: Define snap points, progressive reveal, elastic resistance, and velocity‑based dismissal. Use cases include swipe‑to‑dismiss, drag‑and‑drop, pinch‑to‑zoom, pull‑to‑refresh, navigation transitions, and command menus.

Quick Start

Request the interaction-craft skill to advise the best trigger timing for a swipe‑to‑dismiss component.

Frequently Asked Questions about interaction-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I decide the best gesture trigger timing for swipe-to-dismiss interactions?

Choose gesture trigger timing by evaluating action cost: use trigger-during for low-cost, reversible actions and trigger-on-end for high-cost actions to prevent accidental dismissals in swipe-to-dismiss interactions.

What is spatial consistency in UI navigation transitions?

Spatial consistency in UI navigation transitions means aligning entry and exit animations directly with their source elements, ensuring visual continuity and preventing confusing layout jumps during interaction.

How to design kinetic physics for drag-and-drop components?

Design kinetic physics for drag-and-drop components by applying momentum, variable timing, and interruptibility guidelines, ensuring elements respond with natural resistance and fluid movement during user input.

Does this interaction design approach provide animation code for pinch-to-zoom?

No, this interaction design approach provides decision rules and kinetic physics principles for pinch-to-zoom without requiring animation code or platform-specific implementation details.

When should I use frequency calibration for pull-to-refresh animations?

Use frequency calibration to adjust animation richness based on how often an interaction occurs, keeping frequently used actions like pull-to-refresh visually subtle to avoid user fatigue.

What are the limitations of using gesture-driven UI design guidelines?

These gesture-driven UI design guidelines are limited to providing spatial consistency and physics principles, meaning developers must separately implement the actual animation code and handle platform-specific rendering constraints.