interaction-designer

Generate interaction specifications with states, animation timing, and accessibility notes.

2|Updated Jan 15, 2026

Search Tags:#design #accessibility #animations #ux #transitions #micro-interactions #interactions

Ready to run

npx skills add https://github.com/lexicalninja/my-little-scrum-team --skill interaction-designer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: interaction-designer
Source: https://github.com/lexicalninja/my-little-scrum-team/tree/main/skills/interaction-designer
Command: npx skills add https://github.com/lexicalninja/my-little-scrum-team --skill interaction-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs consistent, accessible UI interaction patterns to close gaps between design and implementation and ensure performant behavior across platforms.

Core Features & Use Cases

Define hover, active, focus, loading, and micro-interaction states with precise descriptions.
Specify animation timing, easing, and transitions for common UI patterns.
Provide accessibility guidelines (keyboard navigation, screen reader announcements, reduced motion) to ensure inclusive design.

Quick Start

Describe an interaction you want, and I will return a complete specification with states, animations, timing, and accessibility notes.

Frequently Asked Questions about interaction-designer

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

FAQPage Schema

How do I design accessible UI micro-interactions?▼

Accessible UI micro-interactions require structured state definitions, animation timing, and accessibility considerations like keyboard navigation and reduced motion. You generate precise specifications for hover, active, focus, and loading states to ensure inclusive and performant component behavior.

What is the best way to specify animation timing for UI transitions?▼

Specifying animation timing for UI transitions involves defining exact easing curves and durations for each component state. This provides structured state definitions and transition guidelines to drive consistent implementation across web and mobile interfaces.

How do I ensure consistent UI interaction states across web and mobile?▼

Consistent UI interaction states across web and mobile are achieved by generating precise specifications for hover, active, focus, and loading behaviors. This delivers structured state definitions and accessibility notes to close gaps between design and implementation.

Does this approach support screen reader announcements for micro-interactions?▼

Yes, supporting screen reader announcements for micro-interactions is a core accessibility guideline. The specification includes keyboard navigation, screen reader behaviors, and reduced motion considerations to ensure inclusive design across all UI patterns.

When do I need a formal specification for UI hover and focus states?▼

You need a formal specification for UI hover and focus states when closing gaps between design and implementation. Generating structured state definitions, animation timing, and accessibility considerations ensures performant behavior and consistent implementation across platforms.

What are the limitations of generating UI interaction specifications?▼

Limitations of generating UI interaction specifications include providing guidance rather than direct code output. It delivers structured state definitions and accessibility considerations for designers and developers, meaning you still need to manually implement the specified animation timing and transitions in your framework.