interaction-state-modeling
CommunityMake every async state clear and accessible
Design & Creative#accessibility#error recovery#optimistic updates#aria-live#ui state#permission handling#async UX
Authormachenjie
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: interaction-state-modeling Download link: https://github.com/machenjie/rd-skills/archive/main.zip#interaction-state-modeling Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.