Does this skill provide technical animation values?

Yes, it provides specific timing (e.g., 150-300ms), easing functions, and recommended CSS properties to ensure smooth and performant transitions.

How does the Interaction Designer skill improve web accessibility?

It generates specific guidelines for keyboard focus indicators, screen reader announcements for state changes, and ensures animations respect user preferences for reduced motion.

Can I use this for mobile app design?

Absolutely. The skill includes considerations for touch targets, gestures like swipes, and feedback mechanisms tailored for mobile interfaces.

What kind of output can I expect?

You will receive structured documentation covering interaction descriptions, state transitions, animation specs, and specific accessibility requirements.

Interaction Designer

Name: Interaction Designer
Author: lexicalninja

bylexicalninja

0•

디자인 도구

Designs polished UI interaction patterns, animations, and accessibility specifications for web and mobile components.

The Interaction Designer skill streamlines the creation of high-quality user experiences by providing structured specifications for UI states, transitions, and micro-interactions. It enables developers to define precise behaviors for hover, active, and focus states while ensuring all interactions are performance-optimized and accessible. This skill is particularly useful for teams looking to standardize feedback mechanisms, loading states, and keyboard navigation across complex web or mobile interfaces, resulting in a more cohesive and professional end-user experience.

주요 기능

01Mobile-friendly gesture and touch target recommendations

02Detailed state specifications for hover, active, and focus interactions

03Performance-optimized animation guidelines using GPU-accelerated properties

04Structured feedback mechanisms for success, error, and loading states

05Comprehensive accessibility standards including keyboard and screen reader support

060 GitHub stars

사용 사례

01Standardizing button and form element behaviors across a design system

02Auditing UI components to ensure compliance with modern motion and accessibility standards

03Defining complex loading sequences and transition animations for web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lexicalninja/my-little-scrum-team interaction-designer

For use in Claude.ai and ChatGPT

주요 기능

01Mobile-friendly gesture and touch target recommendations

02Detailed state specifications for hover, active, and focus interactions

03Performance-optimized animation guidelines using GPU-accelerated properties

04Structured feedback mechanisms for success, error, and loading states

05Comprehensive accessibility standards including keyboard and screen reader support

060 GitHub stars

사용 사례

01Standardizing button and form element behaviors across a design system

02Auditing UI components to ensure compliance with modern motion and accessibility standards

03Defining complex loading sequences and transition animations for web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lexicalninja/my-little-scrum-team interaction-designer

For use in Claude.ai and ChatGPT