interaction-design

面向 UI 交互设计，覆盖微交互、动效、过渡、加载状态、手势、悬停/聚焦、通知与滚动触发动画，并给出 Framer Motion、CSS 性能、弹簧动画、可中断性和减少动态效果偏好等约定。

热度 0.00

最近更新 2026-10-19 06:44:36

分类：开发依赖：纯提示词应用场景：代码生成

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add poteto/noodle/interaction-design

Metadata

name: interaction-design
description: Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, creating gesture-based interactions, designing hover/focus states, building notification/toast systems, adding scroll-triggered animations, implementing drag-and-drop, or creating delightful user experiences.

Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions.

Preferred library: Framer Motion for React component animations
CSS animations: Use transform and opacity only for 60fps performance
Spring physics: Prefer spring animations over linear/eased for interactive elements
Interruptible: Users must be able to cancel or override any animation

Duration	Use Case
100-150ms	Micro-feedback (hovers, clicks)
200-300ms	Small transitions (toggles, dropdowns)
300-500ms	Medium transitions (modals, page changes)
500ms+	Complex choreographed animations

Always respect prefers-reduced-motion: reduce. Set animation duration to 0 when the user prefers reduced motion. This is non-negotiable.

Read these on demand based on the task:

File	When to read
animation-libraries.md	Choosing or configuring Framer Motion, GSAP, or CSS-based approaches
microinteraction-patterns.md	Building button feedback, toggles, ripples, loading indicators, toasts
scroll-animations.md	Implementing scroll-triggered reveals, parallax, or intersection-based animations