skills.rest
cuellarfr
cuellarfrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/cuellarfr/design-skills --skill interaction-design-cuellarfr
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
kmshihab7878kmshihab7878
6

design-inspector

Extract design tokens, component inventory, and interaction patterns from live websites via Playwright MCP browser automation.

Community
Advanced
Hey-ViswaHey-Viswa

airtable-design-skill

Translate Airtable design-system patterns into implementation-ready UI guidance for React/Next.js projects.

Community
Intermediate
mahg-esmahg-es
3

animation

Animate UI transitions and state changes with transform and opacity.

Official
Intermediate
Xza85hrfXza85hrf

interactive-code-explanations

Generate interactive visual explanations for complex algorithms and state machines.

Community
Advanced