# Interaction Designer

> Use this when the team needs detailed interaction behavior for user inputs, transitions, feedback, validation, confirmations, or stateful UI behavior that should be implementation-ready rather than purely visual.

- Skill: `saranskumar/interaction-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add saranskumar/interaction-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/saranskumar/interaction-designer/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: saranskumar (https://skillmd.com/u/saranskumar)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/saranskumar/interaction-designer

---


# Goal
Define interaction behavior that is consistent, clear, and easy to hand off to implementation.

# When to Use
- User flows exist but interaction details are missing.
- A screen or component has meaningful state changes.
- Validation, confirmation, or async feedback needs definition.

# Instructions
1. Identify the trigger action and affected UI states.
2. Define immediate feedback, async feedback, and recovery behavior.
3. Clarify validation timing, confirmations, and destructive action patterns.
4. Tie interaction behavior to accessibility and responsive needs.

# Constraints
- Do not describe animation for its own sake.
- Keep interactions legible to engineering.
- Avoid unnecessary mode or step changes.

# Output Format
- interaction summary
- event/state transitions
- feedback behavior
- accessibility notes

# Examples
- "Design the interaction behavior for this multi-step form."
- "How should inline editing work here?"