claude-plugins/composer/skills/ui-system/references/interaction-interview.md

# Interaction design interview — full phase reference

Detailed phases for Part 2 of the ui-system interview. Read this when running
the interaction-design interview; it expands the phase summaries in SKILL.md.

Each phase: state what's being decided, show the default, ask the question,
confirm, move on. The user can reply `default` (accept) or `skip` (mark
`<TBD: ...>`) at any phase.

## I1 — Input model

**I1.1 Primary input.** touch (mobile/tablet) / mouse / keyboard / mixed.
Often determined by platform from `concept.md` — confirm rather than ask cold.

**I1.2 Supported inputs.** Which secondaries must work; which are not in scope.

**I1.3 Voice / switch / assistive.** Defer unless `users.md` has an actor that needs it.

## I2 — State surface declarations

The most important phase. For each action class, pick one pattern. Walk
through them in this order:

| Action class | Common picks | Default |
|---|---|---|
| Quick edit (single field)        | inline edit / popover / drawer | inline edit |
| Multi-field create               | drawer / modal / full-page route | drawer (web), modal (native) |
| Multi-field edit                 | drawer / modal / full-page route | same as create |
| Confirm destructive              | modal | modal (always — non-negotiable) |
| Settings / configuration         | full-page route | full-page route |
| Top-level navigation             | sidebar / tab bar / header nav | tab bar (mobile), sidebar (desktop) |
| Detail-from-list                 | full route / side panel / drawer | full route |
| Filtering / sorting              | inline controls / popover / drawer | inline (small set), drawer (large set) |
| Search                           | header search / command palette / page | header search |

For each, show the default and the alternatives. User confirms or picks.

## I3 — Motion posture

**I3.1 Posture.** minimal / restrained / expressive.

**I3.2 Animation triggers.** For each, yes/no/conditional:
- Page/route transitions
- List item enter/exit
- Modal/drawer open/close
- State changes (toggle, expand)
- Loading→loaded transitions

Defaults from the posture choice — show; accept.

**I3.3 Reduced motion fallbacks.** Confirm `prefers-reduced-motion` is
honored (always yes; this is policy, not preference).

## I4 — Breakpoints

**I4.1 Count.** 2 (mobile / desktop) / 3 (mobile / tablet / desktop) / 4 (with large desktop) / fluid.

**I4.2 Values.** Defaults: 640 / 768 / 1024 / 1280. Tweakable.

**I4.3 Primary target.** mobile-first / desktop-first / fluid. Determined by platform.

## I5 — i18n

**I5.1 Locales at launch.** Default: just English (`en` or `en-US`).

**I5.2 RTL support.** yes / no / planned. Default: no in v1.

**I5.3 Pluralization.** ICU MessageFormat / library / manual. Default: ICU MessageFormat (industry standard).

**I5.4 String length budget.** Default: assume +30% over English for de/fr translations. Always declared.

## I6 — State postures

Four sub-decisions; one declared posture each.

**I6.1 Empty state.**
- Visual: icon + heading + body + CTA / heading + body / heading only.
- Tone: encouraging / neutral / matter-of-fact.
- CTA: present always / present when actionable / never.

**I6.2 Loading state.**
- Default: skeleton / spinner / blocking. Pick one default; assign exceptions.
- Threshold for showing loading at all: 200ms (default) / 300ms / immediate.

**I6.3 Error state.**
- Surface: inline (default) / toast / dialog. By severity class.
- Recovery: retry / clear path forward / report.
- Copy tone: plain language always; what happened + what to do next.

**I6.4 Offline state.**
- Behavior: full subset works / banner only / "go online to continue".
- Sync: queue + flush on reconnect / fail loudly / not in v1.

## I7 — Time formatting

**I7.1 Relative-time threshold.** Within `<7 days>` / `<30 days>` / `<24 hours>` / never. Default: 7 days.

**I7.2 Absolute format.** `MMM d, yyyy h:mm a` / ISO / locale-aware. Default: locale-aware via `Intl.DateTimeFormat`.

**I7.3 Time zones.** user-local / fixed (which?) / configurable. Default: user-local.

## I8 — Keyboard

**I8.1 Global shortcuts.** Y/N for v1. If yes, list them; if no, mark "deferred to vN".

**I8.2 Modal escape.** Always yes; confirm.

**I8.3 Focus trap in modal.** Always yes; confirm. Restore on close.

**I8.4 Form submit.** Enter submits / Cmd+Enter submits / explicit only. Default: Enter submits.

**I8.5 List navigation.** Arrow keys yes/no. Default: no in v1 unless lists are central.

## I9 — Optimistic updates & error recovery

**I9.1 Default posture.**
- Optimistic with rollback (default for most actions — feels fast)
- Pessimistic (default for destructive or money-related actions)
- Mixed (most actions optimistic; some classes pessimistic)

**I9.2 Rollback strategy.** Toast + revert / silent revert / dialog. Default: toast + revert.

**I9.3 Conflict resolution.** Last-write-wins / show conflict UI / append. Default depends on platform.

## I10 — Gestures (touch only)

Skip this phase if I1.1 didn't include touch.

**I10.1 Swipe actions on rows.** Y/N. If yes: which actions, which directions.

**I10.2 Long-press menu.** Y/N. Default: yes (iOS/Android conventional).

**I10.3 Pull-to-refresh.** Y/N for list views.

## I11 — Focus management

**I11.1 After modal close.** Restore previous focus (default — non-negotiable for a11y).

**I11.2 After route change.** Heading focus (default) / container focus / no change.

**I11.3 After form error.** Focus first error field (default).