interaction-design

Design interaction patterns and state machines for user flows and prototypes.

1|1|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/teslasoft-de/claude-skills-marketplace --skill interaction-design-teslasoft-de
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interaction-design
Source: https://github.com/teslasoft-de/claude-skills-marketplace/tree/main/plugins/ux/skills/interaction-design
Command: npx skills add https://github.com/teslasoft-de/claude-skills-marketplace --skill interaction-design-teslasoft-de

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Interaction design defines how users interact with digital products, bridging user needs and system capabilities through controls, feedback, and information flows to reduce cognitive load and friction.

Core Features & Use Cases

  • Define and document user flows, screen lists, and state requirements to ensure coherent experiences.
  • Create wireframes, prototypes, and micro-interactions with clear annotations for developers and researchers.
  • Perform heuristic reviews, accessibility considerations, and design-system-aligned handoffs to streamline collaboration.
  • Example scenario: designing a login/signup flow with clear state transitions, feedback, and error handling.

Quick Start

Create a basic IxD deliverable by mapping a user task, sketching key screens, and annotating component states.

Frequently Asked Questions about interaction-design

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

FAQPage Schema
How do I design user flows and state machines for complex interfaces?

Designing user flows and state machines involves mapping user tasks, defining screen states, and annotating transitions to ensure coherent experiences. This approach reduces cognitive load by clarifying controls, feedback, and information flows across traditional and spatial interfaces.

What is interaction design and when do I need it for my prototype?

Interaction design is the process of defining how users interact with digital products through controls, feedback, and information flows. You need it when bridging user needs and system capabilities to reduce friction, ensuring intuitive micro-interactions and clear state transitions in prototypes.

Can I apply usability heuristics to validate spatial and conversational interfaces?

Applying usability heuristics to validate interfaces extends beyond traditional screens to emerging paradigms like spatial, conversational, and gesture-based interfaces. It involves performing heuristic reviews and accessibility considerations to document deliverables such as user flows and prototype specifications.

What's the best way to document micro-interactions and component states for developer handoff?

The best way to document micro-interactions for handoff is creating wireframes and prototypes with clear annotations for developers. This includes specifying component states, state diagrams, and design-system-aligned deliverables to streamline collaboration.

How do I map state transitions and error handling for a login signup flow?

Mapping state transitions for a login signup flow requires defining clear state requirements, feedback mechanisms, and error handling. You sketch key screens, annotate component states, and document user flows to ensure a coherent, low-friction authentication experience.