UX & Interaction Review
Combined review of usability and interaction design. Evaluates whether an interface works mechanically (state coverage, feedback, timing, error recovery) and whether users can accomplish their goals efficiently (heuristics, flow, progressive disclosure).
This skill merges the "how does it work?" axis: heuristics, state coverage, feedback patterns, keyboard behavior, timing, animation, and error handling.
When to Use
- Reviewing new or existing components before release
- Evaluating multi-state interactions (modals, popovers, wizards, dashboards)
- Auditing error/empty/loading/success state handling
- Assessing feedback timing and animation choreography
- Checking keyboard behavior and escape hatches
- PR reviews that touch interactive code
- Design system component reviews
Do NOT use for purely visual/aesthetic concerns (typography, color palettes, spacing rhythm) or for mapping the user's emotional journey across sessions. Use design-journey-review for those.
Quick Reference
| Task |
Load reference |
| State patterns and micro-interaction specs |
skills/ux-interaction-review/references/state-and-interaction-patterns.md |
Workflow
Step 1: Gather Context
- What is the user trying to accomplish?
- What component/flow is under review? What states can it be in?
- Who are the users (expert vs. novice)? Single-user tool vs. public-facing?
- What are the success criteria?
Step 2: Heuristic Scan (Nielsen's 10)
Evaluate against each heuristic. Score Good / Fair / Poor:
| Heuristic |
Check |
| Visibility of system status |
Does the user always know what's happening? |
| Match with real world |
Does it use familiar language and concepts? |
| User control and freedom |
Can users undo, go back, escape? |
| Consistency and standards |
Does it follow platform conventions? |
| Error prevention |
Are mistakes prevented before they happen? |
| Recognition over recall |
Is information visible rather than memorized? |
| Flexibility and efficiency |
Are there shortcuts for expert users? |
| Aesthetic and minimalist design |
Is every element necessary? |
| Error recovery |
Are error messages helpful and actionable? |
| Help and documentation |
Is guidance available when needed? |
Step 3: Interaction Map
For every interactive element, document:
| Element |
Trigger |
Feedback |
States |
Dismiss/Escape |
| [name] |
click/hover/focus |
what changes |
all possible states |
how to exit |
Step 4: State Coverage Audit
Check each state is handled:
| State |
Handled? |
Notes |
| Loading |
|
|
| Empty (first use) |
|
|
| Empty (no results) |
|
|
| Partial data |
|
|
| Full / normal |
|
|
| Error (network) |
|
|
| Error (validation) |
|
|
| Error (permissions) |
|
|
| Success |
|
|
| Stale / outdated |
|
|
| Offline |
|
|
| Disabled |
|
|
Step 5: Feedback & Timing Assessment
For each interaction, evaluate:
- Latency class: instant (<100ms), fast (100-300ms), noticeable (300ms-1s), slow (>1s)
- Feedback timing: does the user know their action worked immediately?
- Animation duration: appropriate for the action? (micro: 80-150ms, layout shift: 200-300ms, page transition: 300-400ms)
- Progressive disclosure: is complexity revealed only when needed?
- Escape hatches: can the user dismiss/undo/cancel from any state?
| Element |
Duration |
Easing |
Assessment |
| [name] |
Nms |
ease-X |
too fast / good / too slow |
Step 6: Error Recovery & Edge Cases
- What happens on clipboard failure (especially file:// protocol)?
- What happens on rapid double-click?
- What happens if the data is stale?
- What happens if the user navigates away mid-action?
- Are destructive actions reversible?
Step 7: Prioritize Findings
| Priority |
Criteria |
Action |
| Critical |
Blocks usability, user cannot complete task |
Must fix |
| High |
Significantly degrades experience or loses data |
Fix this sprint |
| Medium |
Noticeable friction, workaround exists |
Next iteration |
| Enhancement |
Improves delight, polish |
Backlog |
Step 8: Produce Report
## UX & Interaction Review: [Component/Flow]
### Summary
[2-3 sentences: overall assessment, biggest concern, best strength]
### Heuristic Scores
[Table with Good/Fair/Poor per heuristic]
### Interaction Map
[Table: element, trigger, feedback, states, dismiss]
### State Coverage
[Table: state, handled yes/no, notes]
### Timing & Feedback
[Table: element, duration, easing, assessment]
### Findings by Priority
#### Critical
- [ ] Finding (impact, recommendation)
#### High
- [ ] Finding (impact, recommendation)
#### Medium / Enhancement
- [ ] Finding (impact, recommendation)
### Patterns to Preserve
[What's working well that should NOT be changed]
Principles
- State coverage is non-negotiable. Every UI element exists in multiple states. If you can't enumerate them, the review isn't done.
- Feedback must be immediate. If the user clicks and nothing visibly changes for >100ms, that's a bug.
- Escape hatches everywhere. Every popup, modal, panel, and expanded state must be dismissible via Escape, outside-click, or an explicit close action.
- Debounce destructive paths. Copy buttons, delete buttons, submit buttons should all guard against rapid double-invocation.
- Respect
prefers-reduced-motion. All non-essential animations should be wrapped in a motion media query.
- Progressive disclosure over density. Don't show everything at once. Reveal on interaction, not on load.
- Test with real data. Placeholder content hides information architecture problems. Empty states hide missing error handling.
1---
2name: ux-interaction-review
3description: "Combined UX and interaction design review: usability heuristics, state coverage, feedback patterns, timing, keyboard behavior, error recovery, and progressive disclosure. Use when reviewing how an interface works mechanically and whether interactions are well-designed for use."
4keywords:
5 - ux review
6 - interaction design
7 - usability review
8 - state coverage
9 - micro-interactions
10 - feedback patterns
11 - error states
12 - heuristic evaluation
13triggers:
14 - ux review
15 - interaction review
16 - usability review
17 - review interactions
18 - state coverage
19 - how does this work
20 - is this well designed
21file_patterns:
22 - '**/*.tsx'
23 - '**/*.jsx'
24 - '**/*.vue'
25 - '**/*.svelte'
26 - '**/*.ts'
27confidence: 0.8
28---
29
30# UX & Interaction Review
31
32Combined review of usability and interaction design. Evaluates whether an interface works mechanically (state coverage, feedback, timing, error recovery) and whether users can accomplish their goals efficiently (heuristics, flow, progressive disclosure).
33
34This skill merges the "how does it work?" axis: heuristics, state coverage, feedback patterns, keyboard behavior, timing, animation, and error handling.
35
36## When to Use
37
38- Reviewing new or existing components before release
39- Evaluating multi-state interactions (modals, popovers, wizards, dashboards)
40- Auditing error/empty/loading/success state handling
41- Assessing feedback timing and animation choreography
42- Checking keyboard behavior and escape hatches
43- PR reviews that touch interactive code
44- Design system component reviews
45
46Do NOT use for purely visual/aesthetic concerns (typography, color palettes, spacing rhythm) or for mapping the user's emotional journey across sessions. Use `design-journey-review` for those.
47
48## Quick Reference
49
50| Task | Load reference |
51| --- | --- |
52| State patterns and micro-interaction specs | `skills/ux-interaction-review/references/state-and-interaction-patterns.md` |
53
54## Workflow
55
56### Step 1: Gather Context
57
581. What is the user trying to accomplish?
592. What component/flow is under review? What states can it be in?
603. Who are the users (expert vs. novice)? Single-user tool vs. public-facing?
614. What are the success criteria?
62
63### Step 2: Heuristic Scan (Nielsen's 10)
64
65Evaluate against each heuristic. Score Good / Fair / Poor:
66
67| Heuristic | Check |
68|-----------|-------|
69| Visibility of system status | Does the user always know what's happening? |
70| Match with real world | Does it use familiar language and concepts? |
71| User control and freedom | Can users undo, go back, escape? |
72| Consistency and standards | Does it follow platform conventions? |
73| Error prevention | Are mistakes prevented before they happen? |
74| Recognition over recall | Is information visible rather than memorized? |
75| Flexibility and efficiency | Are there shortcuts for expert users? |
76| Aesthetic and minimalist design | Is every element necessary? |
77| Error recovery | Are error messages helpful and actionable? |
78| Help and documentation | Is guidance available when needed? |
79
80### Step 3: Interaction Map
81
82For every interactive element, document:
83
84| Element | Trigger | Feedback | States | Dismiss/Escape |
85|---------|---------|----------|--------|----------------|
86| [name] | click/hover/focus | what changes | all possible states | how to exit |
87
88### Step 4: State Coverage Audit
89
90Check each state is handled:
91
92| State | Handled? | Notes |
93|-------|----------|-------|
94| Loading | | |
95| Empty (first use) | | |
96| Empty (no results) | | |
97| Partial data | | |
98| Full / normal | | |
99| Error (network) | | |
100| Error (validation) | | |
101| Error (permissions) | | |
102| Success | | |
103| Stale / outdated | | |
104| Offline | | |
105| Disabled | | |
106
107### Step 5: Feedback & Timing Assessment
108
109For each interaction, evaluate:
110
111- **Latency class**: instant (<100ms), fast (100-300ms), noticeable (300ms-1s), slow (>1s)
112- **Feedback timing**: does the user know their action worked immediately?
113- **Animation duration**: appropriate for the action? (micro: 80-150ms, layout shift: 200-300ms, page transition: 300-400ms)
114- **Progressive disclosure**: is complexity revealed only when needed?
115- **Escape hatches**: can the user dismiss/undo/cancel from any state?
116
117| Element | Duration | Easing | Assessment |
118|---------|----------|--------|------------|
119| [name] | Nms | ease-X | too fast / good / too slow |
120
121### Step 6: Error Recovery & Edge Cases
122
123- What happens on clipboard failure (especially file:// protocol)?
124- What happens on rapid double-click?
125- What happens if the data is stale?
126- What happens if the user navigates away mid-action?
127- Are destructive actions reversible?
128
129### Step 7: Prioritize Findings
130
131| Priority | Criteria | Action |
132|----------|----------|--------|
133| **Critical** | Blocks usability, user cannot complete task | Must fix |
134| **High** | Significantly degrades experience or loses data | Fix this sprint |
135| **Medium** | Noticeable friction, workaround exists | Next iteration |
136| **Enhancement** | Improves delight, polish | Backlog |
137
138### Step 8: Produce Report
139
140```markdown
141## UX & Interaction Review: [Component/Flow]
142
143### Summary
144[2-3 sentences: overall assessment, biggest concern, best strength]
145
146### Heuristic Scores
147[Table with Good/Fair/Poor per heuristic]
148
149### Interaction Map
150[Table: element, trigger, feedback, states, dismiss]
151
152### State Coverage
153[Table: state, handled yes/no, notes]
154
155### Timing & Feedback
156[Table: element, duration, easing, assessment]
157
158### Findings by Priority
159
160#### Critical
161- [ ] Finding (impact, recommendation)
162
163#### High
164- [ ] Finding (impact, recommendation)
165
166#### Medium / Enhancement
167- [ ] Finding (impact, recommendation)
168
169### Patterns to Preserve
170[What's working well that should NOT be changed]
171```
172
173## Principles
174
175- **State coverage is non-negotiable.** Every UI element exists in multiple states. If you can't enumerate them, the review isn't done.
176- **Feedback must be immediate.** If the user clicks and nothing visibly changes for >100ms, that's a bug.
177- **Escape hatches everywhere.** Every popup, modal, panel, and expanded state must be dismissible via Escape, outside-click, or an explicit close action.
178- **Debounce destructive paths.** Copy buttons, delete buttons, submit buttons should all guard against rapid double-invocation.
179- **Respect `prefers-reduced-motion`.** All non-essential animations should be wrapped in a motion media query.
180- **Progressive disclosure over density.** Don't show everything at once. Reveal on interaction, not on load.
181- **Test with real data.** Placeholder content hides information architecture problems. Empty states hide missing error handling.
nickcrew