ux-feedback-patterns

Establish consistent feedback patterns for loading, success, error, and empty states.

1|Updated Oct 30, 2025

Search Tags:#feedback #error-handling #ux #ui-patterns #loading-states #empty-states #success-messages

Ready to run

npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill ux-feedback-patterns-phananhtuan09

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ux-feedback-patterns
Source: https://github.com/phananhtuan09/ai-agent-workflow/tree/main/.opencode/skill/ux-feedback-patterns
Command: npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill ux-feedback-patterns-phananhtuan09

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Users often struggle to understand system state and next steps during interactions. Consistent feedback patterns clarify status across loading, success, error, and empty states, reducing confusion and errors.

Core Features & Use Cases

Loading States: communicate progress during asynchronous tasks with appropriate timing and visuals.
Success States: confirm actions like submissions or mutations with timely, non-intrusive feedback.
Error States: provide specific, actionable remediation steps and recovery paths.
Empty States: guide users when there is no data or results with clear next actions.
Interaction Patterns: apply validation, optimistic updates, and destructive action confirmations with predictable behavior.
Destructive Actions: require explicit confirmation to prevent data loss.
Best Practices: maintain accessibility, consistency, and clear tone across the UI.

Quick Start

Apply these patterns to a sample form or data-loading UI to validate feedback timing and visual states.

Frequently Asked Questions about ux-feedback-patterns

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

FAQPage Schema

How do I design UX feedback patterns for loading and error states?▼

UX feedback patterns establish consistent behaviors for loading, error, success, and empty states across product interfaces. They enforce explicit timing guidelines, accessibility considerations, and actionable error remediation steps to clarify system status during user interactions.

What is the best way to handle empty states in a product UI?▼

Empty states should guide users when there is no data or results by providing clear next actions. Effective UX patterns maintain a consistent tone and offer specific directional cues to help users understand the system state and proceed.

How do I add confirmation for destructive actions in an asynchronous flow?▼

Destructive actions require explicit confirmation to prevent data loss in asynchronous operations. Structured UX patterns enforce predictable behavior by intercepting the mutation and requiring user validation before proceeding with the state change.

Why does my UI need specific error handling and recovery paths?▼

Error handling needs specific recovery paths to provide actionable remediation steps. Without consistent error states, users struggle to understand system feedback and correct data entry mistakes during asynchronous tasks and form submissions.

Can I apply optimistic updates with these UI feedback patterns?▼

Yes, interaction patterns apply optimistic updates alongside validation to ensure predictable behavior. This provides timely, non-intrusive success feedback for mutations and form submissions while maintaining explicit state behaviors across the interface.