skills.rest
kimmyxpow
kimmyxpowCOMMUNITY
Explore all skills by this author →
GitHub

interaction-design

Design microinteractions and state feedback for web and mobile interfaces.

Updated Feb 2, 2026
Search Tags:#accessibility#ux#transitions#motion#design-patterns#interaction-design#microinteractions
One-click install
npx skills add https://github.com/kimmyxpow/focus --skill interaction-design-kimmyxpow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interaction-design
Source: https://github.com/kimmyxpow/focus/tree/main/.claude/skills/interaction-design
Command: npx skills add https://github.com/kimmyxpow/focus --skill interaction-design-kimmyxpow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps product teams design and implement polished, intuitive UI interactions by providing a framework for microinteractions, motion design, transitions, and feedback patterns. It helps reduce ambiguity and ensure consistent UX across components.

Core Features & Use Cases

  • Motion & Transitions: Design and implement smooth state changes, page transitions, and component micro-interactions.
  • Feedback Patterns: Provide tactile-like feedback, toasts, skeleton states, progress indicators.
  • Accessibility-First Motion: Ensure motion respects reduced motion preferences and supports inclusive UX.
  • Use Case: Implement loading skeletons, hover effects, drag-and-drop feedback, and toast notifications across apps.

Quick Start

Prototype a button microinteraction: add a hover scale (1.02x) and a press effect using CSS or a motion library; ensure motion respects reduced-motion preferences and performance budgets.

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 UI components?▼

Design accessible microinteractions by enforcing reduced-motion preferences and utilizing CSS transforms and opacity to ensure smooth, performant state feedback across web and mobile interfaces.

What are the best practices for adding loading states and feedback patterns?▼

Best practices for loading states involve implementing skeleton states, progress indicators, and toast notifications to provide meaningful state feedback and reduce ambiguity during component loading.

How do I create smooth page transitions without hurting performance?▼

Create smooth page transitions by relying on CSS transforms and opacity for motion design, ensuring high performance and modular, reusable interaction patterns across your application.

Does this approach to motion design support mobile gesture interactions?▼

Yes, this motion design approach covers gesture interactions across mobile interfaces, providing tactile-like feedback and consistent UX for drag-and-drop and touch components.

Why should I use modular interaction patterns for UI feedback?▼

Use modular interaction patterns to ensure consistent UX across components, reduce ambiguity in state changes, and provide polished, reusable microinteractions throughout your product.

When should I not use complex motion in my UI transitions?▼

Avoid complex UI transitions when users have reduced-motion preferences enabled, as accessible motion design requires respecting these settings to support an inclusive user experience.

Related Skills

Explore More Design & Creative Skills→
LVTD-LLCLVTD-LLC

design-taste-editorial-premium

Generates React/Next.js publication-style UI with adjustable Taiwind-based design variance, motion intensity, and visual density for editorial interfaces.

Official
Advanced
MrlykMrlyk

animate

Analyze frontend features and design animation plans with timing, easing, and accessibility constraints.

Community
Advanced
potetopoteto
218

interaction-design

Design microinteractions, motion design, and state transitions for web and mobile interfaces.

Community
Advanced
ParamPatel14ParamPatel14

interaction-design

Design microinteractions, transitions, and loading states with Framer Motion and CSS.

Community
Intermediate