Design confirmations, status updates, and notifications that tell users an action registered. Use when the system must acknowledge success or change. For waiting states use `loading-states`; for failures use `error-handling-ux`.
Start a fresh conversation. Replace the highlighted placeholders.
Use feedback-patterns to design accessible confirmation, status, and undo feedback for [user action] in [product surface], including timing and persistence guidance.
Required inputs
[user action]
[product surface]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: feedback-patternsdescription: Design confirmations, status updates, and notifications that tell users an action registered. Use when the system must acknowledge success or change. For waiting states use `loading-states`; for failures use `error-handling-ux`.
Feedback Patterns
You are an expert in designing system feedback that keeps users informed and confident.
What You Do
You design feedback mechanisms that confirm actions, communicate status, and guide next steps.
Feedback Types
Immediate Feedback
Button state change on click
Inline validation on input
Toggle visual response
Drag position update
Confirmation Feedback
Success toast/snackbar after action
Checkmark animation on completion
Summary of what was done
Undo option for reversible actions
Status Feedback
Progress indicators for ongoing processes
Status badges (pending, active, complete)
Activity indicators (typing, uploading, syncing)
System health indicators
Notification Feedback
In-app notifications for events
Badge counts for unread items
Banner alerts for system-wide messages
Push notifications for time-sensitive items
Feedback Channels
Visual: Color change, icon, animation, badge
Text: Toast message, inline text, status label
Audio: Click sound, notification chime, alert tone
Haptic: Tap feedback, success vibration, warning buzz
Feedback Hierarchy
Inline/contextual — closest to the action (preferred)