Skip to main content
affpapa.org
RU EN
skill CX Codex

feedback-patterns — Claude Code skill: UI confirmations and status

Gives the agent a method for designing how a system answers a user action: toasts, progress, badges, notifications. Useful when the interface goes silent after a click.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a claude-code
Open on GitHub

What feedback-patterns does

The skill frames feedback design as a small set of categories. Immediate response covers a button changing state, validation as you type, a toggle reacting, drag position. Confirmation covers the toast after saving, a checkmark, a short recap of what happened. Status covers progress, pending/active/complete badges, activity markers. Notification covers in-app messages, unread counts, banners, push alerts.

Four channels are named: visual, text, audio, haptic. A hierarchy follows — inline first, then component, then page, then system-wide — so the agent places a response next to the thing that caused it. Timing also comes with the skill: toasts dismiss on their own within 3-5 seconds, errors stay until fixed or closed, status lives while it matters.

Practices inside include matching response weight to action weight and offering undo in place of a confirmation dialog. Colour alone is never enough for accessibility. The whole thing is one SKILL.md file of guidance, so expect direction and criteria rather than finished markup.

What it helps with

  • add a success toast after a form save
  • map a feedback response to every action in a flow
  • show background task status without a reload
  • make notifications readable without relying on colour
  • swap the “Are you sure?” dialog for undo

Example prompts for the agent

  • Design the feedback for my checkout form: what shows after submit, how to offer undo.
  • Break a file upload into status steps and pick a response for each.
  • Review my toasts and badges against feedback-patterns.

How to install feedback-patterns

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a claude-code

2Manually: put the files in place

~/.claude/skills/feedback-patterns/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/feedback-patterns/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about feedback-patterns

How to install feedback-patterns in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill feedback-patterns -a claude-code. The skill lands at ~/.claude/skills/feedback-patterns/SKILL.md.

What does feedback-patterns do?

It helps the agent decide how the system tells the user an action worked: a toast, a progress bar, a badge or a notification. It also covers placement and how long the message stays.

Does it cover loading and errors?

No, those have their own skills in the same collection. Waiting states belong to loading-states, failures to error-handling-ux.

Source text

SKILL.md · MIT 
---
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
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

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set111

experience-map The skill maps every touchpoint, channel and relationship across a service. Useful when the experience spans more than one product. CX Codex +1 2,100installs jobs-to-be-done A Claude Code skill that runs a Jobs-to-Be-Done pass: splits a task into functional, emotional and social parts, then returns a map with design implications. CX Codex +1 2,100installs user-persona This skill builds 2-4 research-grounded personas from interview transcripts, surveys, or analytics. It helps teams align design decisions with observed user behavior. CX Codex +1 2,100installs gesture-patterns Designs touch and pointer gestures such as swipes, dragging and long presses. Use it when an interface relies on gestural input. CX Codex +1 2,100installs design-brief Drafts a project brief covering problem space, audience, constraints, and success criteria. Built for kicking off a specific task or feature. CX Codex +1 2,100installs competitive-analysis A skill that compares rival products on UX: patterns, features, gaps and opportunities. Useful when you need to know what competitors actually do. CX Codex +1 2,100installs prototype-strategy Decide what kind of prototype to build and how detailed it should be, before you start building it. CX Codex +1 2,100installs theming-system Designs a three-layer token architecture to support brand variants, color modes, and interface density in a single component library. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor