---
name: <SLUG>-interaction-design
description: Interaction design for the <PROJECT NAME> project. State surfaces (modal vs inline vs drawer vs full-page), motion philosophy, input modes (touch/mouse/keyboard), breakpoints, i18n posture, empty/loading/error/offline state postures, time formatting, and keyboard policy. Load and apply whenever building UI behavior — modals, forms, navigation, transitions, gestures, error handling, async states, focus management. Pairs with <SLUG>-design-system.
---

# <PROJECT NAME> interaction design

> **Status: <draft | reviewed | locked>**
> Generated by Composer's `ui-system` phase. Re-running that phase
> updates this skill (with confirmation).

## How to use this skill

When building UI *behavior* — anything beyond static styling — read
this skill first. Don't invent new state-surface patterns, motion
durations, or empty-state postures. They're declared once here and
reused everywhere.

For visual tokens (color, type, spacing), see the paired
`<SLUG>-design-system` skill.

## Input modes

| Mode | Status |
|---|---|
| Touch    | <TBD: primary | supported | not supported> |
| Mouse    | <TBD> |
| Keyboard | <TBD> |
| Voice    | <TBD: usually "not supported" in v1> |

## State surfaces

One pattern per action class. Used everywhere.

| Action class | Pattern | Notes |
|---|---|---|
| Quick edit (single field)        | inline edit                          | <TBD> |
| Multi-field create / edit        | <drawer | modal — pick one>          | <TBD> |
| Confirm destructive              | modal                                | always |
| Settings / configuration         | full-page route                      | — |
| Top-level navigation             | <sidebar | tab bar | header nav>     | <TBD> |
| Detail-from-list                 | <full route | side panel>            | <TBD> |

## Motion

- **Posture**: <minimal | restrained | expressive>
- **Default duration / easing**: see design-system tokens
- **Reduced motion**: respected via `prefers-reduced-motion` everywhere; fallbacks declared per pattern below
- **When things animate**:
  - Page/route transitions: <yes/no, how>
  - List item enter/exit: <yes/no, how>
  - Modal/drawer open/close: <yes/no, how>
  - State changes (toggle, expand): <yes/no, how>

## Breakpoints

| Breakpoint | Range | Primary? |
|---|---|---|
| Phone   | < <px> | <TBD> |
| Tablet  | <px> – <px> | <TBD> |
| Desktop | ≥ <px> | <TBD> |

**Primary design target**: <which one — "mobile-first", "desktop-first", "fluid">

## i18n

- **Locales at launch**: <list — often just English in v1>
- **RTL support**: <yes | no | planned>
- **String length budget**: assume +30% over English for German/French translations
- **Pluralization**: <TBD: ICU MessageFormat / library / manual>

## State postures

One declared posture per state, used everywhere. No inventing on a per-screen basis.

### Empty
- **Visual**: <icon + heading + body + optional CTA>
- **Tone**: <encouraging | neutral | matter-of-fact>
- **CTA**: <when present, what kind of action>

### Loading
- **Default pattern**: <skeleton | spinner | blocking>
- **When to use which**: <criteria — "skeleton for list/card containers, spinner for inline buttons, blocking only for explicit user-initiated actions">
- **Threshold for showing loading at all**: <ms — usually 200–300ms; below that, just let it pop>

### Error
- **Surface**: <inline | toast | dialog — by error class>
- **Recovery**: <retry button | clear path forward | "contact support" only as last resort>
- **Copy tone**: <plain language, name what happened, name what to do next>

### Offline
- **Behavior**: <feature subset that works | banner only | "go online to continue">
- **Sync semantics**: <when reconnected, what happens>

## Time formatting

- **Relative time** for events within: <threshold — e.g., < 7 days>
- **Absolute time** otherwise, format: <pattern — e.g., "MMM d, yyyy h:mm a">
- **Time zones**: <user-local | fixed (which?) | configurable>
- **Date-only vs date+time**: <when each is shown>

## Keyboard

- **Global shortcuts**: <list, or "none in v1">
- **Within-modal**: `Esc` closes; focus trap while open; restore focus on close
- **Tab order**: declared per-flow as needed; focus visible always (per design-system)
- **Forms**: `Enter` submits; `Esc` cancels destructive
- **Lists**: <arrow-key nav? | not in v1>

## TBD on return

- <TBD: anything the placeholder pass couldn't answer>