Stats
Actions
Tags
From product-designer
Micro-interactions and animation — covers Saffer's Trigger-Rules-Feedback-Loops framework, signature moments, scoring, motion principles, animation patterns, advanced techniques, and performance. Use when designing or auditing microinteractions, implementing loading animations, hover effects, button feedback, page transitions, scroll animations, pull-to-refresh, swipe gestures, toggles, modals, or toasts. Also covers physics-based motion, spring animations, Lottie, SVG animation, morphing, easing curves, orchestration, and 60fps performance with prefers-reduced-motion support. Triggers on: microinteraction, animation, motion, easing, spring physics, timing, duration, loading spinner, skeleton screen, hover effect, button press, page transition, scroll animation, parallax, pull-to-refresh, swipe gesture, toggle switch, modal animation, toast, Lottie, SVG animation, morphing, reduced motion, 60fps, orchestration, state transition.
How this skill is triggered — by the user, by Claude, or both
Slash command
/product-designer:microinteractions-animationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
From the conceptual framework (why and what to design) to the technical implementation (how to animate it). Covers Saffer's four-part design structure, signature moments, and case studies — plus motion principles, animation patterns, advanced techniques, and performance.
From the conceptual framework (why and what to design) to the technical implementation (how to animate it). Covers Saffer's four-part design structure, signature moments, and case studies — plus motion principles, animation patterns, advanced techniques, and performance.
| Question | Reference |
|---|---|
| What is a microinteraction and how do I design one? | .claude/skills/microinteractions-animation/design-framework.md → Core Principle |
| How do I score/audit a microinteraction? | .claude/skills/microinteractions-animation/design-framework.md → Scoring + Quick Diagnostic |
| How do I design the trigger? | .claude/skills/microinteractions-animation/design-framework.md → Triggers |
| How do I design rules and state? | .claude/skills/microinteractions-animation/design-framework.md → Rules |
| How do I design feedback for an interaction? | .claude/skills/microinteractions-animation/design-framework.md → Feedback |
| How do I handle loops and modes? | .claude/skills/microinteractions-animation/design-framework.md → Loops and Modes |
| How do I create a signature/iconic moment? | .claude/skills/microinteractions-animation/signature-moments.md |
| How do I design a form submission interaction? | .claude/skills/microinteractions-animation/case-studies.md → Case Study 1 |
| How do I design a toggle/switch? | .claude/skills/microinteractions-animation/case-studies.md → Case Study 2 |
| How do I design pull-to-refresh? | .claude/skills/microinteractions-animation/case-studies.md → Case Study 3 |
| How do I design loading states? | .claude/skills/microinteractions-animation/case-studies.md → Case Study 4 |
| How do I design toast notifications? | .claude/skills/microinteractions-animation/case-studies.md → Case Study 5 |
| What easing curve should I use? | .claude/skills/microinteractions-animation/motion-principles.md → Timing & Easing |
| How long should this animation be? | .claude/skills/microinteractions-animation/motion-principles.md → Duration |
| How do I sequence multiple animations? | .claude/skills/microinteractions-animation/motion-principles.md → Orchestration |
| How do I transition between two states? | .claude/skills/microinteractions-animation/motion-principles.md → State Transitions |
| How do I build a loading state? | .claude/skills/microinteractions-animation/animation-patterns.md → Loading Animations |
| How do I add hover effects? | .claude/skills/microinteractions-animation/animation-patterns.md → Hover Effects |
| How do I animate button presses? | .claude/skills/microinteractions-animation/animation-patterns.md → Click/Tap Feedback |
| How do I animate between screens? | .claude/skills/microinteractions-animation/animation-patterns.md → Page Transitions |
| How do I trigger animations on scroll? | .claude/skills/microinteractions-animation/animation-patterns.md → Scroll-Based Animation |
| How do I implement pull-to-refresh? | .claude/skills/microinteractions-animation/animation-patterns.md → Pull-to-Refresh |
| How do I animate swipe actions? | .claude/skills/microinteractions-animation/animation-patterns.md → Swipe Gestures |
| How do I animate toggles and switches? | .claude/skills/microinteractions-animation/animation-patterns.md → Toggle Animations |
| How do I animate modals and dialogs? | .claude/skills/microinteractions-animation/animation-patterns.md → Modal Animations |
| How do I animate toast notifications? | .claude/skills/microinteractions-animation/animation-patterns.md → Toast Notifications |
| How do I morph between shapes? | .claude/skills/microinteractions-animation/advanced-animation.md → Morphing |
| How do I use spring physics? | .claude/skills/microinteractions-animation/advanced-animation.md → Physics-Based Animation |
| How do I use Lottie animations? | .claude/skills/microinteractions-animation/advanced-animation.md → Lottie Animations |
| How do I animate SVGs? | .claude/skills/microinteractions-animation/advanced-animation.md → SVG Animation |
| How do I make loading feel faster? | .claude/skills/microinteractions-animation/advanced-animation.md → Loading Optimism |
| How do I use motion to guide attention? | .claude/skills/microinteractions-animation/advanced-animation.md → Attention Direction |
| How do I express brand through motion? | .claude/skills/microinteractions-animation/advanced-animation.md → Personality Expression |
| How do I keep animations at 60fps? | .claude/skills/microinteractions-animation/performance-accessibility.md → Animation Performance |
| How do I respect reduced motion? | .claude/skills/microinteractions-animation/performance-accessibility.md → Reduced Motion |
| How do I treat animation as enhancement? | .claude/skills/microinteractions-animation/performance-accessibility.md → Progressive Enhancement |
Motion Principles (the rules behind all motion)
└── Timing & Easing → Duration → Orchestration
→ Continuity → State Transitions
Animation Patterns (apply principles to specific UI elements)
└── Loading → Hover → Click/Tap → Page Transitions
→ Scroll → Pull-to-Refresh → Swipe → Toggle
→ Modal → Toast
Advanced Animation (specialized techniques)
└── Morphing → Physics-Based → Lottie → SVG
→ Loading Optimism → Attention Direction → Personality
Performance & Accessibility (make it fast and inclusive)
└── Animation Performance → Reduced Motion
→ Progressive Enhancement
.claude/skills/microinteractions-animation/design-framework.md for: Saffer's Trigger-Rules-Feedback-Loops structure, state design, scoring (0–10), diagnostic checklist, common mistakes.claude/skills/microinteractions-animation/signature-moments.md for: what makes a moment signature, iconic examples (Slack, Stripe, Facebook Like), where to invest, creation process.claude/skills/microinteractions-animation/case-studies.md for: detailed breakdowns of form submission, toggle, pull-to-refresh, loading states, toast notifications — with edge cases and platform notes.claude/skills/microinteractions-animation/motion-principles.md for: timing & easing, duration, orchestration, continuity, state transitions.claude/skills/microinteractions-animation/animation-patterns.md for: loading, hover, click/tap, page transitions, scroll, pull-to-refresh, swipe, toggle, modal, toast.claude/skills/microinteractions-animation/advanced-animation.md for: morphing, physics-based, Lottie, SVG, loading optimism, attention direction, personality expression.claude/skills/microinteractions-animation/performance-accessibility.md for: 60fps performance, reduced motion, progressive enhancementGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub waqarahmed-design/product-designer-agent --plugin product-designer