feedback-patterns

designowl-listener1.8K installs

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`.

Install

npx skills add https://github.com/owl-listener/designer-skills --skill feedback-patterns

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)
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

frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography hyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.