ms2sato/ux-design-standards
.claude/skills/ux-design-standards/SKILL.md
UX design principles for agent-console. Use when designing features, evaluating acceptance criteria, or reviewing user-facing interactions in a multi-agent management UI.
$ install --global
skillsauthnpx skillsauth add ms2sato/agent-console ux-design-standardsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 9:02 PM2.0s1 file scanned
SKILL.md
- name:
- ux-design-standards
- description:
- UX design principles for agent-console. Use when designing features, evaluating acceptance criteria, or reviewing user-facing interactions in a multi-agent management UI.
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 for full rationale, design guidelines, and codebase examples.
Related Skills
ms2sato/test-standards
development
VerifiedTrustedCommunity
Detailed test patterns and code examples. Use when you need step-by-step testing guidance, Server Bridge Pattern, or concrete code patterns beyond what the auto-loaded testing rules provide.
2SKILL.mdUpdated Apr 17, 2026
ms2sato/orchestrator
development
VerifiedTrustedCommunity
Orchestrator role for strategic decision-making, task prioritization, parallel task coordination via worktree delegation, and first-responder for dev agent questions. Use when managing multiple development agents or making prioritization decisions.
2SKILL.mdUpdated Apr 17, 2026
ms2sato/frontend-standards
development
VerifiedTrustedCommunity
Detailed React patterns and code examples for frontend implementation. Use when you need step-by-step guidance or concrete code patterns beyond what the auto-loaded frontend rules provide.
2SKILL.mdUpdated Apr 17, 2026
ms2sato/development-workflow-standards
development
VerifiedTrustedCommunity
Development workflow procedures including conflict assessment, re-implementation proposals, and TDD steps. Use when you need step-by-step workflow guidance beyond what the auto-loaded verification rules provide.
2SKILL.mdUpdated Apr 17, 2026