What is an Interaction Specification?

It is a structured template provided by this skill that defines component states (hover, active, error), timing values (ease-out), keyboard behaviors, and recovery paths.

How does this skill improve UI development?

It shifts the focus from static visuals to dynamic behaviors, ensuring components respond logically to user input while preventing common interaction errors using cognitive design principles.

Can it help with accessibility compliance?

Yes, it includes specific output contracts for focus management, screen reader announcements, and reduced motion behavior across Web, iOS, and Android.

When should I use the Flow Analysis feature?

Use it when mapping out multi-step user journeys to identify 'excise' work (unnecessary steps), analyze friction, and ensure a clear path to user success.

Interaction Design

Name: Interaction Design
Author: petekp

bypetekp

•

Design Tools

Design intuitive, goal-directed user interactions grounded in cognitive principles and behavioral science.

About

This skill empowers Claude to act as an expert interaction designer, focusing on how users accomplish specific goals with minimum friction and maximum meaning. It provides structured templates for detailed interaction specifications and flow analyses, applying core IxD principles like direct manipulation, error prevention, and cognitive load reduction. Whether you are deciding between modal and modeless interfaces, defining precise transition timings, or auditing accessibility, this skill ensures your interfaces are responsive, humane, and professional across web, mobile, and desktop platforms.

Key Features

Platform-specific guidance for Web, iOS, Android, and Desktop accessibility
Cognitive error prevention strategies for reducing slips and mistakes
Interaction Specification templates for defining states, transitions, and emotional tone
Flow Analysis framework to map user journeys, friction points, and dramatic arcs
Direct manipulation patterns and reversibility mechanisms for user safety
1 GitHub stars

Use Cases

Designing complex component behaviors and state transitions for design systems
Auditing existing user flows to eliminate unnecessary 'excise' work and friction
Creating accessible keyboard and touch-based navigation patterns

About

Key Features

Platform-specific guidance for Web, iOS, Android, and Desktop accessibility
Cognitive error prevention strategies for reducing slips and mistakes
Interaction Specification templates for defining states, transitions, and emotional tone
Flow Analysis framework to map user journeys, friction points, and dramatic arcs
Direct manipulation patterns and reversibility mechanisms for user safety
1 GitHub stars

Use Cases

Designing complex component behaviors and state transitions for design systems
Auditing existing user flows to eliminate unnecessary 'excise' work and friction
Creating accessible keyboard and touch-based navigation patterns