skills.rest
jacob-balslev
jacob-balslevCOMMUNITY
Explore all skills by this author →
GitHub

interaction-patterns

Audit UI interaction patterns against decision shapes and state requirements.

1|Updated May 6, 2026
Search Tags:#progressive disclosure#combobox#command menu#interaction pattern#ui control selection#modal vs inline edit#keyboard alternatives
One-click install
npx skills add https://github.com/jacob-balslev/skill-graph --skill interaction-patterns-jacob-balslev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interaction-patterns
Source: https://github.com/jacob-balslev/skill-graph/tree/main/marketplace/skills/interaction-patterns
Command: npx skills add https://github.com/jacob-balslev/skill-graph --skill interaction-patterns-jacob-balslev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Choosing the right UI interaction pattern is hard because the wrong control hides alternatives, breaks user flow, or adds unnecessary ceremony for the decision the user must make.

Core Features & Use Cases

  • Control-pattern selection for decision shape: maps common decision/interaction types (compare, choose one, choose many, sequence, search, edit, confirm, recover) to appropriate patterns like tabs vs pages, dropdown vs combobox, stepper vs wizard, modal vs inline edit, and disclosure/command menus.
  • Pattern auditing before implementation: checks that context stays visible, cancel/escape/undo behaviors are defined, loading/empty/error/permission-limited states fit the pattern, and gesture/pointer interactions have keyboard or explicit alternatives.
  • Boundaries with adjacent concerns: clearly excludes accessibility compliance (hand off to a11y), user-goal/task definition (task-analysis), feedback timing/state staging (interaction-feedback), and component API/token governance (design-system-architecture and design-module-composition).

Quick Start

Use the interaction-patterns skill to decide whether a combobox, dropdown, or command menu best supports your user’s selection task in a settings screen.

Frequently Asked Questions about interaction-patterns

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

FAQPage Schema
How do I choose between a modal and inline edit for a UI interaction pattern?▼

To choose between a modal and inline edit, classify the user's decision shape and whether context must stay visible. Select inline edit to preserve alternatives and maintain flow, or a modal when explicit confirmation is required.

When should I use a combobox instead of a dropdown for UI control selection?▼

Use a combobox instead of a dropdown when the selection task involves searching or filtering a large choice set. A standard dropdown fits small, fixed lists, while a combobox supports progressive disclosure for dynamic data.

What is the best way to audit UI patterns for keyboard alternatives and edge cases?▼

Audit UI patterns by checking that pointer interactions have explicit keyboard alternatives and evaluating loading, empty, error, and permission-limited states. Ensure cancel, escape, and undo behaviors are defined for every interaction.

How do I map a user's decision shape to the right tabs or stepper interaction?▼

Map the decision shape by matching compare scenarios to tabs or pages, and sequence scenarios to steppers or wizards. This ensures the interaction pattern fits the user's task flow without hiding necessary alternatives.

Does the interaction-patterns approach handle accessibility compliance for UI controls?▼

No, interaction-patterns does not handle accessibility compliance. It defines keyboard alternatives for pointer interactions but explicitly hands off accessibility implementation to specialized a11y tools and processes.

Related Skills

Explore More Design & Creative Skills→
hdtinh57hdtinh57
1

design

Design user flows and interaction specs grounded in PRD personas and design system.

Community
Advanced
trantuddt12trantuddt12

angular-ui-patterns

Define Angular UI patterns for loading, error, empty, and form states.

Community
Advanced
haotoolhaotool
2

ui-design-system

Design scalable UI design systems for React apps with TailwindCSS, Radix UI, and shadcn/ui.

Official
Advanced
UsernameTronUsernameTron

agent-design-patterns

Apply seven subagent design patterns to assemble agent rosters for MCP-based projects.

Community
Advanced