skills.rest
ShadowAUS
ShadowAUSCOMMUNITY
Explore all skills by this author →
GitHub

interaction-design

Define interaction-design skill units with SKILL.md frontmatter and Markdown body.

Updated Aug 23, 2026
Search Tags:#accessibility#ux#interaction-design#microinteractions#loading-states#animation-guidelines
One-click install
npx skills add https://github.com/ShadowAUS/chez-king-portal --skill interaction-design-shadowaus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interaction-design
Source: https://github.com/ShadowAUS/chez-king-portal/tree/main/.tessl/tiles/secondsky/claude-skills/plugins/interaction-design/skills/interaction-design
Command: npx skills add https://github.com/ShadowAUS/chez-king-portal --skill interaction-design-shadowaus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Users often struggle with inconsistent feedback and inaccessible interactions. This Skill provides a structured set of patterns, guidelines, and examples to create cohesive, responsive, and inclusive UI experiences.

Core Features & Use Cases

  • Pattern catalog for microinteractions, transitions, and entrances that improve perceived performance.
  • Accessibility-focused guidance including keyboard navigation and respect for reduced motion.
  • Practical examples covering loading, error, and empty states for common interfaces.

Quick Start

Describe a UI interaction using the interaction design guidelines to improve feedback during user actions.

Frequently Asked Questions about interaction-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design microinteractions and loading states that improve perceived performance?▼

Define UI interaction patterns using structured guidelines to improve feedback during user actions across web and mobile. The Skill provides a catalog of patterns for transitions, entrances, and microinteractions to enhance perceived performance.

How do I handle error and empty states in UX consistently across web and mobile?▼

Apply practical interaction examples covering loading, error, and empty states to ensure consistent feedback across web and mobile interfaces. The Skill provides structured guidelines to create cohesive and responsive UI experiences.

What are the best animation guidelines for respecting reduced motion and keyboard navigation in UI?▼

The best animation guidelines for reduced motion and keyboard navigation prioritize accessibility-focused interaction patterns. They ensure digital products respect user preferences by providing structured guidance for inclusive touch interactions and keyboard-based UI navigation.

Does this interaction design approach work for both web and mobile touch interactions?▼

Yes, this interaction design approach works for both web and mobile touch interactions. It streamlines the creation of intuitive user interactions and provides applicable patterns for loading states, error handling, and animation guidelines across digital products.

Why do users struggle with inconsistent feedback and inaccessible interactions in digital products?▼

Users struggle with inconsistent feedback and inaccessible interactions due to unstructured UI design approaches. This Skill solves the problem by providing a structured set of patterns, guidelines, and examples to create cohesive, responsive, and inclusive UI experiences.

Related Skills

Explore More Design & Creative Skills→
remiconnessonremiconnesson

ui-design

Identify accessibility, layout, typography, color, form, and motion issues in HTML and CSS.

Community
Advanced
smithisrealdevsmithisrealdev

animation-designer

Design and implement web animations with Framer Motion and CSS.

Community
Intermediate
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
travisjneumantravisjneuman
88

generic-fullstack-ux-designer

Analyze full-stack application UI/UX designs using UX principles and development considerations.

Community
Intermediate