skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

interaction-designer

Design motion specs for interface interactions with timing, easing, and reduced-motion fallbacks.

2|1|Updated May 17, 2026
Search Tags:#animation#ui design#transitions#micro-interactions#motion design#easing
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill interaction-designer-rakibulism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interaction-designer
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/interaction-designer
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill interaction-designer-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design motion that improves usability instead of adding decoration. It clarifies what changed, guides attention, and makes interactions feel smooth, fast, and understandable.

Core Features & Use Cases

  • Micro-interaction design: Define button presses, toggles, hover states, toasts, and feedback animations with clear purpose.
  • Transition planning: Specify enter, exit, layout, and page transition timing so interface changes feel continuous.
  • Implementation-ready output: Produce a motion spec with duration, easing, triggers, reduced-motion behavior, and optional CSS or Framer Motion code.
  • Use case: A designer wants a modal to open from the clicked card with subtle fade and scale behavior, plus a reduced-motion fallback for accessibility.

Quick Start

Design the interaction for a modal opening from a list item and include the timing, easing, trigger, reduced-motion behavior, and implementation code if needed.

Frequently Asked Questions about interaction-designer

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

FAQPage Schema
How do I design micro-interactions with proper timing and easing for web UI?▼

Designing micro-interactions requires specifying duration, easing curves, and triggers to make UI changes feel smooth. This Skill generates structured motion specs for hover states and loading feedback, ensuring interactions guide attention and improve usability.

What's the best way to plan interface transitions that feel continuous?▼

Planning interface transitions involves defining enter, exit, and layout timing so changes feel continuous rather than abrupt. This Skill produces transition plans with clear timing and easing to clarify what changed and maintain perceived performance across app UI.

Does this approach provide motion specs with reduced-motion fallbacks for accessibility?▼

Yes, motion specs include accessibility-aware behavior with reduced-motion fallbacks. This Skill ensures animation guidance specifies reduced-motion behavior alongside duration and easing, allowing interfaces to remain usable for users with motion sensitivities.

Can I get implementation-ready code for Framer Motion or CSS animations?▼

Yes, you can get optional code output for CSS, Framer Motion, or web animation APIs. This Skill produces implementation-ready motion specs with GPU-friendly properties, allowing direct integration of transition timing and micro-interactions into web projects.

When do I need to specify GPU-friendly properties for UI animation?▼

You need GPU-friendly properties when animations must maintain smooth perceived performance without jarring frame drops. This Skill applies motion specs using GPU-friendly properties to ensure hover states, toggles, and transitions remain fast and responsive.

Related Skills

Explore More Design & Creative Skills→
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced
shige1014-devshige1014-dev

framer-motion

Implement Disney's 12 animation principles in React with Framer Motion.

Community
Intermediate
gustavscirulisgustavscirulis
114

interaction-design

Design and implement microinteractions, motion design, and transitions with Framer Motion.

Community
Intermediate
gyalamanch001agyalamanch001a

gsap-timeline

Sequence GSAP animation tweens into coordinated timelines with position parameters and labels.

Community
Intermediate