Can this skill help with performance during animations?

Yes, it provides specific guidelines on animation durations (e.g., keeping transitions under 500ms) to ensure the UI feels responsive and not sluggish.

What is the Interaction Design skill for Claude Code?

It is a specialized capability that provides Claude with best practices and code patterns for creating intuitive user feedback, animations, and accessible interfaces.

What frameworks are supported by these interaction patterns?

The skill provides patterns for CSS and React, but the underlying design principles and timings can be applied to any frontend framework.

Does this skill support web accessibility?

Yes, it includes patterns for ARIA live regions, screen reader announcements, and respects 'prefers-reduced-motion' settings.

How do I implement skeleton screens with this skill?

The skill includes specialized CSS shimmer animations and React component structures designed specifically for skeleton loading states.

Interaction Design

Name: Interaction Design
Author: secondsky

bysecondsky

•

デザインツール

Implements intuitive user experiences through microinteractions, feedback patterns, and accessible design guidelines.

The Interaction Design skill for Claude Code provides specialized guidance and implementation patterns for creating responsive, accessible, and user-centric interfaces. It equips developers with the tools to design fluid loading states, robust error handling, meaningful empty states, and standardized animation durations, ensuring that every digital interaction feels intentional and polished. This skill is particularly useful for frontend developers looking to bridge the gap between static design and dynamic, interactive user experiences while adhering to modern accessibility standards like reduced-motion preferences and keyboard navigation.

主な機能

01Standardized microinteraction and transition patterns

02Aria-live status announcers for screen readers

0321 GitHub stars

04Skeleton loaders and shimmer animation components

05Performance-optimized animation and motion guidelines

06Accessible error and empty state implementations

ユースケース

01Implementing accessible feedback for form submissions and validation errors

02Creating meaningful empty states for data-driven dashboards and lists

03Designing smooth transitions and loading states for single-page applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills interaction-design

For use in Claude.ai and ChatGPT

Download Skill