feedback-patterns
owl-listener/designer-skills
Design confirmations, status updates, and notifications that acknowledge user actions.
What is feedback-patterns?
Feedback Patterns teaches you to design system feedback that confirms actions, communicates status, and guides next steps. Use it when your interface must acknowledge success or change; pair it with loading-states for waiting and error-handling-ux for failures.
- Design immediate feedback like button state changes and inline validation
- Create confirmation feedback with toasts, checkmarks, and undo options
- Build status feedback using progress indicators, badges, and activity indicators
- Implement notification feedback across in-app, badge, banner, and push channels
- Apply feedback hierarchy from inline/contextual to system-level notifications
- Choose appropriate feedback channels: visual, text, audio, and haptic
How to install feedback-patterns
npx skills add https://github.com/owl-listener/designer-skills --skill feedback-patternsHow to use feedback-patterns
- 1.Identify the action type: immediate, confirmation, status, or notification
- 2.Select the appropriate feedback channel based on action importance and context
- 3.Choose the feedback hierarchy level (inline, component, page, or system)
- 4.Set duration and dismissal rules (auto-dismiss toasts after 3–5 seconds, persist errors)
- 5.Test feedback timing to ensure it feels responsive without interrupting user flow
- 6.Ensure all feedback is accessible and not color-only
Use cases
- Confirming form submission with a success toast and undo option
- Showing upload progress with a status indicator and completion checkmark
- Displaying real-time typing or syncing activity in collaborative tools
- Alerting users to system-wide events via banners or badge counts
- Providing immediate visual response to button clicks and toggle interactions
- Product designers building user-facing interfaces
- Frontend developers implementing feedback mechanisms
- UX researchers validating feedback timing and clarity
- Design systems teams standardizing confirmation and notification patterns
feedback-patterns FAQ
Use feedback-patterns for confirmations and status updates on successful actions. Use loading-states for ongoing processes and waiting states. Use error-handling-ux for failure messages and error recovery.
Inline/contextual feedback appears closest to the action (preferred for minor confirmations). Page-level feedback uses toasts or banners for broader visibility when context switching is acceptable.
Success toasts should auto-dismiss after 3–5 seconds. Error messages should persist until resolved or explicitly dismissed by the user.
No. Instead, provide undo options for reversible actions, which is less disruptive and more user-friendly than confirmation dialogs.
Never rely on color alone. Combine visual feedback (icons, animations) with text labels, and consider audio or haptic feedback for additional confirmation.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: feedback-patterns
description: 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)
- Component-level — within the current component
- Page-level — banner or toast at page level
- System-level — notification outside current view
Duration and Dismissal
- Toasts: auto-dismiss after 3-5 seconds
- Errors: persist until resolved or dismissed
- Confirmations: brief display with undo window
- Status: persist while relevant
Best Practices
- Acknowledge every user action
- Match feedback intensity to action importance
- Don't interrupt flow for minor confirmations
- Provide undo rather than 'Are you sure?'
- Ensure feedback is accessible (not color-only)
- Test that feedback timing feels right
Related skills
More from owl-listener/designer-skills and the wider catalog.
fitts-law
Apply Fitts's Law to size and position controls for faster, more accurate interaction.
form-design
Design forms that reduce abandonment and errors through clear layout, smart validation, and accessibility.
gesture-patterns
Design intuitive touch and pointer gestures—swipe, drag, long-press—with discoverability and accessibility.
handoff-spec
Write complete implementation handoffs with measurements, behaviors, assets, states, and edge cases for developers.
heuristic-evaluation
Systematic expert review of interfaces against Nielsen's 10 usability heuristics with severity ratings.
hicks-law
Reduce decision time by controlling the number of simultaneous choices presented.