skills.rest
HACK-WU
HACK-WUCOMMUNITY
Explore all skills by this author →
GitHub

interaction-design

Designs human-system interaction logic for CLI, Web, API, and SDK scenarios.

2|Updated Jun 8, 2026
Search Tags:#mermaid#api design#interaction design#exception handling#cli design#user flow#ux planning
One-click install
npx skills add https://github.com/HACK-WU/skills --skill interaction-design-hack-wu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interaction-design
Source: https://github.com/HACK-WU/skills/tree/main/skills/interaction-design
Command: npx skills add https://github.com/HACK-WU/skills --skill interaction-design-hack-wu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Before technical design begins, teams often lack a clear picture of how users will actually interact with the system—who the users are, what operations they perform, what feedback they see, and what happens when things go wrong. This Skill structures that thinking into a complete interaction design document without touching UI visuals or technical architecture. ## Core Features & Use Cases - Scenario-Adaptive Design: Automatically adjusts terminology and output format for script/CLI, Web system, API service, or SDK/tool scenario types. - Seven-Stage Guided Workflow: Walks through roles, scenario inventory, interaction flows (mermaid diagrams), feedback states, exception handling, interaction constraints, and final document output—with user confirmation required at each stage. - Failure-First Coverage: Every interaction node defines success, failure, waiting, and empty states, plus exception categories and recovery paths. - Use Case: When planning a new CLI tool, use this Skill to define command formats, parameter relationships, exit codes, error messages, and confirmation points for irreversible operations before handing off to technical design. ## Quick Start Ask the AI to design the interaction flow for your feature, for example: design how users interact with my command-line deployment tool, including parameters, output, and error handling.

Frequently Asked Questions about interaction-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design user interaction flows before writing code?▼

Use a staged interaction design process: identify roles and scenario type, list key scenarios with priorities, draw mermaid flowcharts per scenario, then define feedback states, exceptions, and constraints. Each stage requires confirmation before proceeding to the next.

What is the difference between interaction design and UI design?▼

Interaction design defines the logic of how users operate the system—commands, flows, feedback, and error handling—without any visual elements. UI design covers visual appearance. This Skill explicitly excludes UI visuals and technical architecture.

Can interaction design apply to APIs and CLI tools, not just web apps?▼

Yes. The workflow adapts to four scenario types: script/CLI (commands, parameters, exit codes), Web systems (page flows, forms), API services (request/response formats, status codes), and SDKs (method calls, return values, exceptions).

How should error states and exceptions be documented in interaction design?▼

Classify exceptions into input, environment, permission, data, and concurrency categories. For each, record the trigger condition, what the user perceives, the recovery path, and whether it blocks the main flow. Every node also needs success, failure, waiting, and empty states.

When should interaction design happen in the software development workflow?▼

It sits between requirement mining and technical design. After requirements are understood, interaction design clarifies how humans interact with the system; its output then feeds into technical design for module planning, interface design, and exception handling chapters.

Related Skills

Explore More Product & Management Skills→
MS33834MS33834

Goal Definition

Transforms vague requests into measurable goals with success criteria and scope.

Community
Intermediate
davidYichengWeidavidYichengWei
159

bp-architecture-design

Apply architecture principles to partition modules, manage dependencies, and define interfaces.

Community
Advanced
OpenAEC-FoundationOpenAEC-Foundation
4

drawio-impl-er-diagrams

Generate and validate Draw.io mxGraph XML for entity-relationship diagrams with crow's-foot notation.

Official
Advanced
LuisSambranoLuisSambrano
7

ui-prototype

Generate visual mockups and wireframes from textual descriptions.

Community
Basic