# UX Design Standards

> UX design principles for agent-console. Use when designing features, evaluating acceptance criteria, or reviewing user-facing interactions in a multi-agent management UI.

- Skill: `ms2sato/ux-design-standards` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ms2sato/ux-design-standards`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ms2sato/ux-design-standards/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: ms2sato (https://skillmd.com/u/ms2sato)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/ms2sato/ux-design-standards

---


# UX Design Standards

Five principles for a multi-agent management UI where one user orchestrates many parallel AI agents.

## Principles

### 1. Sequential Flow Over Hub-and-Spoke
Process multiple items in sequence (A → done → B) instead of forcing return to a central hub between each item. Example: Review Queue (#405) — owner reviews one PR then advances to the next without returning to a queue list.

### 2. Parallel Awareness Without Parallel Attention
Surface state changes passively (badges, activity indicators, memos) without requiring active monitoring. Pull, not push — no popups for routine updates. Example: Session sidebar shows agent state (idle/active/asking) via color-coded indicators; agents write memos the user reads asynchronously.

### 3. Interruption Hierarchy
Distinguish urgency: **Blockers** (agent asking question, error) → prominent indicator, unmissable from any screen. **Action needed** (PR ready, acceptance done) → badge on next glance. **Informational** (task completed, CI passed) → passive, on demand. Completions are not blockers.

### 4. Action Proximity
Actions available where the user already is — inline over page-level, contextual creation, progressive disclosure. Example: Worktree creation from session breadcrumb (#402) — no navigation to a management page.

### 5. Glanceable Status, Opt-in Detail
Summaries in lists, full detail on click. Summarize semantically ("Agent completed PR #42"), not by truncation. Two-level pattern: Level 1 = summary in lists, Level 2 = detail on expand. Example: Session sidebar shows name, state icon, and memo preview without terminal output.

## Applying to Acceptance Criteria

When writing criteria for user-facing features, verify each principle:
- "User can process items sequentially without returning to the list" (P1)
- "State change visible from session list without opening the session" (P2)
- "Blocker visually distinct from completion" (P3)
- "Action available inline without page navigation" (P4)
- "Status understandable from list view without expanding" (P5)

See [ux-design-standards.md](ux-design-standards.md) for full rationale, design guidelines, and codebase examples.