20acf3ae9b
Validated against the plugin-dev:skill-development checklist and applied conformance fixes: Description style — all five skill descriptions now use the canonical "This skill should be used when..." third-person form, with expanded trigger-phrase coverage. Previously used imperative "Use when..." which the spec calls out as wrong. Writing voice — body prose changed from "You are the dispatcher / You walk a user through..." to imperative "Act as the dispatcher / Walk the user through...". Remaining "you" usage is confined to quoted output text the agent prints to the user, which is correct usage. Progressive disclosure — composer/skills/ui-system/SKILL.md was 2513 words (over the 2000-word ideal). Refactored to 1063 words by moving detailed phase content into: - references/design-interview.md (D1–D11 phase specifications) - references/interaction-interview.md (I1–I11 phase specifications) - references/inspiration-presets.md (Linear/Notion/Stripe/etc. table) The SKILL.md now points at each reference as needed; agents load only what's relevant for the current phase. Other four skills already within the 1000–2000 word range, no refactor needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5.4 KiB
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).