skills.rest
SpinBoxx
SpinBoxxCOMMUNITY
Explore all skills by this author →
GitHub

interaction-design

Design microinteractions and motion for web and mobile interfaces in React ecosystems.

Updated Aug 27, 2026
Search Tags:#accessibility#framer-motion#interaction-design#microinteractions#motion-design#ui-feedback
One-click install
npx skills add https://github.com/SpinBoxx/turborepo-boilerplate --skill interaction-design-spinboxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interaction-design
Source: https://github.com/SpinBoxx/turborepo-boilerplate/tree/main/.agents/skills/interaction-design
Command: npx skills add https://github.com/SpinBoxx/turborepo-boilerplate --skill interaction-design-spinboxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design and implement microinteractions, motion design, transitions, and user feedback patterns to add polish to user interfaces and improve perceived responsiveness.

Core Features & Use Cases

  • Create purposeful motion to communicate state changes, provide context, and guide user attention.
  • Implement loading states, hover and focus states, and gesture-driven patterns like drag-and-drop and swipe-to-dismiss.
  • Establish accessibility-conscious motion guidelines, ensuring users with reduced motion preferences are respected.

Quick Start

Design a loading button with a spinner and provide accessibility-friendly timing guidelines for motion.

Frequently Asked Questions about interaction-design

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

FAQPage Schema
How do I design accessible microinteractions for React interfaces?▼

Accessible microinteractions respect reduced motion preferences by providing alternative non-animated feedback. This Skill supplies motion guidelines, timing, and easing patterns specifically for React ecosystems to ensure UI feedback remains usable.

What is the best way to add loading states and hover feedback to web UI?▼

Adding loading states and hover feedback requires purposeful motion design to communicate state changes. This Skill provides practical code patterns to implement these UI feedback states and improve perceived responsiveness.

How do I implement gesture-driven interactions like swipe-to-dismiss?▼

Implementing gesture-driven interactions like swipe-to-dismiss involves applying motion design principles to track user input. This Skill offers practical code patterns for building drag-and-drop and swipe gestures across web and mobile interfaces.

Can I use framer-motion to build UI transitions and microinteractions?▼

Framer-motion can be used to build UI transitions and microinteractions within React ecosystems. This Skill provides timing, easing guidelines, and practical code patterns tailored for motion design implementation.

When should I use motion design to guide user attention?▼

Motion design should be used to guide user attention when communicating state changes and providing context. This Skill establishes principled guidelines to create purposeful transitions rather than decorative animations.

Does this Skill provide timing and easing guidelines for UI feedback?▼

This Skill provides specific timing and easing guidelines for UI feedback to ensure polished microinteractions. It includes accessibility considerations to accommodate users with reduced motion preferences.

Related Skills

Explore More Design & Creative Skills→
seanmcquaidseanmcquaid
8

migrate-radix-to-base

Migrate React components from Radix UI to Base UI.

Community
Advanced
MaggieAppletonMaggieAppleton
160

interaction-design

Implement microinteractions, motion design, and feedback patterns in UI.

Community
Intermediate
algusaemalgusaem

react-ui-patterns

Codify loading, error, and empty state patterns for React components.

Community
Basic
FAeN399FAeN399

ui-component-design

Design reusable HTML, CSS, and JavaScript UI components with BEM patterns.

Community
Advanced