Feedback Patterns
Design confirmations, status updates, toasts, and notifications so user actions feel clear and reversible in product UI.
Overview
Feedback Patterns is an agent skill for the Build phase that defines confirmations, status, and notification feedback so users stay informed after every action.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill feedback-patternsWhat is this skill?
- Four feedback types: immediate, confirmation, status, and notification
- Multi-channel coverage: visual, text, audio, and haptic where appropriate
- Four-level feedback hierarchy from inline contextual to system-level
- Concrete patterns: button state, inline validation, undo on reversible actions, badge counts
- Status badges and activity indicators for uploading, syncing, and typing states
- 4 feedback types: immediate, confirmation, status, notification
- 4-level feedback hierarchy from inline to system-level
- 4 feedback channels: visual, text, audio, haptic
Adoption & trust: 569 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI performs actions but users cannot tell if something succeeded, is still running, or failed without guessing from static screens.
Who is it for?
Builders specifying or refining interaction design for forms, dashboards, and async flows in web or mobile apps.
Skip if: Pure brand visual identity work, backend-only APIs with no UI, or teams that already have a locked enterprise design system with mandatory toast components.
When should I use this skill?
User needs system feedback for user actions including confirmations, status updates, and notifications in product UI.
What do I get? / Deliverables
You get a structured feedback plan spanning immediate, confirmation, status, and notification layers with channel and hierarchy guidance ready for UI implementation.
- Feedback type and channel recommendations per interaction
- Hierarchy guidance (inline vs component vs page vs system)
- Pattern list for confirmations, progress, and notifications
Recommended Skills
Journey fit
Feedback patterns are implemented while building interfaces where users click, submit, and wait on async work. Frontend is where inline validation, toasts, badges, and progress indicators ship in components and pages.
How it compares
Use for UX feedback mechanics on actions and state, not for writing marketing copy or Facebook ad creative.
Common Questions / FAQ
Who is feedback-patterns for?
Solo developers and designers using AI agents to define how apps confirm saves, show errors, surface badges, and communicate progress without ad-hoc one-off messages.
When should I use feedback-patterns?
Use during Build while designing forms, toggles, uploads, and notification centers, or when reviewing a prototype that lacks clear post-action feedback.
Is feedback-patterns safe to install?
Check the Security Audits panel on this Prism catalog page before installing; the skill is documentation-only and does not require shell or network by default.
SKILL.md
READMESKILL.md - 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 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