Does this skill support Framer Motion?

Yes, it is specifically optimized for Framer Motion 11 to handle smooth scaling, transitions, and gesture-based states.

How does it handle accessibility?

The skill implements focus-visible rings to ensure keyboard users can navigate effectively, and handles disabled states to prevent improper interactions.

Does it enforce design best practices?

Yes, it enforces specific timing constraints (50-100ms for hovers) and provides a validation checklist to ensure no interaction feedback is missed.

What interactive states are covered?

It covers five core states: Default, Hover, Pressed (Active), Focus, and Disabled, plus a dedicated Loading state with spinner logic.

Interactive UI States

Name: Interactive UI States
Author: fusengine

byfusengine

•

设计工具

Implements accessible, high-performance interactive states for buttons, forms, and UI components using Framer Motion.

The Interactive UI States skill standardizes the implementation of tactile feedback across web applications by automating the creation of hover, active, focus, disabled, and loading states. By leveraging Framer Motion and Tailwind CSS patterns, it ensures consistent animation timing (50-150ms) and strict accessibility compliance, such as focus-visible rings for keyboard navigation. This skill utilizes a specialized agent workflow to explore existing codebases and validate implementations, ensuring every interactive element provides clear, production-grade visual feedback to the user.

主要功能

012 GitHub stars

02Accessibility-first focus-visible and ARIA-compliant patterns

03Framer Motion integration for smooth micro-interactions

04Automated validation of interaction timing and state coverage

05Built-in loading state patterns with animated spinner support

06Standardized interaction patterns for buttons, inputs, and cards

使用场景

01Building a consistent design system component library

02Implementing production-ready loading and disabled states for complex forms

03Enhancing application accessibility and keyboard navigation feedback

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents interactive-states

For use in Claude.ai and ChatGPT

主要功能

012 GitHub stars

02Accessibility-first focus-visible and ARIA-compliant patterns

03Framer Motion integration for smooth micro-interactions

04Automated validation of interaction timing and state coverage

05Built-in loading state patterns with animated spinner support

06Standardized interaction patterns for buttons, inputs, and cards

使用场景

01Building a consistent design system component library

02Implementing production-ready loading and disabled states for complex forms

03Enhancing application accessibility and keyboard navigation feedback

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents interactive-states

For use in Claude.ai and ChatGPT