← ClaudeAtlas

interaction-designlisted

Interaction design shapes task flows, affordances, feedback, state coverage, error prevention, recovery, undo, progressive disclosure, input burden, and keyboard/touch behavior.
Xopoko/plug-n-skills · ★ 11 · AI & Automation · score 77
Install: claude install-skill Xopoko/plug-n-skills
# Interaction Design Use when the question is what users do, what the system does in response, and how the flow behaves over time. Interaction design is a contract among intent, behavior, feedback, state, and recovery; it is not button styling. ## Interaction Loop For each task, map: 1. Intent: what the user wants now. 2. Cue: how the action is discoverable. 3. Action: input performed. 4. Feedback: immediate change. 5. State: what is now true. 6. Recovery: mistake/failure handling. 7. Closure: completion signal. ## Cognitive Walkthrough For important steps, ask: 1. Will the user try to achieve the right effect? 2. Will the user notice the correct action? 3. Will the user connect the action with the intended effect? 4. Will the user see progress after acting? One "no" is a hesitation. Two or more is likely task failure. ## State Coverage Do not call an interaction designed until these states have a position: - default, hover/pointer affordance when relevant, keyboard focus, active/pressed, selected/current; - disabled with reason, loading, empty, validation error, system error; - partial success, success/confirmation, and undo/cancellation when applicable. ## Common Pattern Obligations Check common UI surfaces without assuming a specific toolkit: - Forms: label and instruction clarity, input burden, defaults, validation timing, error repair, saved progress, review before irreversible submit, and redundant-entry avoidance. - Search and filters: query feedback, fil