feedback-patterns

安装量: 51
排名: #14457

安装

npx skills add https://github.com/owl-listener/designer-skills --skill feedback-patterns
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
返回排行榜