interaction-state-modeling

Model loading, error, success, and permission-denied states for UI flows.

4|Updated May 16, 2026
One-click install
npx skills add https://github.com/machenjie/rd-skills --skill interaction-state-modeling
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interaction-state-modeling
Source: https://github.com/machenjie/rd-skills/tree/main/src/foundation/capabilities/interaction-state-modeling
Command: npx skills add https://github.com/machenjie/rd-skills --skill interaction-state-modeling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This capability prevents user confusion and accessibility failures by requiring an explicit, complete UI state matrix for each user-facing interaction, including success, error, empty, permission-denied, disabled, partial, and timeout outcomes.

Core Features & Use Cases

  • Comprehensive state matrix: Defines loading, empty, error, success, disabled, partial, timeout, optimistic/pending, and permission-denied states for every async interaction.
  • Accessibility-first behavior: Enforces ARIA live announcements and reachable, explainable disabled actions for assistive technology users.
  • Correct recovery semantics: Requires optimistic rollback on server rejection and prevents misleading timeout/cancellation messaging.

Quick Start

Ask for an interaction state model for your feature and include the backend signals (HTTP statuses and response contracts) so the UI can map them to accessible user-visible states.

Frequently Asked Questions about interaction-state-modeling

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

FAQPage Schema
How do I design accessible async UI states for API calls?

Accessible async UI states require explicit definitions for loading, error, empty, and success conditions, paired with ARIA live announcements to inform assistive technology users of dynamic content changes during API calls.

How do I handle permission-denied states in asynchronous UX?

Handling permission-denied states in async UX involves explicitly modeling the condition separately from generic errors, ensuring the UI clearly communicates the access restriction and provides reachable, explainable disabled actions.

What is the correct UI state mapping for a 202 Accepted HTTP response?

A 202 Accepted HTTP response should map to a pending or processing UI state, indicating the asynchronous operation has been successfully queued but not yet completed, preventing premature success messaging.

How do I distinguish empty states from error states in user-facing flows?

Distinguishing empty states from error states requires distinct UI definitions where empty indicates a successful fetch with zero results, while error signifies a fetch failure, ensuring correct recovery semantics and user messaging.

How do I prevent misleading timeout and cancellation messaging in async operations?

Preventing misleading timeout messaging requires explicit timeout state definitions and correct recovery semantics, ensuring the UI accurately reflects whether the operation was cancelled by the user or timed out due to network latency.