Imported from eng-manager-xyz/auteur-rs (.claude/skills/aiux-interaction-behavior/SKILL.md). Install upstream with npx skills add eng-manager-xyz/auteur-rs --skill aiux-interaction-behavior. Copyright stays with the author.

AI Design Prompt Generation: Interaction Behavior

Generates structured interaction specifications for AI design tools that describe user actions, system responses, state transitions, animations, and timing using trigger-response patterns that AI tools can parse into functional interactive components.

When to Use This Skill

Use this skill when generating prompts for AI design tools that require:

• User action specifications (click, hover, focus, drag, swipe, keyboard)
• System response definitions (show, hide, toggle, navigate, animate)
• State transition descriptions (default, hover, active, disabled, loading, selected)
• Animation and transition specifications (duration, easing, properties)
• Gesture and touch interaction patterns
• Keyboard navigation and shortcut definitions

UI Library: Base Web (baseui) -- Uber's design system Styling: Styletron (atomic CSS-in-JS via styled(), useStyletron(), withStyle()) Framework: Fusion.js with fusion-plugin-react-router for navigation

Used by AI Designer: This skill is automatically invoked when translating interaction designs, prototypes, or behavioral requirements into AI-ready interaction specifications.

Base Web Interaction Components

Feedback & Notification Components

import { toaster, ToasterContainer, PLACEMENT } from 'baseui/toast';
import { SnackbarProvider, useSnackbar, DURATION } from 'baseui/snackbar';
import { Notification, KIND as NOTIFICATION_KIND } from 'baseui/notification';
import { Banner, ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND as BANNER_KIND } from 'baseui/banner';

Modal & Overlay Components

import { Modal, ModalHeader, ModalBody, ModalFooter, ModalButton, FocusOnce, SIZE as MODAL_SIZE, ROLE } from 'baseui/modal';
import { Drawer, SIZE as DRAWER_SIZE, ANCHOR } from 'baseui/drawer';
import { StatefulPopover, PLACEMENT as POPOVER_PLACEMENT, TRIGGER_TYPE } from 'baseui/popover';
import { StatefulTooltip } from 'baseui/tooltip';

Loading & Progress Components

import { Spinner, SIZE as SPINNER_SIZE } from 'baseui/spinner';
import { ProgressBar } from 'baseui/progress-bar';
import { ProgressSteps, Step } from 'baseui/progress-steps';
import { Skeleton } from 'baseui/skeleton';

Button States

import { Button, KIND, SIZE, SHAPE } from 'baseui/button';

// Button props for interaction states:
// isLoading: boolean  -- shows spinner, disables button
// isSelected: boolean -- toggle/active state
// disabled: boolean   -- non-interactive state
// onClick: () => void -- click handler

Button KIND variants: KIND.primary, KIND.secondary, KIND.tertiary Button SIZE variants: SIZE.mini, SIZE.compact, SIZE.default, SIZE.large

Core Principles for AI Prompt Generation

Key principles:

1. Trigger-Response Pattern: Every interaction uses "When [trigger], [element] [response]" format
2. Timing Is Explicit: All animations use Base Web theme timing tokens (timing100-timing7000)
3. State Transitions Are Complete: Define from-state to to-state with property changes
4. Keyboard Parity: Every mouse interaction has keyboard equivalent (Tab, Enter, Escape)
5. Use Base Web Built-in Behaviors: Modal focus trap, Toast auto-dismiss, Popover positioning

Prompt Generation Framework

What This Skill Generates

Output Sections:

• User action triggers (click, hover, focus, drag, keyboard)
• System responses (visual changes, navigation, data operations)
• State transition matrices (property changes per state)
• Animation specifications using Base Web theme tokens
• Keyboard navigation maps (Tab order, shortcuts, focus management)

Prompt Generation Process

Step 1: Analyze Interaction Requirements

• Identify all interactive elements (buttons, links, inputs, toggles)
• Map user actions to each element
• Note which Base Web component handles each interaction
• Extract keyboard navigation patterns

Step 2: Generate Structured Description

Use this template:

## [Component Name] Interaction Specification

**Interactive Elements**: [List of clickable/focusable elements]
**Interaction Types**: [Mouse, Touch, Keyboard]
**Base Web Components**: [Modal, Toast, Popover, Button, etc.]

**User Actions & Responses**:

### [Element 1] Interactions

**Trigger-Response Definitions**:

1. **On Hover** (mouse enter):
   - Trigger: `mouseenter` event
   - Response: [property changes via Styletron overrides]
   - Timing: [theme.animation.timing*] [theme.animation.easing*]
   - Reverse on: `mouseleave`

2. **On Click** (primary action):
   - Trigger: `click` event OR `Enter`/`Space` key
   - Response: [action: navigate, toggle, show Modal, show Toast]
   - Feedback: [Button isLoading, Toast, Snackbar]
   - Completion: [state after action]

3. **On Focus** (keyboard navigation):
   - Trigger: `Tab` key or programmatic focus
   - Response: [Base Web built-in focus ring]

4. **On Active** (mouse down / key press):
   - Trigger: `mousedown` or `keydown`
   - Response: [pressed appearance via Styletron overrides]

**State Transition Matrix**:
| State | Background | Text Color | Border | Shadow | Additional |
|-------|------------|------------|--------|--------|------------|
| Default | backgroundPrimary | contentPrimary | borderOpaque | none | |
| Hover | backgroundSecondary | contentPrimary | borderOpaque | shadow400 | |
| Focus | backgroundPrimary | contentPrimary | borderSelected | none | focus ring |
| Active | backgroundTertiary | contentPrimary | borderOpaque | none | |
| Disabled | backgroundStateDisabled | contentStateDisabled | borderStateDisabled | none | cursor: not-allowed |
| Loading | backgroundPrimary | contentPrimary | borderOpaque | none | Spinner visible |

**Animation Specifications** (using theme tokens):
| Property | Duration Token | Easing | Delay |
|----------|---------------|--------|-------|
| [property] | timing200 | easeOutCurve | 0ms |

**Keyboard Navigation**:
- Tab: [moves focus to...]
- Enter/Space: [triggers action]
- Escape: [closes Modal/Drawer/Popover]
- Arrow keys: [navigation within component]

**Constraints**:
- Do NOT [interaction constraint]
- MUST [interaction requirement]

Vocabulary & Syntax Standards

Canonical Trigger Terms:

• Mouse: click, mouseenter, mouseleave, mousedown, mouseup, dblclick
• Touch: tap, touchstart, touchend, swipe-left, swipe-right, long-press
• Keyboard: keydown, keyup, focus, blur, Tab, Enter, Space, Escape, ArrowUp, ArrowDown
• Form: input, change, submit, invalid, focus, blur

Canonical Response Terms (Base Web components):

• Feedback: toaster.info(), toaster.positive(), toaster.warning(), toaster.negative() (auto-dismiss)
• Snackbar: enqueue({ message, actionMessage, actionOnClick }) (with action)
• Modal: setIsOpen(true) / setIsOpen(false) with onClose callback
• Drawer: setIsOpen(true) with ANCHOR.left/right/top/bottom
• Popover: StatefulPopover with TRIGGER_TYPE.click or TRIGGER_TYPE.hover
• Tooltip: StatefulTooltip (hover/focus triggered)
• Loading: Button isLoading={true}, Spinner, Skeleton
• Navigation: navigate-to (via fusion-plugin-react-router), Link

Base Web Animation Tokens (from theme):

// Duration tokens (theme.animation)
timing0    // 0ms (instant)
timing100  // 100ms
timing200  // 200ms
timing300  // 300ms
timing400  // 400ms
timing500  // 500ms
timing600  // 600ms
timing700  // 700ms
timing1000 // 1000ms

// Easing curves (theme.animation)
easeOutCurve      // Standard deceleration
easeInCurve       // Acceleration
easeInOutCurve    // Both
easeOutQuinticCurve // Dramatic deceleration
easeInQuinticCurve  // Dramatic acceleration
linearCurve       // Linear

Styletron State Styles (not Tailwind):

// Hover via styled() or overrides
const StyledButton = styled('button', ({ $theme }) => ({
  backgroundColor: $theme.colors.backgroundPrimary,
  color: $theme.colors.contentPrimary,
  transitionProperty: 'background-color, color, box-shadow',
  transitionDuration: $theme.animation.timing200,
  transitionTimingFunction: $theme.animation.easeOutCurve,
  ':hover': {
    backgroundColor: $theme.colors.backgroundSecondary,
    boxShadow: $theme.lighting.shadow400,
  },
  ':focus-visible': {
    outline: `2px solid ${$theme.colors.borderSelected}`,
    outlineOffset: '2px',
  },
  ':active': {
    backgroundColor: $theme.colors.backgroundTertiary,
  },
  ':disabled': {
    backgroundColor: $theme.colors.backgroundStateDisabled,
    color: $theme.colors.contentStateDisabled,
    cursor: 'not-allowed',
    pointerEvents: 'none',
  },
}));

Avoid These Terms (wrong ecosystem):

• "Tailwind transition classes" -- Use: Styletron transition properties with theme.animation tokens
• "hover:bg-blue-700" -- Use: ':hover': { backgroundColor: $theme.colors.* }
• "animate-spin" -- Use: Spinner from baseui/spinner
• "duration-200 ease-out" -- Use: timing200 + easeOutCurve from theme.animation
• "focus:ring-2 ring-blue-500" -- Use: Base Web built-in focus ring or ':focus-visible' override
• "Dialog from Radix" -- Use: Modal or Dialog from baseui

Prompt Validation Framework

Evaluation Rubric

Use this rubric to score generated interaction descriptions (1-5 scale):

Category 1: Specificity & Clarity (Weight: 30%)

Score 5 (Excellent):

• Every interaction uses explicit trigger-response format
• All property changes reference Base Web theme tokens (colors, sizing, animation)
• Animation timing uses theme.animation tokens (timing200, easeOutCurve)
• Zero ambiguous terms ("responds", "animates", "changes")

Score 3 (Adequate):

• Most interactions use trigger-response format (80%+)
• Property changes mostly use theme tokens
• Timing present but may use raw ms values
• Minimal ambiguous terms (<3)

Score 1 (Poor):

• Interactions described in prose
• Property changes use Tailwind classes or vague descriptions
• No timing values
• Frequent ambiguous descriptions

Category 2: Canonical Terminology (Weight: 25%)

Score 5 (Excellent):

• Feedback uses Base Web components (Toast, Snackbar, Modal, Drawer)
• Trigger terms match DOM events
• Animation uses theme.animation tokens
• State names match Base Web conventions (isLoading, isSelected, disabled)
• Button states use KIND, SIZE, SHAPE constants

Score 3 (Adequate):

• Mostly Base Web component references (90%+)
• Animation terms recognizable
• State names mostly correct

Score 1 (Poor):

• References shadcn/ui Dialog, Radix Popover, or Tailwind animations
• Non-standard event names
• State names use non-Base-Web conventions

Category 3: Structural Hierarchy (Weight: 20%)

Score 5 (Excellent):

• State transition matrix included with theme color tokens
• Animation specification table with theme.animation tokens
• Keyboard navigation map complete
• Organized by element, then by interaction type

Score 3 (Adequate):

• Basic state list present
• Some animation details
• Keyboard basics covered

Score 1 (Poor):

• Flat list of interactions
• No state organization
• Animation and interaction mixed

Category 4: Constraint Definition (Weight: 15%)

Score 5 (Excellent):

• Keyboard accessibility specified (Tab, Enter, Space, Escape)
• Disabled state behavior defined
• Loading state interactions handled (Button isLoading)
• Modal/Drawer focus trap documented (built into Base Web)
• Explicit "Do NOT" constraints (2+)
• Explicit "MUST" requirements (2+)

Score 3 (Adequate):

• Basic keyboard support mentioned
• Disabled state noted
• Some loading behavior

Score 1 (Poor):

• No keyboard accessibility
• No disabled state
• No loading state

Category 5: Tool Compatibility (Weight: 10%)

Score 5 (Excellent):

• Uses Base Web components (Modal, Toast, Popover, Drawer)
• Styletron animation syntax
• Compatible with Fusion.js patterns

Score 3 (Adequate):

• Generic component patterns
• Standard interaction syntax

Score 1 (Poor):

• Tailwind or Radix patterns
• Framework-incompatible approaches

Overall Score Calculation

Total = (Category 1 x 0.30) + (Category 2 x 0.25) + (Category 3 x 0.20) +
        (Category 4 x 0.15) + (Category 5 x 0.10)

Pass Threshold: >= 3.5/5.0
Excellent Threshold: >= 4.5/5.0

Validation Checklist

Before finalizing a generated interaction description, verify:

Critical (Must Pass):

• Every interaction uses trigger-response format
• All state changes reference Base Web theme color tokens
• Animation timing uses theme.animation tokens (timing200, easeOutCurve)
• Keyboard equivalents defined for mouse interactions
• State transition matrix includes default, hover, focus, active, disabled
• Feedback uses Base Web components (Toast, Snackbar, Modal)

Important (Should Pass):

• Loading state uses Button isLoading or Spinner component
• Modal/Drawer focus trap documented (built-in to Base Web)
• Touch interactions documented for mobile
• At least 2 "Do NOT" constraints
• At least 2 "MUST" requirements

Enhancement (Nice to Have):

• Micro-interactions for feedback (Toast variants: positive, warning, negative)
• Gesture thresholds for touch
• Reduced motion preference handling
• Focus trap behavior documented for Modal/Drawer

Generation Guidance

Do This:

Modal Interaction with Base Web:

**Modal Dialog Interactions**

### Modal Opening

**Trigger-Response Definitions**:

1. **On Trigger Click** (open modal):
   - Trigger: `click` on trigger button OR `Enter`/`Space` when focused
   - Response: `setIsOpen(true)` on Modal component
   - Backdrop: Base Web Modal renders backdrop automatically (backgroundOverlayDark)
   - Animation: Modal scales/fades in (timing300, easeOutCurve) -- built into Base Web
   - Body: overflow-hidden added automatically by Base Web
   - Focus: FocusOnce component moves focus to first focusable element

### Modal Closing

1. **On Close Button Click**:
   - Trigger: `click` on X button OR `Enter`/`Space`
   - Response: `onClose()` callback, `setIsOpen(false)`
   - Animation: Built-in exit animation (timing200, easeInCurve)
   - Focus: Returns to trigger element automatically

2. **On Backdrop Click**:
   - Trigger: `click` on Modal backdrop
   - Response: `onClose()` fires (closeable prop must be true)
   - Confirmation: If form has unsaved changes, show Dialog first

3. **On Escape Key**:
   - Trigger: `Escape` key
   - Response: `onClose()` fires (closeable prop)
   - Built into Base Web Modal

### Focus Management (Built-in to Base Web Modal)

- Focus trap: Tab cycles through modal focusable elements automatically
- Shift+Tab: Cycles backwards
- On close: Focus returns to trigger element
- FocusOnce component controls initial focus target

**State Transition Matrix**:
| Element | State | Background | Text | Border | Additional |
|---------|-------|------------|------|--------|------------|
| Trigger Button | Default | backgroundPrimary | contentInversePrimary | none | |
| Trigger Button | Hover | hover color | contentInversePrimary | none | shadow400 |
| Trigger Button | Loading | backgroundPrimary | hidden | none | Spinner visible |
| Modal Backdrop | Visible | backgroundOverlayDark | -- | -- | opacity animation |
| Modal Content | Visible | backgroundPrimary | contentPrimary | borderOpaque | scale + opacity |

**Animation Specifications** (Base Web built-in):
| Animation | Duration | Easing | Built-in |
|-----------|----------|--------|----------|
| Modal enter | timing300 | easeOutCurve | Yes |
| Modal exit | timing200 | easeInCurve | Yes |
| Backdrop enter | timing300 | easeOutCurve | Yes |
| Backdrop exit | timing200 | easeInCurve | Yes |

**Toast Feedback** (on form submit success):
```typescript
toaster.positive('Changes saved successfully', { autoHideDuration: 3000 });

Constraints:

Do NOT:

• Do NOT manually implement focus trap (Base Web Modal handles it)
• Do NOT close modal on backdrop click if form has unsaved changes
• Do NOT use custom backdrop (use Modal's built-in)
• Do NOT animate with durations > timing400 (feels sluggish)

MUST:

• MUST use Modal's onClose callback for all close paths
• MUST use FocusOnce to control initial focus target
• MUST use closeable prop to control Escape and backdrop close
• MUST announce modal to screen readers (role="dialog" built-in)
• MUST use ROLE.dialog or ROLE.alertdialog appropriately

### Don't Do This:

**Vague Interaction Description with Wrong Ecosystem**:
```markdown
"The button should have hover effects using hover:bg-blue-700 and respond to clicks. When clicked, open a Radix Dialog with Tailwind animations. Use animate-spin for loading. Add focus:ring-2 ring-blue-500 for focus states."

Why This Fails:

• References Tailwind classes (not Styletron)
• References Radix Dialog (not Base Web Modal)
• Uses animate-spin (not baseui/spinner Spinner)
• Uses focus:ring (not Base Web's built-in focus handling)
• No theme.animation tokens for timing
• No Base Web component references

Related Skills

Complements (use together for comprehensive prompts):

• aiux-state-management: For conditional rendering and data-driven states
• aiux-component-description: For component structure that interactions attach to
• aiux-accessibility-spec: For ARIA and screen reader interaction requirements
• aiux-form-patterns: For form-specific interactions (validation, submission)

See Also:

• aiux-visual-tokens: For theme color/sizing values in state transitions
• aiux-layout-specification: For Block/Grid layout containing interactive elements
• styling-system: For Styletron CSS-in-JS patterns