feedback-patterns
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`.
Works with
--- 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`. license: MIT --- # 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 1. Inline/contextual — closest to the action (preferred) 2. Component-level — within the current component 3. Page-level — banner or toast at page level 4. 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
More General & Other skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
