Providing Feedback

What it does

When your agent uses it

• Communicating system state
• Displaying messages
• Confirming actions

Example prompts

• “Use the providing-feedback skill to implement feedback and notification systems including toasts, alerts, modals, progress indicators, and error…”
• “/providing-feedback”

Requirements

• Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

1. 1Determine Feedback Type
2. 2Choose Implementation Pattern
3. 3Implement with Recommended Libraries
4. 4Apply Accessibility Patterns
5. 5Integrate Design Tokens

What it can do on your machine

Read from SKILL.md and the folder at commit 76551b7. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.

  Shell commands in SKILL.md call:

  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Providing Feedback loads about 2.1k tokens when it runs, and up to ~29k if it reads all its reference files. Until then it costs about 58 tokens; SKILL.md has 729 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~58

When it runs · the whole SKILL.md, loaded when a task matches

~2.1k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~29k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

• WarningMentions a paste, webhook or tunnelling service often used to send data outSKILL.md:99

  toast.promise(saveData(), {

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from ancoleman/ai-design-components at commit 76551b7, republished under its MIT licence (© ancoleman). 729 words, ~2,109 tokens.

name

providing-feedback

description

Implements feedback and notification systems including toasts, alerts, modals, progress indicators, and error states. Use when communicating system state, displaying messages, confirming actions, or showing errors.

Critical + Blocking       → Modal Dialog
Important + Non-blocking  → Alert Banner
Success/Info + Temporary  → Toast/Snackbar
Contextual Help          → Tooltip/Popover
In-progress              → Progress Indicator
No Data                  → Empty State

npm install sonner @radix-ui/react-dialog

import { Toaster, toast } from 'sonner';

// In your app root
<Toaster position="bottom-right" />

// Trigger notifications
toast.success('Changes saved successfully');
toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Saved!',
  error: 'Failed to save'
});

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>Confirm Action</Dialog.Title>
      <Dialog.Description>Are you sure?</Dialog.Description>
      <Dialog.Close>Cancel</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

<!-- For non-critical notifications -->
<div role="status" aria-live="polite">
  File uploaded successfully
</div>

<!-- For critical alerts -->
<div role="alert" aria-live="assertive">
  Error: Failed to save
</div>

/* Example token usage */
.toast {
  background: var(--toast-bg);
  color: var(--toast-text);
  padding: var(--toast-padding);
  border-radius: var(--toast-border-radius);
  box-shadow: var(--toast-shadow);
  animation-duration: var(--toast-enter-duration);
}

© ancoleman, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 18 other files (scripts, references, assets) in skills/providing-feedback of ancoleman/ai-design-components.

• SKILL.md
• assets/error-catalog.json
• assets/message-templates.json
• assets/timing-config.json
• examples/confirmation-modal.tsx
• examples/inline-validation.tsx
• examples/progress-upload.tsx
• examples/success-toast.tsx
• outputs.yaml
• references/accessibility-feedback.md
• references/alert-patterns.md
• references/empty-states.md
• references/library-comparison.md
• references/modal-patterns.md
• references/progress-indicators.md
• references/toast-patterns.md
• scripts/calculate_timing.js
• … and 2 more

Open the folder on GitHubat commit 76551b7