Home/UI/UX 设计/interaction-design
I

interaction-design

by @Owl-Listenerv
4.4(210)

Specializes in designing meaningful user interactions, including micro-animations, state transitions, and user flows, to create intuitive, delightful, and efficient digital experiences.

InteractionMicro-animationsGesturesGitHub
Installation
npx skills add Owl-Listener/designer-skills --skill interaction-design
compare_arrows

Before / After Comparison

1
Before

The product interface lacked lively interactive feedback, users felt indifferent during operations, found it difficult to understand system states, leading to a poor user experience and low user retention.

After

Through carefully designed micro-animations and state mechanisms, the product is brought to life, enhancing user operational enjoyment and comprehension, significantly improving user experience and product appeal.

description SKILL.md

interaction-design

Design meaningful interactions with micro-animations, state machines, gestures, error handling, and feedback patterns.

Skills (7)

  • micro-interaction-spec — Specify micro-interactions with trigger, rules, feedback, and loop/mode definitions.
  • animation-principles — Apply animation principles to UI motion for purposeful, polished interactions.
  • state-machine — Model complex UI behavior as finite state machines with states and transitions.
  • gesture-patterns — Design gesture-based interactions for touch and pointer devices.
  • error-handling-ux — Design error prevention, detection, and recovery experiences.
  • loading-states — Design loading, skeleton, and progressive content reveal patterns.
  • feedback-patterns — Design system feedback for user actions including confirmations and status.

Commands (3)

  • /design-interaction — Design a complete interaction flow for a feature or component.
  • /map-states — Model the states and transitions for a complex UI component.
  • /error-flow — Design a complete error handling flow for a feature.

forumUser Reviews (0)

Write a Review

Effect
Usability
Docs
Compatibility

No reviews yet

Statistics

Installs4.1K
Rating4.4 / 5.0
Version
Updated2026年4月27日
Comparisons1

User Rating

4.4(210)
5
63%
4
25%
3
8%
2
2%
1
1%

Rate this Skill

0.0

Compatible Platforms

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

Timeline

Created2026年1月25日
Last Updated2026年4月27日
🎁 Agent Knowledge Cards