What libraries does this skill utilize?

While it provides standard CSS-based solutions, it specializes in Framer Motion patterns for React-based interactive elements and state transitions.

Does this skill support accessibility?

Yes, it includes specific guidelines and code patterns for respecting 'prefers-reduced-motion' settings to ensure an inclusive design for all users.

Is it suitable for mobile web applications?

Absolutely. The skill includes gesture-based patterns like swipe-to-dismiss and touch-optimized feedback that are essential for modern mobile web experiences.

Can it help with page load speeds?

It improves perceived performance by implementing skeleton screens and progress indicators that keep users engaged during data fetching and background processes.

Interaction Design & Motion

Name: Interaction Design & Motion
Author: gwickman

bygwickman

0•

Herramientas de Diseño

Implements fluid microinteractions, motion systems, and accessible transitions to enhance user experience and interface polish.

This skill empowers Claude to design and implement sophisticated interaction patterns, ranging from subtle button feedback to complex page transitions. By utilizing industry-standard timing guidelines and easing functions, it ensures that animations are purposeful rather than decorative. It includes pre-defined patterns for loading states, gesture-based interactions like swipe-to-dismiss, and essential accessibility configurations, making it an indispensable tool for frontend developers looking to bridge the gap between static mockups and high-fidelity, interactive web applications.

Características Principales

010 GitHub stars

02Built-in accessibility support for reduced-motion user preferences

03Gesture-based interaction patterns like swipe-to-dismiss and drag-and-drop

04Choreographed page and component transitions using Framer Motion and CSS

05Microinteraction implementation for buttons, toggles, and hover states

06Design and coding of loading states including skeleton screens and progress bars

Casos de Uso

01Adding professional polish to a React application using Framer Motion

02Improving perceived performance with skeleton screens and loading indicators

03Creating intuitive navigation through smooth, context-aware page transitions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gwickman/auto-dev-test-target-1 interaction-design

For use in Claude.ai and ChatGPT

Download Skill