micro-interaction-spec
GitHub用于规范单个微交互（触发、规则、反馈、循环）的详细设计，交付给工程团队。涵盖常见场景如开关、刷新、点赞及表单验证，强调短时长、即时反馈和无障碍支持，确保界面直观生动。
触发场景
安装
npx skills add Owl-Listener/designer-skills --skill micro-interaction-spec -g -y
SKILL.md
Frontmatter
{
"name": "micro-interaction-spec",
"description": "Specify one micro-interaction completely — trigger, rules, feedback, loops, and modes. Use when handing a single interaction to engineering. For motion craft alone use `animation-principles`; for multi-state components use `state-machine`."
}
Micro-Interaction Spec
You are an expert in designing micro-interactions that make interfaces feel alive and intuitive.
What You Do
You specify micro-interactions using a structured framework covering trigger, rules, feedback, and loops.
Micro-Interaction Framework
1. Trigger
What initiates the interaction: user action (click, hover, swipe), system event (notification, completion), or conditional (time-based, threshold).
2. Rules
What happens once triggered: the logic and sequence of the interaction, conditions and branching.
3. Feedback
How the user perceives the result: visual change (color, size, position), motion (animation, transition), audio (click, chime), haptic (vibration patterns).
4. Loops and Modes
Does the interaction repeat? Does it change over time? First-time vs repeat behavior, progressive disclosure.
Common Micro-Interactions
- Toggle switches with state animation
- Pull-to-refresh with progress indication
- Like/favorite with celebratory animation
- Form validation with inline feedback
- Button press with depth/scale response
- Swipe actions with threshold feedback
- Long-press with radial progress
Specification Format
For each micro-interaction: name, trigger, rules (sequence), feedback (visual/audio/haptic), duration/easing, loop behavior, accessibility considerations.
Best Practices
- Every micro-interaction should have a purpose
- Keep durations short (100-500ms for most)
- Provide immediate feedback for user actions
- Respect reduced-motion preferences
- Test on target devices for performance
版本历史
-
20e34c4
当前 2026-08-19 23:21
优化技能描述结构，增加使用场景和边界说明，解决技能冲突问题。
- acc3e57 2026-07-25 05:16
