feedback-loop-states-and-latency

What problem does it solve? Interactive elements often leave users guessing whether an action registered, is processing, succeeded, or failed, especially when response times vary. This Skill provides concrete patterns for the four visible states (idle, pending, success, error) and maps feedback types to empirically grounded latency thresholds so users always know what the system is doing. ## Core Features & Use Cases - Four-state model: Defines idle, pending, success, and error states with HTML/CSS implementation patterns for buttons, forms, and async operations. - Latency-threshold mapping: Matches feedback to response time using the Miller/Card/Doherty thresholds, from no indicator under 100ms to progress bars with time estimates beyond 10 seconds. - Optimistic UI and skeleton screens: Covers optimistic updates with rollback for high-success reversible actions, and skeleton placeholders instead of spinners for content loading. - Use Case: When building a file-upload flow, apply the >10s pattern: a determinate progress bar, percentage and time-remaining text, and a cancel button, rather than a bare spinner. ## Quick Start Ask the agent to design the idle, pending, success, and error states for a form-submit button with feedback matched to its expected response time.