What kind of UI patterns are included?

It covers loading states, skeleton screens, ripple effects, page transitions, toggle animations, and gesture-based interactions like swipe-to-dismiss.

Can it help with web accessibility?

Absolutely. It includes guidelines for respecting 'prefers-reduced-motion' and ensuring animations don't hinder usability or cause issues for sensitive users.

Does this skill support Framer Motion?

Yes, it includes specific patterns and best practices for implementing high-performance animations using the Framer Motion library for React.

What is the Interaction Design Claude Code skill?

It is a specialized capability that helps Claude implement professional UI animations, microinteractions, and motion design patterns directly in your codebase.

Is it compatible with standard CSS?

Yes, the skill provides both standard CSS keyframe animation patterns and modern JavaScript-based animation logic for maximum flexibility.

Interaction Design

Name: Interaction Design
Author: wshobson

bywshobson

•

26,570

•

디자인 도구

Implements high-quality microinteractions, motion design, and responsive state transitions to enhance user experience and UI polish.

The Interaction Design skill empowers Claude to create polished, intuitive user interfaces by applying professional motion principles and feedback patterns. It provides expert guidance on animation timing, easing functions, and state transitions using modern tools like Framer Motion and standard CSS. By focusing on purposeful motion and accessibility, this skill helps developers build delightful loading states, gesture-based interactions, and accessible UI components that respect user preferences like reduced motion, ensuring a seamless and engaging experience for all users.

주요 기능

01Accessible UI feedback and state transitions

02Skeleton screen and progress indicator implementations

0326,570 GitHub stars

04Framer Motion and CSS animation patterns

05Professional motion timing and easing guidelines

06Gesture-based interaction and swipe-to-dismiss logic

사용 사례

01Adding delightful microinteractions to buttons and navigation elements

02Implementing smooth page transitions in React or Next.js applications

03Designing accessible loading states and skeleton screens for data-heavy views

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add wshobson/agents interaction-design

For use in Claude.ai and ChatGPT

Download Skill