feedback-loop-states-and-latency

What problem does it solve?

This Skill solves the problem of users feeling confused or stuck when interactive actions take variable time, because the UI does not clearly communicate state changes or match feedback timing to human perceptual thresholds.

Core Features & Use Cases

• Visible state routing for interactive elements: Define consistent Idle / Pending / Success / Error presentation for buttons, form submissions, uploads, and loading experiences.
• Latency-thresholded feedback: Choose appropriate indicators (none, subtle change, spinner/progress, time remaining, and cancel) based on expected response time ranges.
• Recovery-first error messaging: Render in-context, specific, actionable error feedback tied to the element that failed, including accessibility associations (aria-invalid, aria-describedby).
• State-management patterns: Apply optimistic UI where reversible and high-success actions benefit from instant perceived responsiveness, and distinguish skeleton screens vs spinners for content loading.

Quick Start

Use the skill to design the full state flow (idle, pending, success, error) and select latency-appropriate UI for a submit button that may take 2–30 seconds, then write an in-context error message that tells users exactly what to do next.