Interaction Design

Codify interaction behaviors using trigger, rules, feedback, and loops specifications.

47|4|Updated Mar 19, 2026

Search Tags:#accessibility #ux #interaction-design #design-systems #microinteractions #motion-design #state-machines

Ready to run

npx skills add https://github.com/cuellarfr/design-skills --skill interaction-design-cuellarfr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Interaction Design
Source: https://github.com/cuellarfr/design-skills/tree/main/interaction-design
Command: npx skills add https://github.com/cuellarfr/design-skills --skill interaction-design-cuellarfr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps teams codify and optimize how products behave in response to user input, turning abstract ideas about interactions into concrete, reusable design guidance.

Core Features & Use Cases

Microinteraction framework (trigger, rules, feedback, loops) to design reliable, observable behavior.
State design and orchestration guidance, including state machines, motion principles, and accessibility considerations for multi-platform products.
Narrative and excise frameworks to improve flow, reduce unnecessary complexity, and align product stories with user goals.

Quick Start

Create a four-part microinteraction spec for your chosen interaction by detailing its trigger, rules, feedback, and loops, and map the resulting states and success criteria to ensure predictable behavior.

Frequently Asked Questions about Interaction Design

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

FAQPage Schema

How do I specify microinteractions for a design system?▼

Design system state machines map interaction states and transitions to prevent unpredictable UI behavior. This approach orchestrates complex state design, ensuring observable and reliable product behavior across multi-platform products.

What is the best way to document interaction states and motion principles?▼

Document interaction states and motion principles using state machines and a narrative framework. This reduces unnecessary complexity, addresses accessibility considerations, and aligns product stories with user goals for reliable behavior.

How do I reduce excise and unnecessary complexity in UX flows?▼

Reduce excise and unnecessary complexity in UX flows by applying narrative and excise frameworks. This optimizes product behavior, improves flow, and aligns the product story with user goals to create delightful, predictable experiences.

Can I use this interaction design framework for both web and mobile UX audits?▼

Yes, you can use this interaction design framework for web and mobile UX audits. It applies to multi-platform product design workflows, helping teams codify behavior, map states, and address accessibility across different platforms.

Why does my product interaction behavior feel unpredictable to users?▼

Product interaction behavior feels unpredictable when triggers, rules, feedback, and loops are loosely defined. Codifying these elements into a structured microinteraction specification ensures robust, observable, and reliable state transitions.